@shtabapp/ui-kit 1.84.0 → 1.85.1

package/dist/components/SAvatar/utils/resolveAvatarColor.js

@@ -0,0 +1,20 @@
+import { isHexColor } from "../../../utils/color/contrastSurfaceTextColor.js";
+import { getAvatarInitialsTextColor } from "./getAvatarInitialsTextColor.js";
+//#region src/components/SAvatar/utils/resolveAvatarColor.ts
+var isAvatarHexColor = (color) => {
+	return isHexColor(color);
+};
+var getAvatarColorClass = (color) => {
+	if (isAvatarHexColor(color)) return "s-ui-avatar--color-custom";
+	return `s-ui-avatar--color-${color}`;
+};
+var getAvatarColorStyle = (color) => {
+	const initialsTextColor = getAvatarInitialsTextColor(color);
+	const style = {};
+	if (isAvatarHexColor(color)) style["--s-ui-avatar-background"] = color;
+	if (initialsTextColor) style["--s-ui-avatar-color"] = initialsTextColor;
+	if (Object.keys(style).length === 0) return;
+	return style;
+};
+//#endregion
+export { getAvatarColorClass, getAvatarColorStyle };

package/dist/components/SAvatar/utils/useAvatarBadge.cjs

@@ -0,0 +1,132 @@
+const require_SBadge_types = require("../../SBadge/SBadge.types.cjs");
+const require_SAvatar_types = require("../SAvatar.types.cjs");
+const require_SAvatar_constants = require("../constants/SAvatar.constants.cjs");
+let vue = require("vue");
+let _shtabapp_ui_kit_primitives = require("@shtabapp/ui-kit-primitives");
+//#region src/components/SAvatar/utils/useAvatarBadge.ts
+var badgeSizeByAvatarBadgeSize = {
+	[require_SAvatar_types.ESAvatarBadgeSize.SMALL]: require_SBadge_types.ESBadgeSize.SMALL,
+	[require_SAvatar_types.ESAvatarBadgeSize.MEDIUM]: require_SBadge_types.ESBadgeSize.MEDIUM,
+	[require_SAvatar_types.ESAvatarBadgeSize.LARGE]: require_SBadge_types.ESBadgeSize.LARGE
+};
+var badgeDotDimensionBySize = {
+	[require_SBadge_types.ESBadgeSize.SMALL]: 8,
+	[require_SBadge_types.ESBadgeSize.MEDIUM]: 10,
+	[require_SBadge_types.ESBadgeSize.LARGE]: 12
+};
+var badgeIconDimensionBySize = {
+	[require_SBadge_types.ESBadgeSize.SMALL]: 12,
+	[require_SBadge_types.ESBadgeSize.MEDIUM]: 16,
+	[require_SBadge_types.ESBadgeSize.LARGE]: 20
+};
+var avatarCounterDimension = 16;
+var avatarIconBadgeEdgeInsetByAvatarSize = {
+	[require_SAvatar_types.ESAvatarSize.SIZE_80]: 0,
+	[require_SAvatar_types.ESAvatarSize.SIZE_72]: 0,
+	[require_SAvatar_types.ESAvatarSize.SIZE_64]: 0,
+	[require_SAvatar_types.ESAvatarSize.SIZE_56]: 0,
+	[require_SAvatar_types.ESAvatarSize.SIZE_48]: 0,
+	[require_SAvatar_types.ESAvatarSize.SIZE_40]: 0,
+	[require_SAvatar_types.ESAvatarSize.SIZE_32]: -2,
+	[require_SAvatar_types.ESAvatarSize.SIZE_24]: -2,
+	[require_SAvatar_types.ESAvatarSize.SIZE_20]: -4,
+	[require_SAvatar_types.ESAvatarSize.SIZE_16]: -4
+};
+var avatarCounterEdgeInsetByAvatarSize = {
+	[require_SAvatar_types.ESAvatarSize.SIZE_80]: -8,
+	[require_SAvatar_types.ESAvatarSize.SIZE_72]: -8,
+	[require_SAvatar_types.ESAvatarSize.SIZE_64]: -8,
+	[require_SAvatar_types.ESAvatarSize.SIZE_56]: -8,
+	[require_SAvatar_types.ESAvatarSize.SIZE_48]: -8,
+	[require_SAvatar_types.ESAvatarSize.SIZE_40]: -8,
+	[require_SAvatar_types.ESAvatarSize.SIZE_32]: -8,
+	[require_SAvatar_types.ESAvatarSize.SIZE_24]: -8,
+	[require_SAvatar_types.ESAvatarSize.SIZE_20]: -10,
+	[require_SAvatar_types.ESAvatarSize.SIZE_16]: -10
+};
+var avatarBadgeColorByBadge = {
+	[require_SAvatar_types.ESAvatarBadge.DEFAULT]: require_SBadge_types.ESBadgeColor.MAIN,
+	[require_SAvatar_types.ESAvatarBadge.ONLINE]: require_SBadge_types.ESBadgeColor.SUCCESS,
+	[require_SAvatar_types.ESAvatarBadge.OFFLINE]: require_SBadge_types.ESBadgeColor.WHITE,
+	[require_SAvatar_types.ESAvatarBadge.RECENTLY]: require_SBadge_types.ESBadgeColor.WARNING,
+	[require_SAvatar_types.ESAvatarBadge.ERROR]: require_SBadge_types.ESBadgeColor.DANGER,
+	[require_SAvatar_types.ESAvatarBadge.TRACK]: require_SBadge_types.ESBadgeColor.MAIN,
+	[require_SAvatar_types.ESAvatarBadge.DONE]: require_SBadge_types.ESBadgeColor.SUCCESS,
+	[require_SAvatar_types.ESAvatarBadge.CONTROLLER]: require_SBadge_types.ESBadgeColor.MAIN,
+	[require_SAvatar_types.ESAvatarBadge.FAVORITE]: require_SBadge_types.ESBadgeColor.WARNING,
+	[require_SAvatar_types.ESAvatarBadge.PIN]: require_SBadge_types.ESBadgeColor.MAIN,
+	[require_SAvatar_types.ESAvatarBadge.PRIVATE]: require_SBadge_types.ESBadgeColor.BILLING
+};
+var avatarBadgeIconByBadge = {
+	[require_SAvatar_types.ESAvatarBadge.TRACK]: _shtabapp_ui_kit_primitives.ESIconName.playFill,
+	[require_SAvatar_types.ESAvatarBadge.DONE]: _shtabapp_ui_kit_primitives.ESIconName.checkBold,
+	[require_SAvatar_types.ESAvatarBadge.CONTROLLER]: _shtabapp_ui_kit_primitives.ESIconName.controlFill,
+	[require_SAvatar_types.ESAvatarBadge.FAVORITE]: _shtabapp_ui_kit_primitives.ESIconName.starFill,
+	[require_SAvatar_types.ESAvatarBadge.PIN]: _shtabapp_ui_kit_primitives.ESIconName.pinFill,
+	[require_SAvatar_types.ESAvatarBadge.PRIVATE]: _shtabapp_ui_kit_primitives.ESIconName.tabooBold
+};
+var getAvatarBadgeEdgeInset = ({ avatarSize, badgeSize, hasIcon }) => {
+	const iconBadgeEdgeInset = avatarIconBadgeEdgeInsetByAvatarSize[avatarSize];
+	if (hasIcon) return iconBadgeEdgeInset;
+	return iconBadgeEdgeInset + (badgeIconDimensionBySize[badgeSize] - badgeDotDimensionBySize[badgeSize]) / 2;
+};
+var getBottomEndBadgeAnchorOffset = (badgeEdgeInset, badgeDimension) => {
+	return {
+		offsetX: -badgeEdgeInset - badgeDimension / 2,
+		offsetY: -badgeEdgeInset - badgeDimension / 2
+	};
+};
+var getTopEndBadgeAnchorOffset = (badgeEdgeInset, badgeDimension) => {
+	return {
+		offsetX: -badgeEdgeInset - badgeDimension / 2,
+		offsetY: badgeEdgeInset + badgeDimension / 2
+	};
+};
+var useAvatarBadge = ({ badge, counter, size }) => {
+	const avatarBadgeProps = (0, vue.computed)(() => {
+		const avatarBadge = (0, vue.toValue)(badge);
+		if (!avatarBadge) return;
+		const avatarSize = (0, vue.toValue)(size);
+		const badgeIcon = avatarBadgeIconByBadge[avatarBadge];
+		const badgeSize = badgeSizeByAvatarBadgeSize[require_SAvatar_constants.avatarBadgeSizeByAvatarSize[avatarSize]];
+		const badgeDimension = badgeIcon ? badgeIconDimensionBySize[badgeSize] : badgeDotDimensionBySize[badgeSize];
+		const badgeAnchorOffset = getBottomEndBadgeAnchorOffset(getAvatarBadgeEdgeInset({
+			avatarSize,
+			badgeSize,
+			hasIcon: Boolean(badgeIcon)
+		}), badgeDimension);
+		return {
+			anchored: true,
+			color: avatarBadgeColorByBadge[avatarBadge],
+			icon: badgeIcon,
+			label: avatarBadge,
+			offsetX: badgeAnchorOffset.offsetX,
+			offsetY: badgeAnchorOffset.offsetY,
+			placement: require_SBadge_types.ESBadgePlacement.BOTTOM_END,
+			size: badgeSize
+		};
+	});
+	const avatarCounterProps = (0, vue.computed)(() => {
+		const counterValue = (0, vue.toValue)(counter);
+		if (typeof counterValue !== "number") return;
+		const counterEdgeInset = avatarCounterEdgeInsetByAvatarSize[(0, vue.toValue)(size)];
+		const counterAnchorOffset = getTopEndBadgeAnchorOffset(counterEdgeInset, avatarCounterDimension);
+		return {
+			anchored: true,
+			color: require_SBadge_types.ESBadgeColor.MAIN,
+			offsetX: counterAnchorOffset.offsetX,
+			offsetY: counterAnchorOffset.offsetY,
+			placement: require_SBadge_types.ESBadgePlacement.TOP_END,
+			size: require_SBadge_types.ESBadgeSize.MEDIUM,
+			value: counterValue
+		};
+	});
+	return { avatarBadgeItemsProps: (0, vue.computed)(() => {
+		const badgeItemsProps = [];
+		if (avatarCounterProps.value) badgeItemsProps.push(avatarCounterProps.value);
+		if (avatarBadgeProps.value) badgeItemsProps.push(avatarBadgeProps.value);
+		return badgeItemsProps;
+	}) };
+};
+//#endregion
+exports.useAvatarBadge = useAvatarBadge;

package/dist/components/SAvatar/utils/useAvatarBadge.js

@@ -0,0 +1,132 @@
+import { ESBadgeColor, ESBadgePlacement, ESBadgeSize } from "../../SBadge/SBadge.types.js";
+import { ESAvatarBadge, ESAvatarBadgeSize, ESAvatarSize } from "../SAvatar.types.js";
+import { avatarBadgeSizeByAvatarSize } from "../constants/SAvatar.constants.js";
+import { computed, toValue } from "vue";
+import { ESIconName } from "@shtabapp/ui-kit-primitives";
+//#region src/components/SAvatar/utils/useAvatarBadge.ts
+var badgeSizeByAvatarBadgeSize = {
+	[ESAvatarBadgeSize.SMALL]: ESBadgeSize.SMALL,
+	[ESAvatarBadgeSize.MEDIUM]: ESBadgeSize.MEDIUM,
+	[ESAvatarBadgeSize.LARGE]: ESBadgeSize.LARGE
+};
+var badgeDotDimensionBySize = {
+	[ESBadgeSize.SMALL]: 8,
+	[ESBadgeSize.MEDIUM]: 10,
+	[ESBadgeSize.LARGE]: 12
+};
+var badgeIconDimensionBySize = {
+	[ESBadgeSize.SMALL]: 12,
+	[ESBadgeSize.MEDIUM]: 16,
+	[ESBadgeSize.LARGE]: 20
+};
+var avatarCounterDimension = 16;
+var avatarIconBadgeEdgeInsetByAvatarSize = {
+	[ESAvatarSize.SIZE_80]: 0,
+	[ESAvatarSize.SIZE_72]: 0,
+	[ESAvatarSize.SIZE_64]: 0,
+	[ESAvatarSize.SIZE_56]: 0,
+	[ESAvatarSize.SIZE_48]: 0,
+	[ESAvatarSize.SIZE_40]: 0,
+	[ESAvatarSize.SIZE_32]: -2,
+	[ESAvatarSize.SIZE_24]: -2,
+	[ESAvatarSize.SIZE_20]: -4,
+	[ESAvatarSize.SIZE_16]: -4
+};
+var avatarCounterEdgeInsetByAvatarSize = {
+	[ESAvatarSize.SIZE_80]: -8,
+	[ESAvatarSize.SIZE_72]: -8,
+	[ESAvatarSize.SIZE_64]: -8,
+	[ESAvatarSize.SIZE_56]: -8,
+	[ESAvatarSize.SIZE_48]: -8,
+	[ESAvatarSize.SIZE_40]: -8,
+	[ESAvatarSize.SIZE_32]: -8,
+	[ESAvatarSize.SIZE_24]: -8,
+	[ESAvatarSize.SIZE_20]: -10,
+	[ESAvatarSize.SIZE_16]: -10
+};
+var avatarBadgeColorByBadge = {
+	[ESAvatarBadge.DEFAULT]: ESBadgeColor.MAIN,
+	[ESAvatarBadge.ONLINE]: ESBadgeColor.SUCCESS,
+	[ESAvatarBadge.OFFLINE]: ESBadgeColor.WHITE,
+	[ESAvatarBadge.RECENTLY]: ESBadgeColor.WARNING,
+	[ESAvatarBadge.ERROR]: ESBadgeColor.DANGER,
+	[ESAvatarBadge.TRACK]: ESBadgeColor.MAIN,
+	[ESAvatarBadge.DONE]: ESBadgeColor.SUCCESS,
+	[ESAvatarBadge.CONTROLLER]: ESBadgeColor.MAIN,
+	[ESAvatarBadge.FAVORITE]: ESBadgeColor.WARNING,
+	[ESAvatarBadge.PIN]: ESBadgeColor.MAIN,
+	[ESAvatarBadge.PRIVATE]: ESBadgeColor.BILLING
+};
+var avatarBadgeIconByBadge = {
+	[ESAvatarBadge.TRACK]: ESIconName.playFill,
+	[ESAvatarBadge.DONE]: ESIconName.checkBold,
+	[ESAvatarBadge.CONTROLLER]: ESIconName.controlFill,
+	[ESAvatarBadge.FAVORITE]: ESIconName.starFill,
+	[ESAvatarBadge.PIN]: ESIconName.pinFill,
+	[ESAvatarBadge.PRIVATE]: ESIconName.tabooBold
+};
+var getAvatarBadgeEdgeInset = ({ avatarSize, badgeSize, hasIcon }) => {
+	const iconBadgeEdgeInset = avatarIconBadgeEdgeInsetByAvatarSize[avatarSize];
+	if (hasIcon) return iconBadgeEdgeInset;
+	return iconBadgeEdgeInset + (badgeIconDimensionBySize[badgeSize] - badgeDotDimensionBySize[badgeSize]) / 2;
+};
+var getBottomEndBadgeAnchorOffset = (badgeEdgeInset, badgeDimension) => {
+	return {
+		offsetX: -badgeEdgeInset - badgeDimension / 2,
+		offsetY: -badgeEdgeInset - badgeDimension / 2
+	};
+};
+var getTopEndBadgeAnchorOffset = (badgeEdgeInset, badgeDimension) => {
+	return {
+		offsetX: -badgeEdgeInset - badgeDimension / 2,
+		offsetY: badgeEdgeInset + badgeDimension / 2
+	};
+};
+var useAvatarBadge = ({ badge, counter, size }) => {
+	const avatarBadgeProps = computed(() => {
+		const avatarBadge = toValue(badge);
+		if (!avatarBadge) return;
+		const avatarSize = toValue(size);
+		const badgeIcon = avatarBadgeIconByBadge[avatarBadge];
+		const badgeSize = badgeSizeByAvatarBadgeSize[avatarBadgeSizeByAvatarSize[avatarSize]];
+		const badgeDimension = badgeIcon ? badgeIconDimensionBySize[badgeSize] : badgeDotDimensionBySize[badgeSize];
+		const badgeAnchorOffset = getBottomEndBadgeAnchorOffset(getAvatarBadgeEdgeInset({
+			avatarSize,
+			badgeSize,
+			hasIcon: Boolean(badgeIcon)
+		}), badgeDimension);
+		return {
+			anchored: true,
+			color: avatarBadgeColorByBadge[avatarBadge],
+			icon: badgeIcon,
+			label: avatarBadge,
+			offsetX: badgeAnchorOffset.offsetX,
+			offsetY: badgeAnchorOffset.offsetY,
+			placement: ESBadgePlacement.BOTTOM_END,
+			size: badgeSize
+		};
+	});
+	const avatarCounterProps = computed(() => {
+		const counterValue = toValue(counter);
+		if (typeof counterValue !== "number") return;
+		const counterEdgeInset = avatarCounterEdgeInsetByAvatarSize[toValue(size)];
+		const counterAnchorOffset = getTopEndBadgeAnchorOffset(counterEdgeInset, avatarCounterDimension);
+		return {
+			anchored: true,
+			color: ESBadgeColor.MAIN,
+			offsetX: counterAnchorOffset.offsetX,
+			offsetY: counterAnchorOffset.offsetY,
+			placement: ESBadgePlacement.TOP_END,
+			size: ESBadgeSize.MEDIUM,
+			value: counterValue
+		};
+	});
+	return { avatarBadgeItemsProps: computed(() => {
+		const badgeItemsProps = [];
+		if (avatarCounterProps.value) badgeItemsProps.push(avatarCounterProps.value);
+		if (avatarBadgeProps.value) badgeItemsProps.push(avatarBadgeProps.value);
+		return badgeItemsProps;
+	}) };
+};
+//#endregion
+export { useAvatarBadge };

package/dist/components/SAvatarGroup/SAvatarGroup.types.cjs

@@ -0,0 +1,9 @@
+//#region src/components/SAvatarGroup/SAvatarGroup.types.ts
+var ESAvatarGroupSize = /* @__PURE__ */ function(ESAvatarGroupSize) {
+	ESAvatarGroupSize["EXTRA_SMALL"] = "extra-small";
+	ESAvatarGroupSize["SMALL"] = "small";
+	ESAvatarGroupSize["MEDIUM"] = "medium";
+	return ESAvatarGroupSize;
+}({});
+//#endregion
+exports.ESAvatarGroupSize = ESAvatarGroupSize;

package/dist/components/SAvatarGroup/SAvatarGroup.types.js

@@ -0,0 +1,9 @@
+//#region src/components/SAvatarGroup/SAvatarGroup.types.ts
+var ESAvatarGroupSize = /* @__PURE__ */ function(ESAvatarGroupSize) {
+	ESAvatarGroupSize["EXTRA_SMALL"] = "extra-small";
+	ESAvatarGroupSize["SMALL"] = "small";
+	ESAvatarGroupSize["MEDIUM"] = "medium";
+	return ESAvatarGroupSize;
+}({});
+//#endregion
+export { ESAvatarGroupSize };

package/dist/components/SAvatarGroup/SAvatarGroup.vue.cjs

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

package/dist/components/SAvatarGroup/SAvatarGroup.vue.js

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

package/dist/components/SAvatarGroup/SAvatarGroup.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,63 @@
+const require_SAvatar_types = require("../SAvatar/SAvatar.types.cjs");
+const require_SAvatar = require("../SAvatar/SAvatar.vue.cjs");
+const require_SOverflowGroup = require("../SOverflowGroup/SOverflowGroup.vue.cjs");
+const require_SAvatarGroup_types = require("./SAvatarGroup.types.cjs");
+let vue = require("vue");
+//#region src/components/SAvatarGroup/SAvatarGroup.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "s-ui-avatar-group__overflow" };
+var SAvatarGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "SAvatarGroup",
+	props: {
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		maxVisible: {},
+		size: { default: () => require_SAvatarGroup_types.ESAvatarGroupSize.SMALL }
+	},
+	setup(__props) {
+		const rootClasses = (0, vue.computed)(() => {
+			return [`s-ui-avatar-group--size-${__props.size}`, { "s-ui-avatar-group--disabled": __props.disabled }];
+		});
+		const avatarSizeByGroupSize = {
+			[require_SAvatarGroup_types.ESAvatarGroupSize.EXTRA_SMALL]: require_SAvatar_types.ESAvatarSize.SIZE_16,
+			[require_SAvatarGroup_types.ESAvatarGroupSize.SMALL]: require_SAvatar_types.ESAvatarSize.SIZE_20,
+			[require_SAvatarGroup_types.ESAvatarGroupSize.MEDIUM]: require_SAvatar_types.ESAvatarSize.SIZE_24
+		};
+		const avatarSize = (0, vue.computed)(() => {
+			return avatarSizeByGroupSize[__props.size];
+		});
+		const getAvatarStackStyle = (visibleItemCount, avatarIndex) => {
+			return { "--s-ui-avatar-group-item-z-index": visibleItemCount - avatarIndex };
+		};
+		const mapAvatarGroupVnode = (vnode, context) => {
+			if (vnode.type !== require_SAvatar.default) return vnode;
+			return (0, vue.cloneVNode)(vnode, {
+				...__props.disabled ? { disabled: true } : {},
+				showName: false,
+				size: avatarSize.value,
+				style: getAvatarStackStyle(context.visibleCount, context.visibleIndex)
+			});
+		};
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(require_SOverflowGroup.default, {
+				class: (0, vue.normalizeClass)(["s-ui-avatar-group", rootClasses.value]),
+				role: "group",
+				"aria-disabled": __props.disabled || void 0,
+				"cluster-class": "s-ui-avatar-group__cluster",
+				"max-visible": __props.maxVisible,
+				"map-vnode": mapAvatarGroupVnode
+			}, {
+				overflow: (0, vue.withCtx)(({ overflowLabel }) => [(0, vue.createElementVNode)("span", _hoisted_1, (0, vue.toDisplayString)(overflowLabel), 1)]),
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"class",
+				"aria-disabled",
+				"max-visible"
+			]);
+		};
+	}
+});
+//#endregion
+exports.default = SAvatarGroup_vue_vue_type_script_setup_true_lang_default;

package/dist/components/SAvatarGroup/SAvatarGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,63 @@
+import { ESAvatarSize } from "../SAvatar/SAvatar.types.js";
+import SAvatar_default from "../SAvatar/SAvatar.vue.js";
+import SOverflowGroup_default from "../SOverflowGroup/SOverflowGroup.vue.js";
+import { ESAvatarGroupSize } from "./SAvatarGroup.types.js";
+import { cloneVNode, computed, createBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, withCtx } from "vue";
+//#region src/components/SAvatarGroup/SAvatarGroup.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "s-ui-avatar-group__overflow" };
+var SAvatarGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SAvatarGroup",
+	props: {
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		maxVisible: {},
+		size: { default: () => ESAvatarGroupSize.SMALL }
+	},
+	setup(__props) {
+		const rootClasses = computed(() => {
+			return [`s-ui-avatar-group--size-${__props.size}`, { "s-ui-avatar-group--disabled": __props.disabled }];
+		});
+		const avatarSizeByGroupSize = {
+			[ESAvatarGroupSize.EXTRA_SMALL]: ESAvatarSize.SIZE_16,
+			[ESAvatarGroupSize.SMALL]: ESAvatarSize.SIZE_20,
+			[ESAvatarGroupSize.MEDIUM]: ESAvatarSize.SIZE_24
+		};
+		const avatarSize = computed(() => {
+			return avatarSizeByGroupSize[__props.size];
+		});
+		const getAvatarStackStyle = (visibleItemCount, avatarIndex) => {
+			return { "--s-ui-avatar-group-item-z-index": visibleItemCount - avatarIndex };
+		};
+		const mapAvatarGroupVnode = (vnode, context) => {
+			if (vnode.type !== SAvatar_default) return vnode;
+			return cloneVNode(vnode, {
+				...__props.disabled ? { disabled: true } : {},
+				showName: false,
+				size: avatarSize.value,
+				style: getAvatarStackStyle(context.visibleCount, context.visibleIndex)
+			});
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(SOverflowGroup_default, {
+				class: normalizeClass(["s-ui-avatar-group", rootClasses.value]),
+				role: "group",
+				"aria-disabled": __props.disabled || void 0,
+				"cluster-class": "s-ui-avatar-group__cluster",
+				"max-visible": __props.maxVisible,
+				"map-vnode": mapAvatarGroupVnode
+			}, {
+				overflow: withCtx(({ overflowLabel }) => [createElementVNode("span", _hoisted_1, toDisplayString(overflowLabel), 1)]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"class",
+				"aria-disabled",
+				"max-visible"
+			]);
+		};
+	}
+});
+//#endregion
+export { SAvatarGroup_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/SBadge/SBadge.types.cjs

@@ -0,0 +1,29 @@
+//#region src/components/SBadge/SBadge.types.ts
+var ESBadgeColor = /* @__PURE__ */ function(ESBadgeColor) {
+	ESBadgeColor["DANGER"] = "danger";
+	ESBadgeColor["MAIN"] = "main";
+	ESBadgeColor["SUCCESS"] = "success";
+	ESBadgeColor["WARNING"] = "warning";
+	ESBadgeColor["GRAY"] = "gray";
+	ESBadgeColor["WHITE"] = "white";
+	ESBadgeColor["BILLING"] = "billing";
+	ESBadgeColor["DISABLED"] = "disabled";
+	return ESBadgeColor;
+}({});
+var ESBadgeSize = /* @__PURE__ */ function(ESBadgeSize) {
+	ESBadgeSize["SMALL"] = "s";
+	ESBadgeSize["MEDIUM"] = "m";
+	ESBadgeSize["LARGE"] = "l";
+	return ESBadgeSize;
+}({});
+var ESBadgePlacement = /* @__PURE__ */ function(ESBadgePlacement) {
+	ESBadgePlacement["TOP_END"] = "top-end";
+	ESBadgePlacement["TOP_START"] = "top-start";
+	ESBadgePlacement["BOTTOM_END"] = "bottom-end";
+	ESBadgePlacement["BOTTOM_START"] = "bottom-start";
+	return ESBadgePlacement;
+}({});
+//#endregion
+exports.ESBadgeColor = ESBadgeColor;
+exports.ESBadgePlacement = ESBadgePlacement;
+exports.ESBadgeSize = ESBadgeSize;

package/dist/components/SBadge/SBadge.types.js

@@ -0,0 +1,27 @@
+//#region src/components/SBadge/SBadge.types.ts
+var ESBadgeColor = /* @__PURE__ */ function(ESBadgeColor) {
+	ESBadgeColor["DANGER"] = "danger";
+	ESBadgeColor["MAIN"] = "main";
+	ESBadgeColor["SUCCESS"] = "success";
+	ESBadgeColor["WARNING"] = "warning";
+	ESBadgeColor["GRAY"] = "gray";
+	ESBadgeColor["WHITE"] = "white";
+	ESBadgeColor["BILLING"] = "billing";
+	ESBadgeColor["DISABLED"] = "disabled";
+	return ESBadgeColor;
+}({});
+var ESBadgeSize = /* @__PURE__ */ function(ESBadgeSize) {
+	ESBadgeSize["SMALL"] = "s";
+	ESBadgeSize["MEDIUM"] = "m";
+	ESBadgeSize["LARGE"] = "l";
+	return ESBadgeSize;
+}({});
+var ESBadgePlacement = /* @__PURE__ */ function(ESBadgePlacement) {
+	ESBadgePlacement["TOP_END"] = "top-end";
+	ESBadgePlacement["TOP_START"] = "top-start";
+	ESBadgePlacement["BOTTOM_END"] = "bottom-end";
+	ESBadgePlacement["BOTTOM_START"] = "bottom-start";
+	return ESBadgePlacement;
+}({});
+//#endregion
+export { ESBadgeColor, ESBadgePlacement, ESBadgeSize };

package/dist/components/SBadge/SBadge.vue.cjs

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

package/dist/components/SBadge/SBadge.vue.js

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

package/dist/components/SBadge/SBadge.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,120 @@
+const require_SBadge_types = require("./SBadge.types.cjs");
+let vue = require("vue");
+let _shtabapp_ui_kit_primitives = require("@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__*/ (0, vue.defineComponent)({
+	__name: "SBadge",
+	props: {
+		anchored: {
+			type: Boolean,
+			default: false
+		},
+		color: { default: () => require_SBadge_types.ESBadgeColor.DANGER },
+		value: {},
+		max: {},
+		label: {},
+		icon: {},
+		size: { default: () => require_SBadge_types.ESBadgeSize.SMALL },
+		placement: { default: () => require_SBadge_types.ESBadgePlacement.TOP_END },
+		offsetX: { default: 0 },
+		offsetY: { default: 0 }
+	},
+	setup(__props) {
+		const slots = (0, vue.useSlots)();
+		const isAnchored = (0, vue.computed)(() => {
+			return Boolean(slots.default || __props.anchored);
+		});
+		const hasCounterValue = (0, vue.computed)(() => {
+			return typeof __props.value === "number";
+		});
+		const displayValue = (0, vue.computed)(() => {
+			if (typeof __props.value !== "number") return "";
+			if (__props.max && __props.value > __props.max) return `${__props.max}+`;
+			return String(__props.value);
+		});
+		const isSingleCharacter = (0, vue.computed)(() => {
+			return displayValue.value.length === 1;
+		});
+		const isIconBadge = (0, vue.computed)(() => {
+			return Boolean(__props.icon);
+		});
+		const isDotBadge = (0, vue.computed)(() => {
+			return !isIconBadge.value && !hasCounterValue.value;
+		});
+		const badgeClasses = (0, vue.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 !== require_SBadge_types.ESBadgeSize.SMALL || isIconBadge.value || isDotBadge.value,
+				[`s-ui-badge--placement-${__props.placement}`]: isAnchored.value
+			}];
+		});
+		const badgeOffsetStyle = (0, vue.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 = (0, vue.computed)(() => {
+			if (__props.label) return __props.label;
+			if (__props.icon) return __props.icon;
+			if (displayValue.value) return displayValue.value;
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(slots).default ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1, [(0, vue.renderSlot)(_ctx.$slots, "default"), (0, vue.createElementVNode)("span", {
+				class: (0, vue.normalizeClass)(["s-ui-badge", badgeClasses.value]),
+				style: (0, vue.normalizeStyle)(badgeOffsetStyle.value),
+				role: accessibleLabel.value ? "img" : void 0,
+				"aria-label": accessibleLabel.value
+			}, [__props.icon ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_shtabapp_ui_kit_primitives.SIcon), {
+				key: 0,
+				class: "s-ui-badge__icon",
+				name: __props.icon,
+				size: badgeIconSize
+			}, null, 8, ["name"])) : isDotBadge.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_4, (0, vue.toDisplayString)(displayValue.value), 1))], 14, _hoisted_2)])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+				key: 1,
+				class: (0, vue.normalizeClass)(["s-ui-badge", badgeClasses.value]),
+				style: (0, vue.normalizeStyle)(badgeOffsetStyle.value),
+				role: accessibleLabel.value ? "img" : void 0,
+				"aria-label": accessibleLabel.value
+			}, [__props.icon ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_shtabapp_ui_kit_primitives.SIcon), {
+				key: 0,
+				class: "s-ui-badge__icon",
+				name: __props.icon,
+				size: badgeIconSize
+			}, null, 8, ["name"])) : isDotBadge.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_6)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_7, (0, vue.toDisplayString)(displayValue.value), 1))], 14, _hoisted_5));
+		};
+	}
+});
+//#endregion
+exports.default = SBadge_vue_vue_type_script_setup_true_lang_default;