@shtabapp/ui-kit 1.85.0 → 1.85.1

package/dist/components/SButton/SButton.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,250 @@
+import SBadge_default from "../SBadge/SBadge.vue.js";
+import { EButtonAppearance, EButtonSize, EButtonVariant } from "./SButton.types.js";
+import { sButtonGroupInjectionKey } from "../SButtonGroup/utils/context.js";
+import { useButtonBadge } from "./utils/useButtonBadge.js";
+import { resolveOwnPropOrGroupedOrFallback } from "../../composables/useSelectionGroup.js";
+import { useSelectionGroupItem } from "../../composables/useSelectionGroupItem.js";
+import { getLinkRootBindings } from "../../utils/vueRouterLinkPresentation.js";
+import { useLink } from "../../composables/useLink.js";
+import { useSelectLink } from "../../composables/useSelectLink.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, mergeProps, normalizeClass, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, toValue, unref, useAttrs, useTemplateRef, withCtx } from "vue";
+import { SIcon, SSpinner } from "@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__*/ 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 = inject(sButtonGroupInjectionKey, null);
+		const attrs = useAttrs();
+		const resolvedAppearance = computed(() => resolveOwnPropOrGroupedOrFallback(__props.appearance, group ? toValue(group.appearance) : void 0, EButtonAppearance.MAJOR));
+		const resolvedVariant = computed(() => resolveOwnPropOrGroupedOrFallback(__props.variant, group ? toValue(group.variant) : void 0, EButtonVariant.MAIN));
+		const resolvedSize = computed(() => resolveOwnPropOrGroupedOrFallback(__props.size, group ? toValue(group.size) : void 0, EButtonSize.MEDIUM));
+		const resolvedDisabled = computed(() => __props.disabled || Boolean(group && toValue(group.disabled)));
+		const buttonRootRef = useTemplateRef("buttonRootRef");
+		const { buttonBadgeProps } = useButtonBadge({
+			badgeColor: () => __props.badgeColor,
+			badgeInset: () => __props.badgeInset,
+			counter: () => __props.counter,
+			indicator: () => __props.indicator,
+			size: () => resolvedSize.value
+		});
+		const buttonLink = useLink(() => __props.link, () => __props.exact, () => __props.replace);
+		const linkPresentation = buttonLink.linkPresentation;
+		useSelectLink({
+			isRouterLink: buttonLink.isRouterLink,
+			isActive: buttonLink.isActive,
+			group: () => group,
+			value: () => __props.value
+		});
+		const buttonHtMLTag = computed(() => {
+			const presentation = linkPresentation.value;
+			if (presentation.mode === "none") return "button";
+			return presentation.rootTag;
+		});
+		const isNativeButtonTag = computed(() => {
+			return buttonHtMLTag.value === "button";
+		});
+		const shouldDisableInteractive = computed(() => {
+			return resolvedDisabled.value || __props.loading;
+		});
+		const groupItem = useSelectionGroupItem({
+			group,
+			value: () => __props.value,
+			el: buttonRootRef,
+			disabled: resolvedDisabled,
+			interactive: () => !shouldDisableInteractive.value
+		});
+		const resolvedActive = computed(() => {
+			if (__props.active !== void 0) return __props.active;
+			if (buttonLink.isRouterLink.value) return buttonLink.isActive.value;
+			return groupItem.isActive.value;
+		});
+		const classes = 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 = 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,
+				...getLinkRootBindings(linkPresentation.value, { replace: __props.replace })
+			};
+		});
+		const buttonRootBindings = computed(() => {
+			return {
+				...buttonAttributes.value,
+				...attrs
+			};
+		});
+		const buttonLabelClassesBySize = {
+			[EButtonSize.SMALL]: "s-ui-typography-label-12-medium",
+			[EButtonSize.MEDIUM]: "s-ui-typography-label-14-medium",
+			[EButtonSize.LARGE]: "s-ui-typography-label-16-medium"
+		};
+		const labelClasses = computed(() => {
+			return buttonLabelClassesBySize[resolvedSize.value];
+		});
+		const iconSizeBySize = {
+			[EButtonSize.SMALL]: 16,
+			[EButtonSize.MEDIUM]: 20,
+			[EButtonSize.LARGE]: 24
+		};
+		const iconSize = computed(() => {
+			return iconSizeBySize[resolvedSize.value];
+		});
+		const useBillingIconGradient = computed(() => {
+			if (resolvedDisabled.value || __props.loading) return false;
+			return resolvedVariant.value === EButtonVariant.BILLING && resolvedAppearance.value !== EButtonAppearance.MAJOR;
+		});
+		const useBillingSpinnerGradient = computed(() => {
+			return resolvedVariant.value === EButtonVariant.BILLING && resolvedAppearance.value !== 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 openBlock(), createBlock(resolveDynamicComponent(buttonHtMLTag.value), mergeProps({
+				ref_key: "buttonRootRef",
+				ref: buttonRootRef,
+				class: classes.value
+			}, buttonRootBindings.value, {
+				onClick: handleRootClick,
+				onKeydown: handleRootKeyDown
+			}), {
+				default: withCtx(() => [
+					createElementVNode("span", {
+						class: "s-ui-button__inner",
+						"aria-hidden": __props.loading ? true : void 0
+					}, [__props.icon ? (openBlock(), createBlock(unref(SIcon), {
+						key: 0,
+						name: __props.icon,
+						size: iconSize.value,
+						billing: useBillingIconGradient.value
+					}, null, 8, [
+						"name",
+						"size",
+						"billing"
+					])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+						__props.iconLeft ? (openBlock(), createBlock(unref(SIcon), {
+							key: 0,
+							name: __props.iconLeft,
+							size: iconSize.value,
+							billing: useBillingIconGradient.value
+						}, null, 8, [
+							"name",
+							"size",
+							"billing"
+						])) : createCommentVNode("", true),
+						createElementVNode("span", { class: normalizeClass(["s-ui-button__label", labelClasses.value]) }, [renderSlot(_ctx.$slots, "default")], 2),
+						__props.iconRight ? (openBlock(), createBlock(unref(SIcon), {
+							key: 1,
+							name: __props.iconRight,
+							size: iconSize.value,
+							billing: useBillingIconGradient.value
+						}, null, 8, [
+							"name",
+							"size",
+							"billing"
+						])) : createCommentVNode("", true)
+					], 64))], 8, _hoisted_1),
+					__props.loading ? (openBlock(), createElementBlock("span", _hoisted_2, [createVNode(unref(SSpinner), {
+						billing: useBillingSpinnerGradient.value,
+						size: iconSize.value
+					}, null, 8, ["billing", "size"])])) : createCommentVNode("", true),
+					unref(buttonBadgeProps) ? (openBlock(), createBlock(unref(SBadge_default), normalizeProps(mergeProps({ key: 1 }, unref(buttonBadgeProps))), null, 16)) : createCommentVNode("", true)
+				]),
+				_: 3
+			}, 16, ["class"]);
+		};
+	}
+});
+//#endregion
+export { SButton_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/SButton/utils/useButtonBadge.cjs

@@ -0,0 +1,69 @@
+const require_SBadge_types = require("../../SBadge/SBadge.types.cjs");
+const require_SButton_types = require("../SButton.types.cjs");
+let vue = require("vue");
+//#region src/components/SButton/utils/useButtonBadge.ts
+var buttonCounterBadgeOffset = {
+	offsetX: 1,
+	offsetY: -1
+};
+var buttonInsetBadgeOffsetByButtonSize = {
+	[require_SButton_types.EButtonSize.SMALL]: {
+		offsetX: -6,
+		offsetY: 6
+	},
+	[require_SButton_types.EButtonSize.MEDIUM]: {
+		offsetX: -7,
+		offsetY: 7
+	},
+	[require_SButton_types.EButtonSize.LARGE]: {
+		offsetX: -8,
+		offsetY: 8
+	}
+};
+var indicatorBadgeSizeByButtonSize = {
+	[require_SButton_types.EButtonSize.SMALL]: require_SBadge_types.ESBadgeSize.SMALL,
+	[require_SButton_types.EButtonSize.MEDIUM]: require_SBadge_types.ESBadgeSize.SMALL,
+	[require_SButton_types.EButtonSize.LARGE]: require_SBadge_types.ESBadgeSize.MEDIUM
+};
+var getButtonCounterBadgeProps = ({ buttonSize, color, counterValue, inset }) => {
+	if (typeof counterValue !== "number") return;
+	const counterBadgeOffset = inset ? buttonInsetBadgeOffsetByButtonSize[buttonSize] : buttonCounterBadgeOffset;
+	return {
+		anchored: true,
+		color,
+		offsetX: counterBadgeOffset.offsetX,
+		offsetY: counterBadgeOffset.offsetY,
+		placement: require_SBadge_types.ESBadgePlacement.TOP_END,
+		size: inset ? require_SBadge_types.ESBadgeSize.SMALL : require_SBadge_types.ESBadgeSize.MEDIUM,
+		value: counterValue
+	};
+};
+var getButtonIndicatorBadgeProps = ({ buttonSize, color, indicator }) => {
+	if (!indicator) return;
+	const indicatorBadgeOffset = buttonInsetBadgeOffsetByButtonSize[buttonSize];
+	return {
+		anchored: true,
+		color,
+		offsetX: indicatorBadgeOffset.offsetX,
+		offsetY: indicatorBadgeOffset.offsetY,
+		placement: require_SBadge_types.ESBadgePlacement.TOP_END,
+		size: indicatorBadgeSizeByButtonSize[buttonSize]
+	};
+};
+var useButtonBadge = ({ badgeColor, badgeInset, counter, indicator, size }) => {
+	return { buttonBadgeProps: (0, vue.computed)(() => {
+		const color = (0, vue.toValue)(badgeColor) || require_SBadge_types.ESBadgeColor.MAIN;
+		return getButtonCounterBadgeProps({
+			buttonSize: (0, vue.toValue)(size),
+			color,
+			counterValue: (0, vue.toValue)(counter),
+			inset: (0, vue.toValue)(badgeInset)
+		}) || getButtonIndicatorBadgeProps({
+			buttonSize: (0, vue.toValue)(size),
+			color,
+			indicator: (0, vue.toValue)(indicator)
+		});
+	}) };
+};
+//#endregion
+exports.useButtonBadge = useButtonBadge;

package/dist/components/SButton/utils/useButtonBadge.js

@@ -0,0 +1,69 @@
+import { ESBadgeColor, ESBadgePlacement, ESBadgeSize } from "../../SBadge/SBadge.types.js";
+import { EButtonSize } from "../SButton.types.js";
+import { computed, toValue } from "vue";
+//#region src/components/SButton/utils/useButtonBadge.ts
+var buttonCounterBadgeOffset = {
+	offsetX: 1,
+	offsetY: -1
+};
+var buttonInsetBadgeOffsetByButtonSize = {
+	[EButtonSize.SMALL]: {
+		offsetX: -6,
+		offsetY: 6
+	},
+	[EButtonSize.MEDIUM]: {
+		offsetX: -7,
+		offsetY: 7
+	},
+	[EButtonSize.LARGE]: {
+		offsetX: -8,
+		offsetY: 8
+	}
+};
+var indicatorBadgeSizeByButtonSize = {
+	[EButtonSize.SMALL]: ESBadgeSize.SMALL,
+	[EButtonSize.MEDIUM]: ESBadgeSize.SMALL,
+	[EButtonSize.LARGE]: ESBadgeSize.MEDIUM
+};
+var getButtonCounterBadgeProps = ({ buttonSize, color, counterValue, inset }) => {
+	if (typeof counterValue !== "number") return;
+	const counterBadgeOffset = inset ? buttonInsetBadgeOffsetByButtonSize[buttonSize] : buttonCounterBadgeOffset;
+	return {
+		anchored: true,
+		color,
+		offsetX: counterBadgeOffset.offsetX,
+		offsetY: counterBadgeOffset.offsetY,
+		placement: ESBadgePlacement.TOP_END,
+		size: inset ? ESBadgeSize.SMALL : ESBadgeSize.MEDIUM,
+		value: counterValue
+	};
+};
+var getButtonIndicatorBadgeProps = ({ buttonSize, color, indicator }) => {
+	if (!indicator) return;
+	const indicatorBadgeOffset = buttonInsetBadgeOffsetByButtonSize[buttonSize];
+	return {
+		anchored: true,
+		color,
+		offsetX: indicatorBadgeOffset.offsetX,
+		offsetY: indicatorBadgeOffset.offsetY,
+		placement: ESBadgePlacement.TOP_END,
+		size: indicatorBadgeSizeByButtonSize[buttonSize]
+	};
+};
+var useButtonBadge = ({ badgeColor, badgeInset, counter, indicator, size }) => {
+	return { buttonBadgeProps: computed(() => {
+		const color = toValue(badgeColor) || ESBadgeColor.MAIN;
+		return getButtonCounterBadgeProps({
+			buttonSize: toValue(size),
+			color,
+			counterValue: toValue(counter),
+			inset: toValue(badgeInset)
+		}) || getButtonIndicatorBadgeProps({
+			buttonSize: toValue(size),
+			color,
+			indicator: toValue(indicator)
+		});
+	}) };
+};
+//#endregion
+export { useButtonBadge };

package/dist/components/SButtonGroup/SButtonGroup.types.cjs

@@ -0,0 +1,8 @@
+//#region src/components/SButtonGroup/SButtonGroup.types.ts
+var EButtonGroupLayout = /* @__PURE__ */ function(EButtonGroupLayout) {
+	EButtonGroupLayout["ATTACHED"] = "attached";
+	EButtonGroupLayout["SEPARATED"] = "separated";
+	return EButtonGroupLayout;
+}({});
+//#endregion
+exports.EButtonGroupLayout = EButtonGroupLayout;

package/dist/components/SButtonGroup/SButtonGroup.types.js

@@ -0,0 +1,8 @@
+//#region src/components/SButtonGroup/SButtonGroup.types.ts
+var EButtonGroupLayout = /* @__PURE__ */ function(EButtonGroupLayout) {
+	EButtonGroupLayout["ATTACHED"] = "attached";
+	EButtonGroupLayout["SEPARATED"] = "separated";
+	return EButtonGroupLayout;
+}({});
+//#endregion
+export { EButtonGroupLayout };

package/dist/components/SButtonGroup/SButtonGroup.vue.cjs

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

package/dist/components/SButtonGroup/SButtonGroup.vue.js

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

package/dist/components/SButtonGroup/SButtonGroup.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,89 @@
+const require_context = require("./utils/context.cjs");
+const require_useSelectionGroup = require("../../composables/useSelectionGroup.cjs");
+const require_SButtonGroup_types = require("./SButtonGroup.types.cjs");
+const require_SInlineGroup_types = require("../SInlineGroup/SInlineGroup.types.cjs");
+const require_SInlineGroup = require("../SInlineGroup/SInlineGroup.vue.cjs");
+let vue = require("vue");
+//#region src/components/SButtonGroup/SButtonGroup.vue?vue&type=script&setup=true&lang.ts
+var SButtonGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "SButtonGroup",
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
+		mode: { default: () => require_useSelectionGroup.ESelectionMode.SINGLE },
+		mandatory: {
+			type: Boolean,
+			default: false
+		},
+		orientation: { default: () => require_useSelectionGroup.ESelectionOrientation.HORIZONTAL },
+		layout: { default: () => require_SButtonGroup_types.EButtonGroupLayout.ATTACHED },
+		loop: {
+			type: Boolean,
+			default: true
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		appearance: {},
+		variant: {},
+		size: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = (0, vue.useModel)(__props, "modelValue");
+		const selection = require_useSelectionGroup.useSelectionGroup({
+			modelValue: () => modelValue.value,
+			onUpdateModelValue: (next) => {
+				modelValue.value = next;
+			},
+			mode: () => __props.mode,
+			mandatory: () => __props.mandatory,
+			orientation: () => __props.orientation,
+			loop: () => __props.loop
+		});
+		(0, vue.provide)(require_context.sButtonGroupInjectionKey, {
+			mode: () => __props.mode,
+			isSelected: selection.isSelected,
+			selectItem: selection.toggle,
+			registerItem: selection.registerItem,
+			getItemTabIndex: selection.getItemTabIndex,
+			getGroupTabIndex: selection.getGroupTabIndex,
+			handleItemKeydown: selection.handleItemKeydown,
+			appearance: () => __props.appearance,
+			variant: () => __props.variant,
+			size: () => __props.size,
+			disabled: () => __props.disabled
+		});
+		const isAttached = (0, vue.computed)(() => {
+			return __props.layout === require_SButtonGroup_types.EButtonGroupLayout.ATTACHED;
+		});
+		const inlineGroupOrientation = (0, vue.computed)(() => {
+			return __props.orientation === require_useSelectionGroup.ESelectionOrientation.VERTICAL ? require_SInlineGroup_types.ESInlineGroupOrientation.VERTICAL : require_SInlineGroup_types.ESInlineGroupOrientation.HORIZONTAL;
+		});
+		const rootClasses = (0, vue.computed)(() => [
+			"s-ui-button-group",
+			`s-ui-button-group--orientation-${__props.orientation}`,
+			`s-ui-button-group--layout-${__props.layout}`,
+			{ "s-ui-button-group--disabled": __props.disabled }
+		]);
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(isAttached.value ? (0, vue.unref)(require_SInlineGroup.default) : "div"), {
+				orientation: isAttached.value ? inlineGroupOrientation.value : void 0,
+				class: (0, vue.normalizeClass)(rootClasses.value),
+				role: "group",
+				"aria-disabled": __props.disabled || void 0
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"orientation",
+				"class",
+				"aria-disabled"
+			]);
+		};
+	}
+});
+//#endregion
+exports.default = SButtonGroup_vue_vue_type_script_setup_true_lang_default;

package/dist/components/SButtonGroup/SButtonGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,89 @@
+import { sButtonGroupInjectionKey } from "./utils/context.js";
+import { ESelectionMode, ESelectionOrientation, useSelectionGroup } from "../../composables/useSelectionGroup.js";
+import { EButtonGroupLayout } from "./SButtonGroup.types.js";
+import { ESInlineGroupOrientation } from "../SInlineGroup/SInlineGroup.types.js";
+import SInlineGroup_default from "../SInlineGroup/SInlineGroup.vue.js";
+import { computed, createBlock, defineComponent, mergeModels, normalizeClass, openBlock, provide, renderSlot, resolveDynamicComponent, unref, useModel, withCtx } from "vue";
+//#region src/components/SButtonGroup/SButtonGroup.vue?vue&type=script&setup=true&lang.ts
+var SButtonGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SButtonGroup",
+	props: /*@__PURE__*/ mergeModels({
+		mode: { default: () => ESelectionMode.SINGLE },
+		mandatory: {
+			type: Boolean,
+			default: false
+		},
+		orientation: { default: () => ESelectionOrientation.HORIZONTAL },
+		layout: { default: () => EButtonGroupLayout.ATTACHED },
+		loop: {
+			type: Boolean,
+			default: true
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		appearance: {},
+		variant: {},
+		size: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const selection = useSelectionGroup({
+			modelValue: () => modelValue.value,
+			onUpdateModelValue: (next) => {
+				modelValue.value = next;
+			},
+			mode: () => __props.mode,
+			mandatory: () => __props.mandatory,
+			orientation: () => __props.orientation,
+			loop: () => __props.loop
+		});
+		provide(sButtonGroupInjectionKey, {
+			mode: () => __props.mode,
+			isSelected: selection.isSelected,
+			selectItem: selection.toggle,
+			registerItem: selection.registerItem,
+			getItemTabIndex: selection.getItemTabIndex,
+			getGroupTabIndex: selection.getGroupTabIndex,
+			handleItemKeydown: selection.handleItemKeydown,
+			appearance: () => __props.appearance,
+			variant: () => __props.variant,
+			size: () => __props.size,
+			disabled: () => __props.disabled
+		});
+		const isAttached = computed(() => {
+			return __props.layout === EButtonGroupLayout.ATTACHED;
+		});
+		const inlineGroupOrientation = computed(() => {
+			return __props.orientation === ESelectionOrientation.VERTICAL ? ESInlineGroupOrientation.VERTICAL : ESInlineGroupOrientation.HORIZONTAL;
+		});
+		const rootClasses = computed(() => [
+			"s-ui-button-group",
+			`s-ui-button-group--orientation-${__props.orientation}`,
+			`s-ui-button-group--layout-${__props.layout}`,
+			{ "s-ui-button-group--disabled": __props.disabled }
+		]);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(isAttached.value ? unref(SInlineGroup_default) : "div"), {
+				orientation: isAttached.value ? inlineGroupOrientation.value : void 0,
+				class: normalizeClass(rootClasses.value),
+				role: "group",
+				"aria-disabled": __props.disabled || void 0
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"orientation",
+				"class",
+				"aria-disabled"
+			]);
+		};
+	}
+});
+//#endregion
+export { SButtonGroup_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/SButtonGroup/utils/context.cjs

@@ -0,0 +1,4 @@
+//#region src/components/SButtonGroup/utils/context.ts
+var sButtonGroupInjectionKey = Symbol("SButtonGroup");
+//#endregion
+exports.sButtonGroupInjectionKey = sButtonGroupInjectionKey;

package/dist/components/SButtonGroup/utils/context.js

@@ -0,0 +1,4 @@
+//#region src/components/SButtonGroup/utils/context.ts
+var sButtonGroupInjectionKey = Symbol("SButtonGroup");
+//#endregion
+export { sButtonGroupInjectionKey };

package/dist/components/SCalendar/utils/buildWorkTimeLegendItems.cjs

@@ -0,0 +1,8 @@
+const require_calendar_const = require("./calendar.const.cjs");
+//#region src/components/SCalendar/utils/buildWorkTimeLegendItems.ts
+var buildWorkTimeLegendItems = (labels, order = require_calendar_const.WORK_TIME_SOURCE_ORDER) => order.map((source) => ({
+	label: labels[source],
+	color: require_calendar_const.WORK_TIME_SOURCE_COLOR_VARS[source]
+}));
+//#endregion
+exports.buildWorkTimeLegendItems = buildWorkTimeLegendItems;

package/dist/components/SCalendar/utils/buildWorkTimeLegendItems.js

@@ -0,0 +1,8 @@
+import { WORK_TIME_SOURCE_COLOR_VARS, WORK_TIME_SOURCE_ORDER } from "./calendar.const.js";
+//#region src/components/SCalendar/utils/buildWorkTimeLegendItems.ts
+var buildWorkTimeLegendItems = (labels, order = WORK_TIME_SOURCE_ORDER) => order.map((source) => ({
+	label: labels[source],
+	color: WORK_TIME_SOURCE_COLOR_VARS[source]
+}));
+//#endregion
+export { buildWorkTimeLegendItems };

package/dist/components/SCalendar/utils/calendar.const.cjs

@@ -0,0 +1,17 @@
+const require_calendar_types = require("./calendar.types.cjs");
+//#region src/components/SCalendar/utils/calendar.const.ts
+var WORK_TIME_SOURCE_ORDER = [
+	require_calendar_types.EWorkTimeSource.COMPUTER,
+	require_calendar_types.EWorkTimeSource.PHONE,
+	require_calendar_types.EWorkTimeSource.MANUAL,
+	require_calendar_types.EWorkTimeSource.IDLE
+];
+var WORK_TIME_SOURCE_COLOR_VARS = {
+	[require_calendar_types.EWorkTimeSource.COMPUTER]: "var(--s-ui-color-background-accent-blue-secondary)",
+	[require_calendar_types.EWorkTimeSource.PHONE]: "var(--s-ui-color-background-accent-indigo-secondary)",
+	[require_calendar_types.EWorkTimeSource.MANUAL]: "var(--s-ui-color-background-accent-teal-secondary)",
+	[require_calendar_types.EWorkTimeSource.IDLE]: "var(--s-ui-color-background-accent-orange-secondary)"
+};
+//#endregion
+exports.WORK_TIME_SOURCE_COLOR_VARS = WORK_TIME_SOURCE_COLOR_VARS;
+exports.WORK_TIME_SOURCE_ORDER = WORK_TIME_SOURCE_ORDER;

package/dist/components/SCalendar/utils/calendar.const.js

@@ -0,0 +1,16 @@
+import { EWorkTimeSource } from "./calendar.types.js";
+//#region src/components/SCalendar/utils/calendar.const.ts
+var WORK_TIME_SOURCE_ORDER = [
+	EWorkTimeSource.COMPUTER,
+	EWorkTimeSource.PHONE,
+	EWorkTimeSource.MANUAL,
+	EWorkTimeSource.IDLE
+];
+var WORK_TIME_SOURCE_COLOR_VARS = {
+	[EWorkTimeSource.COMPUTER]: "var(--s-ui-color-background-accent-blue-secondary)",
+	[EWorkTimeSource.PHONE]: "var(--s-ui-color-background-accent-indigo-secondary)",
+	[EWorkTimeSource.MANUAL]: "var(--s-ui-color-background-accent-teal-secondary)",
+	[EWorkTimeSource.IDLE]: "var(--s-ui-color-background-accent-orange-secondary)"
+};
+//#endregion
+export { WORK_TIME_SOURCE_COLOR_VARS, WORK_TIME_SOURCE_ORDER };

package/dist/components/SCalendar/utils/calendar.types.cjs

@@ -0,0 +1,10 @@
+//#region src/components/SCalendar/utils/calendar.types.ts
+var EWorkTimeSource = /* @__PURE__ */ function(EWorkTimeSource) {
+	EWorkTimeSource["COMPUTER"] = "computer";
+	EWorkTimeSource["PHONE"] = "phone";
+	EWorkTimeSource["MANUAL"] = "manual";
+	EWorkTimeSource["IDLE"] = "idle";
+	return EWorkTimeSource;
+}({});
+//#endregion
+exports.EWorkTimeSource = EWorkTimeSource;