@uzum-tech/ui 2.3.7 → 3.0.0-alpha.0

package/lib/_internal/button-v3/src/ButtonV3.js

@@ -0,0 +1,170 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XButtonV3 = void 0;
+const vue_1 = require("vue");
+const _mixins_1 = require("../../../_mixins");
+const _utils_1 = require("../../../_utils");
+const styles_1 = require("../styles");
+const interface_1 = require("./interface");
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const utils_1 = require("./utils");
+const ButtonV3 = (0, vue_1.defineComponent)({
+    name: 'ButtonV3',
+    props: interface_1.buttonV3Props,
+    slots: Object,
+    setup(props, { attrs }) {
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                if (props.type === 'secondary' && props.tone === 'negative') {
+                    (0, _utils_1.warnOnce)('button-v3', 'У типа `secondary` нет тона `negative` — используется тон `default`.');
+                }
+                if (props.iconOnly
+                    && !attrs['aria-label']
+                    && !attrs['aria-labelledby']
+                    && !attrs.title) {
+                    (0, _utils_1.warnOnce)('button-v3', 'Кнопке с `icon-only` нужен `aria-label` (или `title`) — иначе действие непонятно.');
+                }
+            });
+        }
+        const selfElRef = (0, vue_1.ref)(null);
+        const { inlineThemeDisabled, mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('ButtonV3', '-button-v3', index_cssr_1.default, styles_1.buttonV3Light, props, mergedClsPrefixRef);
+        const { mergedSizeRef } = (0, _mixins_1.useFormItem)({}, {
+            defaultSize: 'medium',
+            mergedSize: (UFormItem) => {
+                const { size } = props;
+                if (size)
+                    return size;
+                const { mergedSize: formItemSize } = UFormItem || {};
+                if (formItemSize)
+                    return formItemSize.value;
+                return 'medium';
+            }
+        });
+        const variantKeyRef = (0, vue_1.computed)(() => (0, utils_1.resolveVariantKey)(props.type, props.tone));
+        const mergedDisabledRef = (0, vue_1.computed)(() => props.disabled);
+        const inertRef = (0, vue_1.computed)(() => props.disabled || props.loading);
+        const mergedFocusableRef = (0, vue_1.computed)(() => props.focusable && !props.disabled);
+        const spinnerStrokeWidthRef = (0, vue_1.computed)(() => {
+            const { self } = themeRef.value;
+            return (0, utils_1.resolveSpinnerStrokeWidth)(self[(0, _utils_1.createKey)('iconSize', mergedSizeRef.value)], self.spinnerStrokeWidth);
+        });
+        const handleClick = (e) => {
+            if (inertRef.value) {
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
+            const { onClick } = props;
+            if (onClick)
+                (0, _utils_1.call)(onClick, e);
+        };
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
+            const { fontFamily, fontSize, lineHeight, fontWeight, letterSpacing, iconMargin, borderWidth, focusRingWidth, focusRingColor, pressedOverlayColor, textColorDisabled } = self;
+            const size = mergedSizeRef.value;
+            const variant = (0, utils_1.upperFirst)(variantKeyRef.value);
+            const colors = self;
+            return {
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-height': self[(0, _utils_1.createKey)('height', size)],
+                '--u-padding': self[(0, _utils_1.createKey)('padding', size)],
+                '--u-border-radius': self[(0, _utils_1.createKey)('borderRadius', size)],
+                '--u-icon-size': self[(0, _utils_1.createKey)('iconSize', size)],
+                '--u-icon-margin': iconMargin,
+                '--u-font-family': fontFamily,
+                '--u-font-size': fontSize,
+                '--u-line-height': lineHeight,
+                '--u-font-weight': fontWeight,
+                '--u-letter-spacing': letterSpacing,
+                '--u-border-width': borderWidth,
+                '--u-focus-ring-width': focusRingWidth,
+                '--u-focus-ring-color': focusRingColor,
+                '--u-pressed-overlay-color': pressedOverlayColor,
+                '--u-color': colors[`color${variant}`],
+                '--u-color-hover': colors[`color${variant}Hover`],
+                '--u-color-disabled': colors[`color${variant}Disabled`],
+                '--u-text-color': colors[`textColor${variant}`],
+                '--u-text-color-hover': colors[`textColor${variant}Hover`],
+                '--u-text-color-disabled': textColorDisabled,
+                '--u-border-color': colors[`borderColor${variant}`],
+                '--u-border-color-disabled': colors[`borderColor${variant}Disabled`]
+            };
+        });
+        const themeClassHashRef = (0, vue_1.computed)(() => `${variantKeyRef.value}-${mergedSizeRef.value}`);
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('button-v3', themeClassHashRef, cssVarsRef, props)
+            : undefined;
+        return {
+            selfElRef,
+            mergedClsPrefix: mergedClsPrefixRef,
+            mergedSize: mergedSizeRef,
+            mergedDisabled: mergedDisabledRef,
+            mergedFocusable: mergedFocusableRef,
+            inert: inertRef,
+            spinnerStrokeWidth: spinnerStrokeWidthRef,
+            handleClick,
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+        };
+    },
+    render() {
+        const { $slots, mergedClsPrefix: clsPrefix, tag: Component, iconOnly, loading, mergedDisabled, inert, spinnerStrokeWidth: strokeWidth, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        const iconStartSlot = $slots['icon-start'];
+        const iconEndSlot = $slots['icon-end'];
+        const hasIconStart = !!iconStartSlot;
+        const hasIconEnd = !!iconEndSlot;
+        const centeredSpinner = loading && !iconOnly && !hasIconStart && !hasIconEnd;
+        const children = [];
+        if (iconOnly) {
+            children.push((0, utils_1.renderIconSlot)({
+                clsPrefix,
+                slot: iconStartSlot || $slots.default,
+                showSpinner: loading,
+                strokeWidth,
+                key: 'icon'
+            }));
+        }
+        else {
+            children.push((0, utils_1.renderIconSlot)({
+                clsPrefix,
+                slot: iconStartSlot,
+                showSpinner: loading && hasIconStart,
+                strokeWidth,
+                key: 'icon-start'
+            }));
+            if ($slots.default) {
+                children.push((0, vue_1.h)("span", { class: `${clsPrefix}-button-v3__label` }, $slots.default()));
+            }
+            children.push((0, utils_1.renderIconSlot)({
+                clsPrefix,
+                slot: iconEndSlot,
+                showSpinner: loading && !hasIconStart && hasIconEnd,
+                strokeWidth,
+                key: 'icon-end'
+            }));
+            if (centeredSpinner) {
+                children.push((0, vue_1.h)("span", { class: `${clsPrefix}-button-v3__spinner` }, (0, utils_1.renderSpinner)(clsPrefix, strokeWidth)));
+            }
+        }
+        return ((0, vue_1.h)(Component, { ref: "selfElRef", class: [
+                `${clsPrefix}-button-v3`,
+                this.themeClass,
+                `${clsPrefix}-button-v3--${this.type}-type`,
+                `${clsPrefix}-button-v3--${this.tone}-tone`,
+                `${clsPrefix}-button-v3--${this.mergedSize}-size`,
+                iconOnly && `${clsPrefix}-button-v3--icon-only`,
+                this.block && `${clsPrefix}-button-v3--block`,
+                mergedDisabled && `${clsPrefix}-button-v3--disabled`,
+                loading && `${clsPrefix}-button-v3--loading`,
+                centeredSpinner && `${clsPrefix}-button-v3--loading-text-only`
+            ], style: this.cssVars, type: Component === 'button' ? this.attrType : undefined, disabled: Component === 'button' ? mergedDisabled : undefined, tabindex: this.mergedFocusable ? 0 : -1, "aria-disabled": inert ? 'true' : undefined, "aria-busy": loading ? 'true' : undefined, onClick: this.handleClick }, children));
+    }
+});
+exports.default = ButtonV3;
+exports.XButtonV3 = ButtonV3;

package/lib/_internal/button-v3/src/interface.d.ts

@@ -0,0 +1,281 @@
+import type { ButtonHTMLAttributes, ExtractPropTypes, PropType, VNode } from 'vue';
+import type { ExtractPublicPropTypes, MaybeArray } from '../../../_utils';
+export declare const buttonV3Props: {
+    readonly type: {
+        readonly type: PropType<ButtonV3Type>;
+        readonly default: "primary";
+    };
+    readonly tone: {
+        readonly type: PropType<ButtonV3Tone>;
+        readonly default: "default";
+    };
+    readonly size: PropType<ButtonV3Size>;
+    readonly iconOnly: BooleanConstructor;
+    readonly block: BooleanConstructor;
+    readonly disabled: BooleanConstructor;
+    readonly loading: BooleanConstructor;
+    readonly focusable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly tag: {
+        readonly type: PropType<ButtonV3Tag>;
+        readonly default: "button";
+    };
+    readonly attrType: {
+        readonly type: PropType<ButtonV3AttrType>;
+        readonly default: "button";
+    };
+    readonly onClick: PropType<ButtonV3ClickHandler>;
+    readonly theme: PropType<import("../../../_mixins").Theme<"ButtonV3", {
+        fontFamily: string;
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        letterSpacing: string;
+        pressedOverlayColor: string;
+        focusRingColor: string;
+        textColorDisabled: string;
+        colorPrimary: string;
+        colorPrimaryHover: string;
+        textColorPrimary: string;
+        textColorPrimaryHover: string;
+        borderColorPrimary: string;
+        colorPrimaryDisabled: string;
+        borderColorPrimaryDisabled: string;
+        colorPrimaryNegative: string;
+        colorPrimaryNegativeHover: string;
+        textColorPrimaryNegative: string;
+        textColorPrimaryNegativeHover: string;
+        borderColorPrimaryNegative: string;
+        colorPrimaryNegativeDisabled: string;
+        borderColorPrimaryNegativeDisabled: string;
+        colorSecondary: string;
+        colorSecondaryHover: string;
+        textColorSecondary: string;
+        textColorSecondaryHover: string;
+        borderColorSecondary: string;
+        colorSecondaryDisabled: string;
+        borderColorSecondaryDisabled: string;
+        colorTertiary: string;
+        colorTertiaryHover: string;
+        textColorTertiary: string;
+        textColorTertiaryHover: string;
+        borderColorTertiary: string;
+        colorTertiaryDisabled: string;
+        borderColorTertiaryDisabled: string;
+        colorTertiaryNegative: string;
+        colorTertiaryNegativeHover: string;
+        textColorTertiaryNegative: string;
+        textColorTertiaryNegativeHover: string;
+        borderColorTertiaryNegative: string;
+        colorTertiaryNegativeDisabled: string;
+        borderColorTertiaryNegativeDisabled: string;
+        colorGhost: string;
+        colorGhostHover: string;
+        textColorGhost: string;
+        textColorGhostHover: string;
+        borderColorGhost: string;
+        colorGhostDisabled: string;
+        borderColorGhostDisabled: string;
+        colorGhostNegative: string;
+        colorGhostNegativeHover: string;
+        textColorGhostNegative: string;
+        textColorGhostNegativeHover: string;
+        borderColorGhostNegative: string;
+        colorGhostNegativeDisabled: string;
+        borderColorGhostNegativeDisabled: string;
+        heightSmall: string;
+        heightMedium: string;
+        heightLarge: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        borderRadiusSmall: string;
+        borderRadiusMedium: string;
+        borderRadiusLarge: string;
+        iconSizeSmall: string;
+        iconSizeMedium: string;
+        iconSizeLarge: string;
+        iconMargin: string;
+        borderWidth: string;
+        focusRingWidth: string;
+        spinnerStrokeWidth: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"ButtonV3", {
+        fontFamily: string;
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        letterSpacing: string;
+        pressedOverlayColor: string;
+        focusRingColor: string;
+        textColorDisabled: string;
+        colorPrimary: string;
+        colorPrimaryHover: string;
+        textColorPrimary: string;
+        textColorPrimaryHover: string;
+        borderColorPrimary: string;
+        colorPrimaryDisabled: string;
+        borderColorPrimaryDisabled: string;
+        colorPrimaryNegative: string;
+        colorPrimaryNegativeHover: string;
+        textColorPrimaryNegative: string;
+        textColorPrimaryNegativeHover: string;
+        borderColorPrimaryNegative: string;
+        colorPrimaryNegativeDisabled: string;
+        borderColorPrimaryNegativeDisabled: string;
+        colorSecondary: string;
+        colorSecondaryHover: string;
+        textColorSecondary: string;
+        textColorSecondaryHover: string;
+        borderColorSecondary: string;
+        colorSecondaryDisabled: string;
+        borderColorSecondaryDisabled: string;
+        colorTertiary: string;
+        colorTertiaryHover: string;
+        textColorTertiary: string;
+        textColorTertiaryHover: string;
+        borderColorTertiary: string;
+        colorTertiaryDisabled: string;
+        borderColorTertiaryDisabled: string;
+        colorTertiaryNegative: string;
+        colorTertiaryNegativeHover: string;
+        textColorTertiaryNegative: string;
+        textColorTertiaryNegativeHover: string;
+        borderColorTertiaryNegative: string;
+        colorTertiaryNegativeDisabled: string;
+        borderColorTertiaryNegativeDisabled: string;
+        colorGhost: string;
+        colorGhostHover: string;
+        textColorGhost: string;
+        textColorGhostHover: string;
+        borderColorGhost: string;
+        colorGhostDisabled: string;
+        borderColorGhostDisabled: string;
+        colorGhostNegative: string;
+        colorGhostNegativeHover: string;
+        textColorGhostNegative: string;
+        textColorGhostNegativeHover: string;
+        borderColorGhostNegative: string;
+        colorGhostNegativeDisabled: string;
+        borderColorGhostNegativeDisabled: string;
+        heightSmall: string;
+        heightMedium: string;
+        heightLarge: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        borderRadiusSmall: string;
+        borderRadiusMedium: string;
+        borderRadiusLarge: string;
+        iconSizeSmall: string;
+        iconSizeMedium: string;
+        iconSizeLarge: string;
+        iconMargin: string;
+        borderWidth: string;
+        focusRingWidth: string;
+        spinnerStrokeWidth: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"ButtonV3", {
+        fontFamily: string;
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        letterSpacing: string;
+        pressedOverlayColor: string;
+        focusRingColor: string;
+        textColorDisabled: string;
+        colorPrimary: string;
+        colorPrimaryHover: string;
+        textColorPrimary: string;
+        textColorPrimaryHover: string;
+        borderColorPrimary: string;
+        colorPrimaryDisabled: string;
+        borderColorPrimaryDisabled: string;
+        colorPrimaryNegative: string;
+        colorPrimaryNegativeHover: string;
+        textColorPrimaryNegative: string;
+        textColorPrimaryNegativeHover: string;
+        borderColorPrimaryNegative: string;
+        colorPrimaryNegativeDisabled: string;
+        borderColorPrimaryNegativeDisabled: string;
+        colorSecondary: string;
+        colorSecondaryHover: string;
+        textColorSecondary: string;
+        textColorSecondaryHover: string;
+        borderColorSecondary: string;
+        colorSecondaryDisabled: string;
+        borderColorSecondaryDisabled: string;
+        colorTertiary: string;
+        colorTertiaryHover: string;
+        textColorTertiary: string;
+        textColorTertiaryHover: string;
+        borderColorTertiary: string;
+        colorTertiaryDisabled: string;
+        borderColorTertiaryDisabled: string;
+        colorTertiaryNegative: string;
+        colorTertiaryNegativeHover: string;
+        textColorTertiaryNegative: string;
+        textColorTertiaryNegativeHover: string;
+        borderColorTertiaryNegative: string;
+        colorTertiaryNegativeDisabled: string;
+        borderColorTertiaryNegativeDisabled: string;
+        colorGhost: string;
+        colorGhostHover: string;
+        textColorGhost: string;
+        textColorGhostHover: string;
+        borderColorGhost: string;
+        colorGhostDisabled: string;
+        borderColorGhostDisabled: string;
+        colorGhostNegative: string;
+        colorGhostNegativeHover: string;
+        textColorGhostNegative: string;
+        textColorGhostNegativeHover: string;
+        borderColorGhostNegative: string;
+        colorGhostNegativeDisabled: string;
+        borderColorGhostNegativeDisabled: string;
+        heightSmall: string;
+        heightMedium: string;
+        heightLarge: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        borderRadiusSmall: string;
+        borderRadiusMedium: string;
+        borderRadiusLarge: string;
+        iconSizeSmall: string;
+        iconSizeMedium: string;
+        iconSizeLarge: string;
+        iconMargin: string;
+        borderWidth: string;
+        focusRingWidth: string;
+        spinnerStrokeWidth: string;
+    }, any>>>;
+};
+export interface ButtonV3Slots {
+    default?: () => VNode[];
+    'icon-start'?: () => VNode[];
+    'icon-end'?: () => VNode[];
+}
+export interface ButtonV3ThemeSelfVars {
+    [key: string]: string;
+}
+export interface ButtonV3IconSlotOptions {
+    clsPrefix: string;
+    slot: (() => VNode[]) | undefined;
+    showSpinner: boolean;
+    strokeWidth: number;
+    key: string;
+}
+export type ButtonV3Type = 'primary' | 'secondary' | 'tertiary' | 'ghost';
+export type ButtonV3Tone = 'default' | 'negative';
+export type ButtonV3Size = 'small' | 'medium' | 'large';
+export type ButtonV3Tag = keyof HTMLElementTagNameMap;
+export type ButtonV3AttrType = 'button' | 'submit' | 'reset';
+export type ButtonV3VariantKey = 'primary' | 'primaryNegative' | 'secondary' | 'tertiary' | 'tertiaryNegative' | 'ghost' | 'ghostNegative';
+export type ButtonV3ClickHandler = MaybeArray<(e: MouseEvent) => void>;
+export type ButtonV3Props = ExtractPublicPropTypes<typeof buttonV3Props>;
+export type InternalButtonV3Props = ExtractPropTypes<typeof buttonV3Props>;
+export type ButtonV3NativeProps = Omit<ButtonHTMLAttributes, keyof InternalButtonV3Props>;
+export type ButtonV3MergedProps = Partial<InternalButtonV3Props & ButtonV3NativeProps>;

package/lib/_internal/button-v3/src/interface.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonV3Props = void 0;
+const _mixins_1 = require("../../../_mixins");
+exports.buttonV3Props = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { type: {
+        type: String,
+        default: 'primary'
+    }, tone: {
+        type: String,
+        default: 'default'
+    }, size: String, iconOnly: Boolean, block: Boolean, disabled: Boolean, loading: Boolean, focusable: {
+        type: Boolean,
+        default: true
+    }, tag: {
+        type: String,
+        default: 'button'
+    }, attrType: {
+        type: String,
+        default: 'button'
+    }, onClick: [Function, Array] });

package/lib/_internal/button-v3/src/styles/index.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/_internal/button-v3/src/styles/index.cssr.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../../_utils/cssr");
+exports.default = (0, cssr_1.c)([(0, cssr_1.c)('@keyframes u-button-v3-spin', `
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+ `), (0, cssr_1.cB)('button-v3', `
+ box-sizing: border-box;
+ position: relative;
+ display: inline-flex;
+ flex-wrap: nowrap;
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: center;
+ gap: var(--u-icon-margin);
+ margin: 0;
+ max-width: 100%;
+ height: var(--u-height);
+ padding: var(--u-padding);
+ border: var(--u-border-width) solid var(--u-border-color);
+ border-radius: var(--u-border-radius);
+ background-color: var(--u-color);
+ color: var(--u-text-color);
+ font-family: var(--u-font-family);
+ font-size: var(--u-font-size);
+ line-height: var(--u-line-height);
+ font-weight: var(--u-font-weight);
+ letter-spacing: var(--u-letter-spacing);
+ text-align: center;
+ text-decoration: none;
+ white-space: nowrap;
+ cursor: pointer;
+ outline: none;
+ user-select: none;
+ -webkit-user-select: none;
+ -webkit-tap-highlight-color: transparent;
+ transition:
+ color .3s var(--u-bezier),
+ background-color .3s var(--u-bezier),
+ border-color .3s var(--u-bezier);
+ `, [(0, cssr_1.c)('&::after', `
+ content: "";
+ position: absolute;
+ inset: calc(var(--u-border-width) * -1);
+ z-index: 0;
+ border-radius: inherit;
+ background-color: var(--u-pressed-overlay-color);
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity .2s var(--u-bezier);
+ `), (0, cssr_1.cE)('label', `
+ position: relative;
+ z-index: 1;
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ `), (0, cssr_1.cE)('icon', `
+ position: relative;
+ z-index: 1;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex: none;
+ width: var(--u-icon-size);
+ height: var(--u-icon-size);
+ font-size: var(--u-icon-size);
+ line-height: 1;
+ `, [(0, cssr_1.c)('svg', `
+ width: 1em;
+ height: 1em;
+ `)]), (0, cssr_1.cE)('spinner', `
+ position: absolute;
+ z-index: 1;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: var(--u-icon-size);
+ height: var(--u-icon-size);
+ font-size: var(--u-icon-size);
+ line-height: 1;
+ `), (0, cssr_1.cE)('spinner-icon', `
+ display: block;
+ width: 100%;
+ height: 100%;
+ color: currentColor;
+ animation: u-button-v3-spin 1s linear infinite;
+ `), (0, cssr_1.cM)('block', `
+ display: flex;
+ width: 100%;
+ `), (0, cssr_1.cM)('icon-only', `
+ padding: 0;
+ width: var(--u-height);
+ `), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', `
+ background-color: var(--u-color-hover);
+ color: var(--u-text-color-hover);
+ `), (0, cssr_1.c)('&:focus-visible', `
+ outline: var(--u-focus-ring-width) solid var(--u-focus-ring-color);
+ outline-offset: 0;
+ `), (0, cssr_1.cNotM)('loading', [(0, cssr_1.c)('&:active', `
+ background-color: var(--u-color);
+ `, [(0, cssr_1.c)('&::after', `
+ opacity: 1;
+ `)])])]), (0, cssr_1.cM)('ghost-type', [(0, cssr_1.c)('&::after', `
+ display: none;
+ `), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:focus-visible', `
+ color: var(--u-text-color-hover);
+ `)])]), (0, cssr_1.cM)('disabled', `
+ cursor: not-allowed;
+ background-color: var(--u-color-disabled);
+ border-color: var(--u-border-color-disabled);
+ color: var(--u-text-color-disabled);
+ `), (0, cssr_1.cM)('loading', `
+ cursor: default;
+ `), (0, cssr_1.cM)('loading-text-only', [(0, cssr_1.cE)('label', `
+ visibility: hidden;
+ `)])])]);

package/lib/_internal/button-v3/src/utils.d.ts

@@ -0,0 +1,10 @@
+import type { VNode } from 'vue';
+import type { ButtonV3IconSlotOptions, ButtonV3Tone, ButtonV3Type, ButtonV3VariantKey } from './interface';
+export declare const SPINNER_VIEWBOX = 100;
+export declare const SPINNER_ARC = 0.75;
+export declare const DEFAULT_SPINNER_STROKE_WIDTH = 18.5;
+export declare function resolveVariantKey(type: ButtonV3Type, tone: ButtonV3Tone): ButtonV3VariantKey;
+export declare function upperFirst(value: string): string;
+export declare function resolveSpinnerStrokeWidth(iconSize: string, strokeWidth: string): number;
+export declare function renderSpinner(clsPrefix: string, strokeWidth: number): VNode;
+export declare function renderIconSlot(options: ButtonV3IconSlotOptions): VNode | null;

package/lib/_internal/button-v3/src/utils.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_SPINNER_STROKE_WIDTH = exports.SPINNER_ARC = exports.SPINNER_VIEWBOX = void 0;
+exports.resolveVariantKey = resolveVariantKey;
+exports.upperFirst = upperFirst;
+exports.resolveSpinnerStrokeWidth = resolveSpinnerStrokeWidth;
+exports.renderSpinner = renderSpinner;
+exports.renderIconSlot = renderIconSlot;
+const vue_1 = require("vue");
+exports.SPINNER_VIEWBOX = 100;
+exports.SPINNER_ARC = 0.75;
+exports.DEFAULT_SPINNER_STROKE_WIDTH = 18.5;
+function resolveVariantKey(type, tone) {
+    if (tone !== 'negative' || type === 'secondary')
+        return type;
+    return `${type}Negative`;
+}
+function upperFirst(value) {
+    return value.charAt(0).toUpperCase() + value.slice(1);
+}
+function resolveSpinnerStrokeWidth(iconSize, strokeWidth) {
+    const size = Number.parseFloat(iconSize);
+    const stroke = Number.parseFloat(strokeWidth);
+    if (!size || !stroke)
+        return exports.DEFAULT_SPINNER_STROKE_WIDTH;
+    return (stroke / size) * exports.SPINNER_VIEWBOX;
+}
+function renderSpinner(clsPrefix, strokeWidth) {
+    const radius = (exports.SPINNER_VIEWBOX - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const arc = exports.SPINNER_ARC * circumference;
+    return (0, vue_1.h)('svg', {
+        class: `${clsPrefix}-button-v3__spinner-icon`,
+        viewBox: `0 0 ${exports.SPINNER_VIEWBOX} ${exports.SPINNER_VIEWBOX}`,
+        xmlns: 'http://www.w3.org/2000/svg',
+        role: 'img',
+        'aria-label': 'loading'
+    }, [
+        (0, vue_1.h)('circle', {
+            cx: exports.SPINNER_VIEWBOX / 2,
+            cy: exports.SPINNER_VIEWBOX / 2,
+            r: radius,
+            fill: 'none',
+            stroke: 'currentColor',
+            'stroke-width': strokeWidth,
+            'stroke-linecap': 'round',
+            'stroke-dasharray': `${arc} ${circumference - arc}`
+        })
+    ]);
+}
+function renderIconSlot(options) {
+    const { clsPrefix, slot, showSpinner, strokeWidth, key } = options;
+    if (!showSpinner && !slot)
+        return null;
+    return (0, vue_1.h)('span', { key, class: `${clsPrefix}-button-v3__icon` }, showSpinner ? [renderSpinner(clsPrefix, strokeWidth)] : slot === null || slot === void 0 ? void 0 : slot());
+}

package/lib/_internal/button-v3/styles/_common.d.ts

@@ -0,0 +1,19 @@
+declare const _default: {
+    heightSmall: string;
+    heightMedium: string;
+    heightLarge: string;
+    paddingSmall: string;
+    paddingMedium: string;
+    paddingLarge: string;
+    borderRadiusSmall: string;
+    borderRadiusMedium: string;
+    borderRadiusLarge: string;
+    iconSizeSmall: string;
+    iconSizeMedium: string;
+    iconSizeLarge: string;
+    iconMargin: string;
+    borderWidth: string;
+    focusRingWidth: string;
+    spinnerStrokeWidth: string;
+};
+export default _default;