@shtabapp/ui-kit 1.85.0 → 1.85.1

package/dist/components/SBadge/SBadge.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,120 @@
+import { ESBadgeColor, ESBadgePlacement, ESBadgeSize } from "./SBadge.types.js";
+import { computed, createBlock, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString, unref, useSlots } from "vue";
+import { SIcon } from "@shtabapp/ui-kit-primitives";
+//#region src/components/SBadge/SBadge.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "s-ui-badge-anchor"
+};
+var _hoisted_2 = ["role", "aria-label"];
+var _hoisted_3 = {
+	key: 1,
+	class: "s-ui-badge__dot"
+};
+var _hoisted_4 = {
+	key: 2,
+	class: "s-ui-badge__label s-ui-typography-label-10-medium"
+};
+var _hoisted_5 = ["role", "aria-label"];
+var _hoisted_6 = {
+	key: 1,
+	class: "s-ui-badge__dot"
+};
+var _hoisted_7 = {
+	key: 2,
+	class: "s-ui-badge__label s-ui-typography-label-10-medium"
+};
+var badgeIconSize = 16;
+var SBadge_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SBadge",
+	props: {
+		anchored: {
+			type: Boolean,
+			default: false
+		},
+		color: { default: () => ESBadgeColor.DANGER },
+		value: {},
+		max: {},
+		label: {},
+		icon: {},
+		size: { default: () => ESBadgeSize.SMALL },
+		placement: { default: () => ESBadgePlacement.TOP_END },
+		offsetX: { default: 0 },
+		offsetY: { default: 0 }
+	},
+	setup(__props) {
+		const slots = useSlots();
+		const isAnchored = computed(() => {
+			return Boolean(slots.default || __props.anchored);
+		});
+		const hasCounterValue = computed(() => {
+			return typeof __props.value === "number";
+		});
+		const displayValue = computed(() => {
+			if (typeof __props.value !== "number") return "";
+			if (__props.max && __props.value > __props.max) return `${__props.max}+`;
+			return String(__props.value);
+		});
+		const isSingleCharacter = computed(() => {
+			return displayValue.value.length === 1;
+		});
+		const isIconBadge = computed(() => {
+			return Boolean(__props.icon);
+		});
+		const isDotBadge = computed(() => {
+			return !isIconBadge.value && !hasCounterValue.value;
+		});
+		const badgeClasses = computed(() => {
+			return [`s-ui-badge--color-${__props.color}`, {
+				"s-ui-badge--anchored": isAnchored.value,
+				"s-ui-badge--single": isSingleCharacter.value && !isIconBadge.value,
+				"s-ui-badge--with-dot": isDotBadge.value,
+				"s-ui-badge--with-icon": isIconBadge.value,
+				[`s-ui-badge--size-${__props.size}`]: __props.size !== ESBadgeSize.SMALL || isIconBadge.value || isDotBadge.value,
+				[`s-ui-badge--placement-${__props.placement}`]: isAnchored.value
+			}];
+		});
+		const badgeOffsetStyle = computed(() => {
+			if (!isAnchored.value) return;
+			return {
+				"--s-ui-badge-offset-x": `${__props.offsetX}px`,
+				"--s-ui-badge-offset-y": `${__props.offsetY}px`
+			};
+		});
+		/**
+		* Имя бейджа. У `span` без роли `aria-label` не читается (axe `aria-prohibited-attr`),
+		* поэтому бейдж с именем — `role="img"`.
+		*/
+		const accessibleLabel = computed(() => {
+			if (__props.label) return __props.label;
+			if (__props.icon) return __props.icon;
+			if (displayValue.value) return displayValue.value;
+		});
+		return (_ctx, _cache) => {
+			return unref(slots).default ? (openBlock(), createElementBlock("span", _hoisted_1, [renderSlot(_ctx.$slots, "default"), createElementVNode("span", {
+				class: normalizeClass(["s-ui-badge", badgeClasses.value]),
+				style: normalizeStyle(badgeOffsetStyle.value),
+				role: accessibleLabel.value ? "img" : void 0,
+				"aria-label": accessibleLabel.value
+			}, [__props.icon ? (openBlock(), createBlock(unref(SIcon), {
+				key: 0,
+				class: "s-ui-badge__icon",
+				name: __props.icon,
+				size: badgeIconSize
+			}, null, 8, ["name"])) : isDotBadge.value ? (openBlock(), createElementBlock("span", _hoisted_3)) : (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(displayValue.value), 1))], 14, _hoisted_2)])) : (openBlock(), createElementBlock("span", {
+				key: 1,
+				class: normalizeClass(["s-ui-badge", badgeClasses.value]),
+				style: normalizeStyle(badgeOffsetStyle.value),
+				role: accessibleLabel.value ? "img" : void 0,
+				"aria-label": accessibleLabel.value
+			}, [__props.icon ? (openBlock(), createBlock(unref(SIcon), {
+				key: 0,
+				class: "s-ui-badge__icon",
+				name: __props.icon,
+				size: badgeIconSize
+			}, null, 8, ["name"])) : isDotBadge.value ? (openBlock(), createElementBlock("span", _hoisted_6)) : (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(displayValue.value), 1))], 14, _hoisted_5));
+		};
+	}
+});
+//#endregion
+export { SBadge_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/SBanner/SBanner.vue.cjs

@@ -0,0 +1,6 @@
+const require_SBanner_vue_vue_type_script_setup_true_lang = require("./SBanner.vue_vue_type_script_setup_true_lang.cjs");
+;/* empty css                                                             */
+//#region src/components/SBanner/SBanner.vue
+var SBanner_default = require_SBanner_vue_vue_type_script_setup_true_lang.default;
+//#endregion
+exports.default = SBanner_default;

package/dist/components/SBanner/SBanner.vue.js

@@ -0,0 +1,6 @@
+import SBanner_vue_vue_type_script_setup_true_lang_default from "./SBanner.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                           */
+//#region src/components/SBanner/SBanner.vue
+var SBanner_default = SBanner_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SBanner_default as default };

package/dist/components/SBanner/SBanner.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,115 @@
+const require_SNotification_types = require("../SNotification/SNotification.types.cjs");
+const require_SNotification = require("../SNotification/SNotification.vue.cjs");
+let vue = require("vue");
+//#region src/components/SBanner/SBanner.vue?vue&type=script&setup=true&lang.ts
+var SBanner_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "SBanner",
+	props: {
+		type: { default: () => require_SNotification_types.ENotificationType.INFO_ACCENT },
+		layout: { default: () => require_SNotification_types.ENotificationLayout.HORIZONTAL },
+		leftside: { default: () => require_SNotification_types.ENotificationLeftside.ICON },
+		elevated: {
+			type: Boolean,
+			default: false
+		},
+		title: {},
+		description: {},
+		linkText: {},
+		linkIconRight: {},
+		primaryButtonText: {},
+		secondaryButtonText: {},
+		prominentPrimaryButton: {
+			type: Boolean,
+			default: false
+		},
+		showPrimaryButton: {
+			type: Boolean,
+			default: false
+		},
+		closable: {
+			type: Boolean,
+			default: true
+		},
+		closeAriaLabel: { default: "" },
+		icon: {},
+		avatar: {},
+		maxWidth: {},
+		truncateTitle: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"close",
+		"linkClick",
+		"primaryAction",
+		"secondaryAction"
+	],
+	setup(__props, { emit: __emit }) {
+		/**
+		* Статичный inline-баннер внутри контейнера с контентом.
+		* @displayName SBanner
+		*/
+		const emit = __emit;
+		const slots = (0, vue.useSlots)();
+		const bannerClasses = (0, vue.computed)(() => ({ "s-ui-banner--elevated": __props.elevated }));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(require_SNotification.default, {
+				class: (0, vue.normalizeClass)(["s-ui-banner", bannerClasses.value]),
+				"data-qa": "ui:banner",
+				type: __props.type,
+				layout: __props.layout,
+				leftside: __props.leftside,
+				surface: (0, vue.unref)(require_SNotification_types.ENotificationSurface).BANNER,
+				title: __props.title,
+				description: __props.description,
+				linkText: __props.linkText,
+				linkIconRight: __props.linkIconRight,
+				primaryButtonText: __props.primaryButtonText,
+				secondaryButtonText: __props.secondaryButtonText,
+				showPrimaryButton: __props.showPrimaryButton,
+				prominentPrimaryButton: __props.prominentPrimaryButton,
+				closable: __props.closable,
+				closeAriaLabel: __props.closeAriaLabel,
+				icon: __props.icon,
+				avatar: __props.avatar,
+				maxWidth: __props.maxWidth,
+				truncateTitle: __props.truncateTitle,
+				onClose: _cache[0] || (_cache[0] = ($event) => emit("close")),
+				onLinkClick: _cache[1] || (_cache[1] = ($event) => emit("linkClick")),
+				onPrimaryAction: _cache[2] || (_cache[2] = ($event) => emit("primaryAction")),
+				onSecondaryAction: _cache[3] || (_cache[3] = ($event) => emit("secondaryAction"))
+			}, (0, vue.createSlots)({ _: 2 }, [(0, vue.unref)(slots).title ? {
+				name: "title",
+				fn: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "title")]),
+				key: "0"
+			} : void 0, (0, vue.unref)(slots).description ? {
+				name: "description",
+				fn: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "description")]),
+				key: "1"
+			} : void 0]), 1032, [
+				"class",
+				"type",
+				"layout",
+				"leftside",
+				"surface",
+				"title",
+				"description",
+				"linkText",
+				"linkIconRight",
+				"primaryButtonText",
+				"secondaryButtonText",
+				"showPrimaryButton",
+				"prominentPrimaryButton",
+				"closable",
+				"closeAriaLabel",
+				"icon",
+				"avatar",
+				"maxWidth",
+				"truncateTitle"
+			]);
+		};
+	}
+});
+//#endregion
+exports.default = SBanner_vue_vue_type_script_setup_true_lang_default;

package/dist/components/SBanner/SBanner.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,115 @@
+import { ENotificationLayout, ENotificationLeftside, ENotificationSurface, ENotificationType } from "../SNotification/SNotification.types.js";
+import SNotification_default from "../SNotification/SNotification.vue.js";
+import { computed, createBlock, createSlots, defineComponent, normalizeClass, openBlock, renderSlot, unref, useSlots, withCtx } from "vue";
+//#region src/components/SBanner/SBanner.vue?vue&type=script&setup=true&lang.ts
+var SBanner_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SBanner",
+	props: {
+		type: { default: () => ENotificationType.INFO_ACCENT },
+		layout: { default: () => ENotificationLayout.HORIZONTAL },
+		leftside: { default: () => ENotificationLeftside.ICON },
+		elevated: {
+			type: Boolean,
+			default: false
+		},
+		title: {},
+		description: {},
+		linkText: {},
+		linkIconRight: {},
+		primaryButtonText: {},
+		secondaryButtonText: {},
+		prominentPrimaryButton: {
+			type: Boolean,
+			default: false
+		},
+		showPrimaryButton: {
+			type: Boolean,
+			default: false
+		},
+		closable: {
+			type: Boolean,
+			default: true
+		},
+		closeAriaLabel: { default: "" },
+		icon: {},
+		avatar: {},
+		maxWidth: {},
+		truncateTitle: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"close",
+		"linkClick",
+		"primaryAction",
+		"secondaryAction"
+	],
+	setup(__props, { emit: __emit }) {
+		/**
+		* Статичный inline-баннер внутри контейнера с контентом.
+		* @displayName SBanner
+		*/
+		const emit = __emit;
+		const slots = useSlots();
+		const bannerClasses = computed(() => ({ "s-ui-banner--elevated": __props.elevated }));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(SNotification_default, {
+				class: normalizeClass(["s-ui-banner", bannerClasses.value]),
+				"data-qa": "ui:banner",
+				type: __props.type,
+				layout: __props.layout,
+				leftside: __props.leftside,
+				surface: unref(ENotificationSurface).BANNER,
+				title: __props.title,
+				description: __props.description,
+				linkText: __props.linkText,
+				linkIconRight: __props.linkIconRight,
+				primaryButtonText: __props.primaryButtonText,
+				secondaryButtonText: __props.secondaryButtonText,
+				showPrimaryButton: __props.showPrimaryButton,
+				prominentPrimaryButton: __props.prominentPrimaryButton,
+				closable: __props.closable,
+				closeAriaLabel: __props.closeAriaLabel,
+				icon: __props.icon,
+				avatar: __props.avatar,
+				maxWidth: __props.maxWidth,
+				truncateTitle: __props.truncateTitle,
+				onClose: _cache[0] || (_cache[0] = ($event) => emit("close")),
+				onLinkClick: _cache[1] || (_cache[1] = ($event) => emit("linkClick")),
+				onPrimaryAction: _cache[2] || (_cache[2] = ($event) => emit("primaryAction")),
+				onSecondaryAction: _cache[3] || (_cache[3] = ($event) => emit("secondaryAction"))
+			}, createSlots({ _: 2 }, [unref(slots).title ? {
+				name: "title",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "title")]),
+				key: "0"
+			} : void 0, unref(slots).description ? {
+				name: "description",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "description")]),
+				key: "1"
+			} : void 0]), 1032, [
+				"class",
+				"type",
+				"layout",
+				"leftside",
+				"surface",
+				"title",
+				"description",
+				"linkText",
+				"linkIconRight",
+				"primaryButtonText",
+				"secondaryButtonText",
+				"showPrimaryButton",
+				"prominentPrimaryButton",
+				"closable",
+				"closeAriaLabel",
+				"icon",
+				"avatar",
+				"maxWidth",
+				"truncateTitle"
+			]);
+		};
+	}
+});
+//#endregion
+export { SBanner_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/SButton/SButton.types.cjs

@@ -0,0 +1,27 @@
+//#region src/components/SButton/SButton.types.ts
+var EButtonAppearance = /* @__PURE__ */ function(EButtonAppearance) {
+	EButtonAppearance["MAJOR"] = "major";
+	EButtonAppearance["MINOR"] = "minor";
+	EButtonAppearance["SURFACE"] = "surface";
+	EButtonAppearance["OUTLINED"] = "outlined";
+	EButtonAppearance["BARE"] = "bare";
+	return EButtonAppearance;
+}({});
+var EButtonVariant = /* @__PURE__ */ function(EButtonVariant) {
+	EButtonVariant["MAIN"] = "main";
+	EButtonVariant["NEUTRAL"] = "neutral";
+	EButtonVariant["DANGER"] = "danger";
+	EButtonVariant["SUCCESS"] = "success";
+	EButtonVariant["BILLING"] = "billing";
+	return EButtonVariant;
+}({});
+var EButtonSize = /* @__PURE__ */ function(EButtonSize) {
+	EButtonSize["SMALL"] = "small";
+	EButtonSize["MEDIUM"] = "medium";
+	EButtonSize["LARGE"] = "large";
+	return EButtonSize;
+}({});
+//#endregion
+exports.EButtonAppearance = EButtonAppearance;
+exports.EButtonSize = EButtonSize;
+exports.EButtonVariant = EButtonVariant;

package/dist/components/SButton/SButton.types.js

@@ -0,0 +1,25 @@
+//#region src/components/SButton/SButton.types.ts
+var EButtonAppearance = /* @__PURE__ */ function(EButtonAppearance) {
+	EButtonAppearance["MAJOR"] = "major";
+	EButtonAppearance["MINOR"] = "minor";
+	EButtonAppearance["SURFACE"] = "surface";
+	EButtonAppearance["OUTLINED"] = "outlined";
+	EButtonAppearance["BARE"] = "bare";
+	return EButtonAppearance;
+}({});
+var EButtonVariant = /* @__PURE__ */ function(EButtonVariant) {
+	EButtonVariant["MAIN"] = "main";
+	EButtonVariant["NEUTRAL"] = "neutral";
+	EButtonVariant["DANGER"] = "danger";
+	EButtonVariant["SUCCESS"] = "success";
+	EButtonVariant["BILLING"] = "billing";
+	return EButtonVariant;
+}({});
+var EButtonSize = /* @__PURE__ */ function(EButtonSize) {
+	EButtonSize["SMALL"] = "small";
+	EButtonSize["MEDIUM"] = "medium";
+	EButtonSize["LARGE"] = "large";
+	return EButtonSize;
+}({});
+//#endregion
+export { EButtonAppearance, EButtonSize, EButtonVariant };

package/dist/components/SButton/SButton.vue.cjs

@@ -0,0 +1,6 @@
+const require_SButton_vue_vue_type_script_setup_true_lang = require("./SButton.vue_vue_type_script_setup_true_lang.cjs");
+;/* empty css                                                             */
+//#region src/components/SButton/SButton.vue
+var SButton_default = require_SButton_vue_vue_type_script_setup_true_lang.default;
+//#endregion
+exports.default = SButton_default;

package/dist/components/SButton/SButton.vue.js

@@ -0,0 +1,6 @@
+import SButton_vue_vue_type_script_setup_true_lang_default from "./SButton.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                           */
+//#region src/components/SButton/SButton.vue
+var SButton_default = SButton_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SButton_default as default };

package/dist/components/SButton/SButton.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,250 @@
+const require_SBadge = require("../SBadge/SBadge.vue.cjs");
+const require_SButton_types = require("./SButton.types.cjs");
+const require_context = require("../SButtonGroup/utils/context.cjs");
+const require_useButtonBadge = require("./utils/useButtonBadge.cjs");
+const require_useSelectionGroup = require("../../composables/useSelectionGroup.cjs");
+const require_useSelectionGroupItem = require("../../composables/useSelectionGroupItem.cjs");
+const require_vueRouterLinkPresentation = require("../../utils/vueRouterLinkPresentation.cjs");
+const require_useLink = require("../../composables/useLink.cjs");
+const require_useSelectLink = require("../../composables/useSelectLink.cjs");
+let vue = require("vue");
+let _shtabapp_ui_kit_primitives = require("@shtabapp/ui-kit-primitives");
+//#region src/components/SButton/SButton.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-hidden"];
+var _hoisted_2 = {
+	key: 0,
+	class: "s-ui-button__spinner",
+	"aria-hidden": "true"
+};
+var SButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	inheritAttrs: false,
+	__name: "SButton",
+	props: {
+		active: {
+			type: Boolean,
+			default: () => void 0
+		},
+		appearance: {},
+		badgeColor: {},
+		badgeInset: {
+			type: Boolean,
+			default: false
+		},
+		counter: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		icon: {},
+		iconLeft: {},
+		iconRight: {},
+		indicator: {
+			type: Boolean,
+			default: false
+		},
+		fullWidth: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		size: {},
+		type: { default: "button" },
+		value: {},
+		variant: {},
+		link: {},
+		exact: {
+			type: Boolean,
+			default: false
+		},
+		replace: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		/**
+		* Кнопка действия: appearance, variant, size, иконки, загрузка и опциональный режим ссылки.
+		* @displayName SButton
+		*/
+		const group = (0, vue.inject)(require_context.sButtonGroupInjectionKey, null);
+		const attrs = (0, vue.useAttrs)();
+		const resolvedAppearance = (0, vue.computed)(() => require_useSelectionGroup.resolveOwnPropOrGroupedOrFallback(__props.appearance, group ? (0, vue.toValue)(group.appearance) : void 0, require_SButton_types.EButtonAppearance.MAJOR));
+		const resolvedVariant = (0, vue.computed)(() => require_useSelectionGroup.resolveOwnPropOrGroupedOrFallback(__props.variant, group ? (0, vue.toValue)(group.variant) : void 0, require_SButton_types.EButtonVariant.MAIN));
+		const resolvedSize = (0, vue.computed)(() => require_useSelectionGroup.resolveOwnPropOrGroupedOrFallback(__props.size, group ? (0, vue.toValue)(group.size) : void 0, require_SButton_types.EButtonSize.MEDIUM));
+		const resolvedDisabled = (0, vue.computed)(() => __props.disabled || Boolean(group && (0, vue.toValue)(group.disabled)));
+		const buttonRootRef = (0, vue.useTemplateRef)("buttonRootRef");
+		const { buttonBadgeProps } = require_useButtonBadge.useButtonBadge({
+			badgeColor: () => __props.badgeColor,
+			badgeInset: () => __props.badgeInset,
+			counter: () => __props.counter,
+			indicator: () => __props.indicator,
+			size: () => resolvedSize.value
+		});
+		const buttonLink = require_useLink.useLink(() => __props.link, () => __props.exact, () => __props.replace);
+		const linkPresentation = buttonLink.linkPresentation;
+		require_useSelectLink.useSelectLink({
+			isRouterLink: buttonLink.isRouterLink,
+			isActive: buttonLink.isActive,
+			group: () => group,
+			value: () => __props.value
+		});
+		const buttonHtMLTag = (0, vue.computed)(() => {
+			const presentation = linkPresentation.value;
+			if (presentation.mode === "none") return "button";
+			return presentation.rootTag;
+		});
+		const isNativeButtonTag = (0, vue.computed)(() => {
+			return buttonHtMLTag.value === "button";
+		});
+		const shouldDisableInteractive = (0, vue.computed)(() => {
+			return resolvedDisabled.value || __props.loading;
+		});
+		const groupItem = require_useSelectionGroupItem.useSelectionGroupItem({
+			group,
+			value: () => __props.value,
+			el: buttonRootRef,
+			disabled: resolvedDisabled,
+			interactive: () => !shouldDisableInteractive.value
+		});
+		const resolvedActive = (0, vue.computed)(() => {
+			if (__props.active !== void 0) return __props.active;
+			if (buttonLink.isRouterLink.value) return buttonLink.isActive.value;
+			return groupItem.isActive.value;
+		});
+		const classes = (0, vue.computed)(() => {
+			return [
+				"s-ui-button",
+				"s-ui-button--tab-focus",
+				`s-ui-button--appearance-${resolvedAppearance.value}`,
+				`s-ui-button--variant-${resolvedVariant.value}`,
+				`s-ui-button--size-${resolvedSize.value}`,
+				{
+					"s-ui-button--disabled": resolvedDisabled.value,
+					"s-ui-button--loading": __props.loading,
+					"s-ui-button--icon-only": __props.icon,
+					"s-ui-button--full-width": __props.fullWidth,
+					"s-ui-button--active": resolvedActive.value,
+					"s-ui-button--link": linkPresentation.value.mode !== "none"
+				}
+			];
+		});
+		const buttonAttributes = (0, vue.computed)(() => {
+			return {
+				type: isNativeButtonTag.value ? __props.type : void 0,
+				disabled: isNativeButtonTag.value ? shouldDisableInteractive.value : void 0,
+				"aria-busy": __props.loading ? true : void 0,
+				role: groupItem.ariaChecked.value ? "radio" : void 0,
+				"aria-pressed": groupItem.ariaPressed.value,
+				"aria-checked": groupItem.ariaChecked.value,
+				tabindex: groupItem.tabIndex.value,
+				...require_vueRouterLinkPresentation.getLinkRootBindings(linkPresentation.value, { replace: __props.replace })
+			};
+		});
+		const buttonRootBindings = (0, vue.computed)(() => {
+			return {
+				...buttonAttributes.value,
+				...attrs
+			};
+		});
+		const buttonLabelClassesBySize = {
+			[require_SButton_types.EButtonSize.SMALL]: "s-ui-typography-label-12-medium",
+			[require_SButton_types.EButtonSize.MEDIUM]: "s-ui-typography-label-14-medium",
+			[require_SButton_types.EButtonSize.LARGE]: "s-ui-typography-label-16-medium"
+		};
+		const labelClasses = (0, vue.computed)(() => {
+			return buttonLabelClassesBySize[resolvedSize.value];
+		});
+		const iconSizeBySize = {
+			[require_SButton_types.EButtonSize.SMALL]: 16,
+			[require_SButton_types.EButtonSize.MEDIUM]: 20,
+			[require_SButton_types.EButtonSize.LARGE]: 24
+		};
+		const iconSize = (0, vue.computed)(() => {
+			return iconSizeBySize[resolvedSize.value];
+		});
+		const useBillingIconGradient = (0, vue.computed)(() => {
+			if (resolvedDisabled.value || __props.loading) return false;
+			return resolvedVariant.value === require_SButton_types.EButtonVariant.BILLING && resolvedAppearance.value !== require_SButton_types.EButtonAppearance.MAJOR;
+		});
+		const useBillingSpinnerGradient = (0, vue.computed)(() => {
+			return resolvedVariant.value === require_SButton_types.EButtonVariant.BILLING && resolvedAppearance.value !== require_SButton_types.EButtonAppearance.MAJOR;
+		});
+		const handleRootKeyDown = (event) => {
+			if (shouldDisableInteractive.value) return;
+			if (buttonLink.isRouterLink.value && (event.key === "Enter" || event.key === " " || event.key === "Spacebar")) {
+				event.preventDefault();
+				buttonLink.navigate();
+				return;
+			}
+			groupItem.handleKeydown(event);
+		};
+		const handleRootClick = (event) => {
+			if (shouldDisableInteractive.value) {
+				event.preventDefault();
+				event.stopPropagation();
+				return;
+			}
+			if (buttonLink.isRouterLink.value) return;
+			groupItem.handleClick();
+		};
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(buttonHtMLTag.value), (0, vue.mergeProps)({
+				ref_key: "buttonRootRef",
+				ref: buttonRootRef,
+				class: classes.value
+			}, buttonRootBindings.value, {
+				onClick: handleRootClick,
+				onKeydown: handleRootKeyDown
+			}), {
+				default: (0, vue.withCtx)(() => [
+					(0, vue.createElementVNode)("span", {
+						class: "s-ui-button__inner",
+						"aria-hidden": __props.loading ? true : void 0
+					}, [__props.icon ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_shtabapp_ui_kit_primitives.SIcon), {
+						key: 0,
+						name: __props.icon,
+						size: iconSize.value,
+						billing: useBillingIconGradient.value
+					}, null, 8, [
+						"name",
+						"size",
+						"billing"
+					])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [
+						__props.iconLeft ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_shtabapp_ui_kit_primitives.SIcon), {
+							key: 0,
+							name: __props.iconLeft,
+							size: iconSize.value,
+							billing: useBillingIconGradient.value
+						}, null, 8, [
+							"name",
+							"size",
+							"billing"
+						])) : (0, vue.createCommentVNode)("", true),
+						(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(["s-ui-button__label", labelClasses.value]) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2),
+						__props.iconRight ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_shtabapp_ui_kit_primitives.SIcon), {
+							key: 1,
+							name: __props.iconRight,
+							size: iconSize.value,
+							billing: useBillingIconGradient.value
+						}, null, 8, [
+							"name",
+							"size",
+							"billing"
+						])) : (0, vue.createCommentVNode)("", true)
+					], 64))], 8, _hoisted_1),
+					__props.loading ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2, [(0, vue.createVNode)((0, vue.unref)(_shtabapp_ui_kit_primitives.SSpinner), {
+						billing: useBillingSpinnerGradient.value,
+						size: iconSize.value
+					}, null, 8, ["billing", "size"])])) : (0, vue.createCommentVNode)("", true),
+					(0, vue.unref)(buttonBadgeProps) ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SBadge.default), (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 1 }, (0, vue.unref)(buttonBadgeProps))), null, 16)) : (0, vue.createCommentVNode)("", true)
+				]),
+				_: 3
+			}, 16, ["class"]);
+		};
+	}
+});
+//#endregion
+exports.default = SButton_vue_vue_type_script_setup_true_lang_default;