@shtabapp/ui-kit 1.32.0 → 1.34.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [@shtabapp/ui-kit-v1.34.0](https://gitlab.com/mstikharev/shtab-ui-kit/compare/@shtabapp/ui-kit@1.33.0...@shtabapp/ui-kit@1.34.0) (2026-07-01)
+
+### Features
+
+- color picker (swatch, palette, area, values) ([2fbc95c](https://gitlab.com/mstikharev/shtab-ui-kit/commit/2fbc95c15c65ed87f9a36b9aaec6fe71a6f5ff03))
+
+## [@shtabapp/ui-kit-v1.33.0](https://gitlab.com/mstikharev/shtab-ui-kit/compare/@shtabapp/ui-kit@1.32.0...@shtabapp/ui-kit@1.33.0) (2026-07-01)
+
+### Features
+
+- contrast color text in avatars and tags & fitViewport in select ([1dd7352](https://gitlab.com/mstikharev/shtab-ui-kit/commit/1dd73524fafe22e79d28557d94acd3d440663f47))
+
 ## [@shtabapp/ui-kit-v1.32.0](https://gitlab.com/mstikharev/shtab-ui-kit/compare/@shtabapp/ui-kit@1.31.0...@shtabapp/ui-kit@1.32.0) (2026-06-30)
 
 ### Features

package/dist/SAvatar-C2gekygl.cjs

@@ -0,0 +1 @@
+const e=require("./SBadge-d1GOPFP-.cjs"),t=require("./contrastSurfaceTextColor-Ybh-FZof.cjs");let n=require("vue"),r=require("@shtabapp/ui-kit-primitives");var i=function(e){return e.SIZE_80=`80`,e.SIZE_72=`72`,e.SIZE_64=`64`,e.SIZE_56=`56`,e.SIZE_48=`48`,e.SIZE_40=`40`,e.SIZE_32=`32`,e.SIZE_24=`24`,e.SIZE_20=`20`,e.SIZE_16=`16`,e}({}),a=function(e){return e.CIRCLE=`circle`,e.SQUARE=`square`,e}({}),o=function(e){return e.TEAL=`teal`,e.CYAN=`cyan`,e.INDIGO=`indigo`,e.VIOLET=`violet`,e.PINK=`pink`,e.SURFACE=`surface`,e}({}),s=function(e){return e.NEUTRAL=`neutral`,e.MAIN=`main`,e}({}),c=function(e){return e.DEFAULT=`default`,e.ONLINE=`online`,e.OFFLINE=`offline`,e.RECENTLY=`recently`,e.ERROR=`error`,e.TRACK=`track`,e.DONE=`done`,e.CONTROLLER=`controller`,e.FAVORITE=`favorite`,e.PIN=`pin`,e.PRIVATE=`private`,e}({}),l=function(e){return e.SMALL=`s`,e.MEDIUM=`m`,e.LARGE=`l`,e}({}),u={[i.SIZE_80]:`s-ui-typography-heading-h3-semibold`,[i.SIZE_72]:`s-ui-typography-heading-h4-semibold`,[i.SIZE_64]:`s-ui-typography-heading-h4-semibold`,[i.SIZE_56]:`s-ui-typography-label-16-medium`,[i.SIZE_48]:`s-ui-typography-label-16-medium`,[i.SIZE_40]:`s-ui-typography-label-16-medium`,[i.SIZE_32]:`s-ui-typography-label-14-medium`,[i.SIZE_24]:`s-ui-typography-label-12-medium`,[i.SIZE_20]:`s-ui-typography-label-12-medium`,[i.SIZE_16]:`s-ui-typography-label-10-medium`},d={[i.SIZE_80]:40,[i.SIZE_72]:40,[i.SIZE_64]:40,[i.SIZE_56]:32,[i.SIZE_48]:32,[i.SIZE_40]:24,[i.SIZE_32]:24,[i.SIZE_24]:20,[i.SIZE_20]:16,[i.SIZE_16]:16},f={[i.SIZE_80]:l.LARGE,[i.SIZE_72]:l.LARGE,[i.SIZE_64]:l.MEDIUM,[i.SIZE_56]:l.MEDIUM,[i.SIZE_48]:l.SMALL,[i.SIZE_40]:l.SMALL,[i.SIZE_32]:l.SMALL,[i.SIZE_24]:l.SMALL,[i.SIZE_20]:l.SMALL,[i.SIZE_16]:l.SMALL},p={[l.SMALL]:e.i.SMALL,[l.MEDIUM]:e.i.MEDIUM,[l.LARGE]:e.i.LARGE},m={[e.i.SMALL]:8,[e.i.MEDIUM]:10,[e.i.LARGE]:12},h={[e.i.SMALL]:12,[e.i.MEDIUM]:16,[e.i.LARGE]:20},g=16,_={[i.SIZE_80]:0,[i.SIZE_72]:0,[i.SIZE_64]:0,[i.SIZE_56]:0,[i.SIZE_48]:0,[i.SIZE_40]:0,[i.SIZE_32]:-2,[i.SIZE_24]:-2,[i.SIZE_20]:-4,[i.SIZE_16]:-4},v={[i.SIZE_80]:-8,[i.SIZE_72]:-8,[i.SIZE_64]:-8,[i.SIZE_56]:-8,[i.SIZE_48]:-8,[i.SIZE_40]:-8,[i.SIZE_32]:-8,[i.SIZE_24]:-8,[i.SIZE_20]:-10,[i.SIZE_16]:-10},y={[c.DEFAULT]:e.n.MAIN,[c.ONLINE]:e.n.SUCCESS,[c.OFFLINE]:e.n.WHITE,[c.RECENTLY]:e.n.WARNING,[c.ERROR]:e.n.DANGER,[c.TRACK]:e.n.MAIN,[c.DONE]:e.n.SUCCESS,[c.CONTROLLER]:e.n.MAIN,[c.FAVORITE]:e.n.WARNING,[c.PIN]:e.n.MAIN,[c.PRIVATE]:e.n.BILLING},b={[c.TRACK]:r.ESIconName.playFill,[c.DONE]:r.ESIconName.checkBold,[c.CONTROLLER]:r.ESIconName.controlFill,[c.FAVORITE]:r.ESIconName.starFill,[c.PIN]:r.ESIconName.pinFill,[c.PRIVATE]:r.ESIconName.tabooBold},x=({avatarSize:e,badgeSize:t,hasIcon:n})=>{let r=_[e];return n?r:r+(h[t]-m[t])/2},S=(e,t)=>({offsetX:-e-t/2,offsetY:-e-t/2}),C=(e,t)=>({offsetX:-e-t/2,offsetY:e+t/2}),w=({badge:t,counter:r,size:i})=>{let a=(0,n.computed)(()=>{let r=(0,n.toValue)(t);if(!r)return;let a=(0,n.toValue)(i),o=b[r],s=p[f[a]],c=o?h[s]:m[s],l=S(x({avatarSize:a,badgeSize:s,hasIcon:!!o}),c);return{anchored:!0,color:y[r],icon:o,label:r,offsetX:l.offsetX,offsetY:l.offsetY,placement:e.r.BOTTOM_END,size:s}}),o=(0,n.computed)(()=>{let t=(0,n.toValue)(r);if(typeof t!=`number`)return;let a=v[(0,n.toValue)(i)],o=C(a,g);return{anchored:!0,color:e.n.MAIN,offsetX:o.offsetX,offsetY:o.offsetY,placement:e.r.TOP_END,size:e.i.MEDIUM,value:t}});return{avatarBadgeItemsProps:(0,n.computed)(()=>{let e=[];return o.value&&e.push(o.value),a.value&&e.push(a.value),e})}},T={[o.CYAN]:`#127c97`,[o.INDIGO]:`#755ace`,[o.PINK]:`#c33c86`,[o.TEAL]:`#158472`,[o.VIOLET]:`#8757c7`},E=e=>{if(t.n(e))return e;if(e!==o.SURFACE)return T[e]},D=e=>{let n=E(e);if(n)return t.t(n)},O=e=>t.n(e),k=e=>O(e)?`s-ui-avatar--color-custom`:`s-ui-avatar--color-${e}`,A=e=>{let t=D(e),n={};if(O(e)&&(n[`--s-ui-avatar-background`]=e),t&&(n[`--s-ui-avatar-color`]=t),Object.keys(n).length!==0)return n},j=[`aria-disabled`],M={class:`s-ui-avatar__content`},N=[`src`,`alt`],P={key:1,class:`s-ui-avatar__icon`},F=[`role`,`aria-label`],I={key:0,class:`s-ui-avatar__name`},L=(0,n.defineComponent)({inheritAttrs:!1,__name:`SAvatar`,props:{alt:{},badge:{},bordered:{type:Boolean,default:!0},color:{default:()=>o.TEAL},counter:{},disabled:{type:Boolean,default:!1},icon:{},iconBackground:{default:()=>s.NEUTRAL},initialLength:{default:1},name:{},shape:{default:()=>a.CIRCLE},showName:{type:Boolean,default:!0},size:{default:()=>i.SIZE_40},src:{}},setup(t){let i=(0,n.useAttrs)(),a=(0,n.ref)(!1),o=e=>typeof e==`number`||typeof e==`string`,s=(0,n.computed)(()=>{if(o(i.tabindex))return i.tabindex;if(o(i.tabIndex))return i.tabIndex}),c=(0,n.computed)(()=>o(i.tabindex)||o(i.tabIndex)),l=(0,n.computed)(()=>t.disabled?-1:c.value?s.value:0),f=(0,n.computed)(()=>({...i,tabindex:l.value})),p=(0,n.computed)(()=>[`s-ui-avatar--size-${t.size}`,`s-ui-avatar--shape-${t.shape}`,k(t.color),`s-ui-avatar--icon-background-${t.iconBackground}`,{"s-ui-avatar--bordered":t.bordered,"s-ui-avatar--disabled":t.disabled,"s-ui-avatar--icon":g.value,"s-ui-avatar--photo":h.value}]),m=(0,n.computed)(()=>{if(!g.value)return A(t.color)}),h=(0,n.computed)(()=>!!(t.src&&!a.value)),g=(0,n.computed)(()=>!!(!h.value&&t.icon)),_=e=>{let t=e.split(/\s+/).filter(Boolean);if(t.length===1){let e=t[0];if(e)return e}return t.map(e=>e.slice(0,1)).join(``)},v=(0,n.computed)(()=>t.name?_(t.name):``),y=(0,n.computed)(()=>t.alt?t.alt:t.name?t.name:v.value),b=(0,n.computed)(()=>{if(t.alt)return t.alt;if(t.name)return t.name}),x=(0,n.computed)(()=>v.value.slice(0,Math.max(t.initialLength,0))),S=(0,n.computed)(()=>u[t.size]),C=(0,n.computed)(()=>d[t.size]),{avatarBadgeItemsProps:T}=w({badge:()=>t.badge,counter:()=>t.counter,size:()=>t.size}),E=()=>{a.value=!0};return(0,n.watch)(()=>t.src,()=>{a.value=!1}),(i,o)=>((0,n.openBlock)(),(0,n.createElementBlock)(`span`,(0,n.mergeProps)(f.value,{class:[`s-ui-avatar`,p.value],style:m.value,"aria-disabled":t.disabled||void 0}),[(0,n.createElementVNode)(`span`,M,[t.src&&!a.value?((0,n.openBlock)(),(0,n.createElementBlock)(`img`,{key:0,class:`s-ui-avatar__image`,src:t.src,alt:y.value,onError:E},null,40,N)):t.icon?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,P,[(0,n.createVNode)((0,n.unref)(r.SIcon),{name:t.icon,size:C.value,"aria-label":b.value},null,8,[`name`,`size`,`aria-label`])])):((0,n.openBlock)(),(0,n.createElementBlock)(`span`,{key:2,class:(0,n.normalizeClass)([`s-ui-avatar__initials`,S.value]),role:t.alt?`img`:void 0,"aria-label":t.alt},(0,n.toDisplayString)(x.value),11,F)),((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)((0,n.unref)(T),t=>((0,n.openBlock)(),(0,n.createBlock)((0,n.unref)(e.t),(0,n.mergeProps)({key:t.placement},{ref_for:!0},t),null,16))),128))]),t.showName&&t.name?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,I,(0,n.toDisplayString)(t.name),1)):(0,n.createCommentVNode)(``,!0)],16,j))}});Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return L}});

package/dist/SAvatar-DAfDAqrP.js

@@ -0,0 +1,265 @@
+import { i as e, n as t, r as n, t as r } from "./SBadge-BDxQJh6c.js";
+import { n as i, t as a } from "./contrastSurfaceTextColor-Dl641cZ_.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, mergeProps as m, normalizeClass as h, openBlock as g, ref as _, renderList as v, toDisplayString as y, toValue as b, unref as x, useAttrs as S, watch as C } from "vue";
+import { ESIconName as w, SIcon as T } from "@shtabapp/ui-kit-primitives";
+//#region src/components/SAvatar/SAvatar.types.ts
+var E = /* @__PURE__ */ function(e) {
+	return e.SIZE_80 = "80", e.SIZE_72 = "72", e.SIZE_64 = "64", e.SIZE_56 = "56", e.SIZE_48 = "48", e.SIZE_40 = "40", e.SIZE_32 = "32", e.SIZE_24 = "24", e.SIZE_20 = "20", e.SIZE_16 = "16", e;
+}({}), D = /* @__PURE__ */ function(e) {
+	return e.CIRCLE = "circle", e.SQUARE = "square", e;
+}({}), O = /* @__PURE__ */ function(e) {
+	return e.TEAL = "teal", e.CYAN = "cyan", e.INDIGO = "indigo", e.VIOLET = "violet", e.PINK = "pink", e.SURFACE = "surface", e;
+}({}), k = /* @__PURE__ */ function(e) {
+	return e.NEUTRAL = "neutral", e.MAIN = "main", e;
+}({}), A = /* @__PURE__ */ function(e) {
+	return e.DEFAULT = "default", e.ONLINE = "online", e.OFFLINE = "offline", e.RECENTLY = "recently", e.ERROR = "error", e.TRACK = "track", e.DONE = "done", e.CONTROLLER = "controller", e.FAVORITE = "favorite", e.PIN = "pin", e.PRIVATE = "private", e;
+}({}), j = /* @__PURE__ */ function(e) {
+	return e.SMALL = "s", e.MEDIUM = "m", e.LARGE = "l", e;
+}({}), M = {
+	[E.SIZE_80]: "s-ui-typography-heading-h3-semibold",
+	[E.SIZE_72]: "s-ui-typography-heading-h4-semibold",
+	[E.SIZE_64]: "s-ui-typography-heading-h4-semibold",
+	[E.SIZE_56]: "s-ui-typography-label-16-medium",
+	[E.SIZE_48]: "s-ui-typography-label-16-medium",
+	[E.SIZE_40]: "s-ui-typography-label-16-medium",
+	[E.SIZE_32]: "s-ui-typography-label-14-medium",
+	[E.SIZE_24]: "s-ui-typography-label-12-medium",
+	[E.SIZE_20]: "s-ui-typography-label-12-medium",
+	[E.SIZE_16]: "s-ui-typography-label-10-medium"
+}, N = {
+	[E.SIZE_80]: 40,
+	[E.SIZE_72]: 40,
+	[E.SIZE_64]: 40,
+	[E.SIZE_56]: 32,
+	[E.SIZE_48]: 32,
+	[E.SIZE_40]: 24,
+	[E.SIZE_32]: 24,
+	[E.SIZE_24]: 20,
+	[E.SIZE_20]: 16,
+	[E.SIZE_16]: 16
+}, P = {
+	[E.SIZE_80]: j.LARGE,
+	[E.SIZE_72]: j.LARGE,
+	[E.SIZE_64]: j.MEDIUM,
+	[E.SIZE_56]: j.MEDIUM,
+	[E.SIZE_48]: j.SMALL,
+	[E.SIZE_40]: j.SMALL,
+	[E.SIZE_32]: j.SMALL,
+	[E.SIZE_24]: j.SMALL,
+	[E.SIZE_20]: j.SMALL,
+	[E.SIZE_16]: j.SMALL
+}, F = {
+	[j.SMALL]: e.SMALL,
+	[j.MEDIUM]: e.MEDIUM,
+	[j.LARGE]: e.LARGE
+}, I = {
+	[e.SMALL]: 8,
+	[e.MEDIUM]: 10,
+	[e.LARGE]: 12
+}, L = {
+	[e.SMALL]: 12,
+	[e.MEDIUM]: 16,
+	[e.LARGE]: 20
+}, R = 16, z = {
+	[E.SIZE_80]: 0,
+	[E.SIZE_72]: 0,
+	[E.SIZE_64]: 0,
+	[E.SIZE_56]: 0,
+	[E.SIZE_48]: 0,
+	[E.SIZE_40]: 0,
+	[E.SIZE_32]: -2,
+	[E.SIZE_24]: -2,
+	[E.SIZE_20]: -4,
+	[E.SIZE_16]: -4
+}, B = {
+	[E.SIZE_80]: -8,
+	[E.SIZE_72]: -8,
+	[E.SIZE_64]: -8,
+	[E.SIZE_56]: -8,
+	[E.SIZE_48]: -8,
+	[E.SIZE_40]: -8,
+	[E.SIZE_32]: -8,
+	[E.SIZE_24]: -8,
+	[E.SIZE_20]: -10,
+	[E.SIZE_16]: -10
+}, V = {
+	[A.DEFAULT]: t.MAIN,
+	[A.ONLINE]: t.SUCCESS,
+	[A.OFFLINE]: t.WHITE,
+	[A.RECENTLY]: t.WARNING,
+	[A.ERROR]: t.DANGER,
+	[A.TRACK]: t.MAIN,
+	[A.DONE]: t.SUCCESS,
+	[A.CONTROLLER]: t.MAIN,
+	[A.FAVORITE]: t.WARNING,
+	[A.PIN]: t.MAIN,
+	[A.PRIVATE]: t.BILLING
+}, H = {
+	[A.TRACK]: w.playFill,
+	[A.DONE]: w.checkBold,
+	[A.CONTROLLER]: w.controlFill,
+	[A.FAVORITE]: w.starFill,
+	[A.PIN]: w.pinFill,
+	[A.PRIVATE]: w.tabooBold
+}, U = ({ avatarSize: e, badgeSize: t, hasIcon: n }) => {
+	let r = z[e];
+	return n ? r : r + (L[t] - I[t]) / 2;
+}, W = (e, t) => ({
+	offsetX: -e - t / 2,
+	offsetY: -e - t / 2
+}), G = (e, t) => ({
+	offsetX: -e - t / 2,
+	offsetY: e + t / 2
+}), K = ({ badge: r, counter: i, size: a }) => {
+	let o = s(() => {
+		let e = b(r);
+		if (!e) return;
+		let t = b(a), i = H[e], o = F[P[t]], s = i ? L[o] : I[o], c = W(U({
+			avatarSize: t,
+			badgeSize: o,
+			hasIcon: !!i
+		}), s);
+		return {
+			anchored: !0,
+			color: V[e],
+			icon: i,
+			label: e,
+			offsetX: c.offsetX,
+			offsetY: c.offsetY,
+			placement: n.BOTTOM_END,
+			size: o
+		};
+	}), c = s(() => {
+		let r = b(i);
+		if (typeof r != "number") return;
+		let o = B[b(a)], s = G(o, R);
+		return {
+			anchored: !0,
+			color: t.MAIN,
+			offsetX: s.offsetX,
+			offsetY: s.offsetY,
+			placement: n.TOP_END,
+			size: e.MEDIUM,
+			value: r
+		};
+	});
+	return { avatarBadgeItemsProps: s(() => {
+		let e = [];
+		return c.value && e.push(c.value), o.value && e.push(o.value), e;
+	}) };
+}, q = {
+	[O.CYAN]: "#127c97",
+	[O.INDIGO]: "#755ace",
+	[O.PINK]: "#c33c86",
+	[O.TEAL]: "#158472",
+	[O.VIOLET]: "#8757c7"
+}, J = (e) => {
+	if (i(e)) return e;
+	if (e !== O.SURFACE) return q[e];
+}, Y = (e) => {
+	let t = J(e);
+	if (t) return a(t);
+}, X = (e) => i(e), Z = (e) => X(e) ? "s-ui-avatar--color-custom" : `s-ui-avatar--color-${e}`, Q = (e) => {
+	let t = Y(e), n = {};
+	if (X(e) && (n["--s-ui-avatar-background"] = e), t && (n["--s-ui-avatar-color"] = t), Object.keys(n).length !== 0) return n;
+}, $ = ["aria-disabled"], ee = { class: "s-ui-avatar__content" }, te = ["src", "alt"], ne = {
+	key: 1,
+	class: "s-ui-avatar__icon"
+}, re = ["role", "aria-label"], ie = {
+	key: 0,
+	class: "s-ui-avatar__name"
+}, ae = /* @__PURE__ */ p({
+	inheritAttrs: !1,
+	__name: "SAvatar",
+	props: {
+		alt: {},
+		badge: {},
+		bordered: {
+			type: Boolean,
+			default: !0
+		},
+		color: { default: () => O.TEAL },
+		counter: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		icon: {},
+		iconBackground: { default: () => k.NEUTRAL },
+		initialLength: { default: 1 },
+		name: {},
+		shape: { default: () => D.CIRCLE },
+		showName: {
+			type: Boolean,
+			default: !0
+		},
+		size: { default: () => E.SIZE_40 },
+		src: {}
+	},
+	setup(e) {
+		let t = S(), n = _(!1), i = (e) => typeof e == "number" || typeof e == "string", a = s(() => {
+			if (i(t.tabindex)) return t.tabindex;
+			if (i(t.tabIndex)) return t.tabIndex;
+		}), p = s(() => i(t.tabindex) || i(t.tabIndex)), b = s(() => e.disabled ? -1 : p.value ? a.value : 0), w = s(() => ({
+			...t,
+			tabindex: b.value
+		})), E = s(() => [
+			`s-ui-avatar--size-${e.size}`,
+			`s-ui-avatar--shape-${e.shape}`,
+			Z(e.color),
+			`s-ui-avatar--icon-background-${e.iconBackground}`,
+			{
+				"s-ui-avatar--bordered": e.bordered,
+				"s-ui-avatar--disabled": e.disabled,
+				"s-ui-avatar--icon": k.value,
+				"s-ui-avatar--photo": O.value
+			}
+		]), D = s(() => {
+			if (!k.value) return Q(e.color);
+		}), O = s(() => !!(e.src && !n.value)), k = s(() => !!(!O.value && e.icon)), A = (e) => {
+			let t = e.split(/\s+/).filter(Boolean);
+			if (t.length === 1) {
+				let e = t[0];
+				if (e) return e;
+			}
+			return t.map((e) => e.slice(0, 1)).join("");
+		}, j = s(() => e.name ? A(e.name) : ""), P = s(() => e.alt ? e.alt : e.name ? e.name : j.value), F = s(() => {
+			if (e.alt) return e.alt;
+			if (e.name) return e.name;
+		}), I = s(() => j.value.slice(0, Math.max(e.initialLength, 0))), L = s(() => M[e.size]), R = s(() => N[e.size]), { avatarBadgeItemsProps: z } = K({
+			badge: () => e.badge,
+			counter: () => e.counter,
+			size: () => e.size
+		}), B = () => {
+			n.value = !0;
+		};
+		return C(() => e.src, () => {
+			n.value = !1;
+		}), (t, i) => (g(), u("span", m(w.value, {
+			class: ["s-ui-avatar", E.value],
+			style: D.value,
+			"aria-disabled": e.disabled || void 0
+		}), [d("span", ee, [e.src && !n.value ? (g(), u("img", {
+			key: 0,
+			class: "s-ui-avatar__image",
+			src: e.src,
+			alt: P.value,
+			onError: B
+		}, null, 40, te)) : e.icon ? (g(), u("span", ne, [f(x(T), {
+			name: e.icon,
+			size: R.value,
+			"aria-label": F.value
+		}, null, 8, [
+			"name",
+			"size",
+			"aria-label"
+		])])) : (g(), u("span", {
+			key: 2,
+			class: h(["s-ui-avatar__initials", L.value]),
+			role: e.alt ? "img" : void 0,
+			"aria-label": e.alt
+		}, y(I.value), 11, re)), (g(!0), u(o, null, v(x(z), (e) => (g(), c(x(r), m({ key: e.placement }, { ref_for: !0 }, e), null, 16))), 128))]), e.showName && e.name ? (g(), u("span", ie, y(e.name), 1)) : l("", !0)], 16, $));
+	}
+});
+//#endregion
+export { D as a, k as i, A as n, E as o, O as r, ae as t };

package/dist/{SAvatarGroup-CMa9KhUZ.cjs → SAvatarGroup-76j-sHCe.cjs}

@@ -1 +1 @@
-const e=require("./SAvatar-BXABKIV0.cjs"),t=require("./SOverflowGroup-DyVUzkNu.cjs");let n=require("vue");var r=function(e){return e.EXTRA_SMALL=`extra-small`,e.SMALL=`small`,e.MEDIUM=`medium`,e}({}),i={class:`s-ui-avatar-group__overflow`},a=(0,n.defineComponent)({__name:`SAvatarGroup`,props:{disabled:{type:Boolean,default:!1},maxVisible:{},size:{default:()=>r.SMALL}},setup(a){let o=(0,n.computed)(()=>[`s-ui-avatar-group--size-${a.size}`,{"s-ui-avatar-group--disabled":a.disabled}]),s={[r.EXTRA_SMALL]:e.o.SIZE_16,[r.SMALL]:e.o.SIZE_20,[r.MEDIUM]:e.o.SIZE_24},c=(0,n.computed)(()=>s[a.size]),l=(e,t)=>({"--s-ui-avatar-group-item-z-index":e-t}),u=(t,r)=>t.type===e.t?(0,n.cloneVNode)(t,{...a.disabled?{disabled:!0}:{},showName:!1,size:c.value,style:l(r.visibleCount,r.visibleIndex)}):t;return(e,r)=>((0,n.openBlock)(),(0,n.createBlock)(t.t,{class:(0,n.normalizeClass)([`s-ui-avatar-group`,o.value]),role:`group`,"aria-disabled":a.disabled||void 0,"cluster-class":`s-ui-avatar-group__cluster`,"max-visible":a.maxVisible,"map-vnode":u},{overflow:(0,n.withCtx)(({overflowLabel:e})=>[(0,n.createElementVNode)(`span`,i,(0,n.toDisplayString)(e),1)]),default:(0,n.withCtx)(()=>[(0,n.renderSlot)(e.$slots,`default`)]),_:3},8,[`class`,`aria-disabled`,`max-visible`]))}});Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});
+const e=require("./SAvatar-C2gekygl.cjs"),t=require("./SOverflowGroup-DyVUzkNu.cjs");let n=require("vue");var r=function(e){return e.EXTRA_SMALL=`extra-small`,e.SMALL=`small`,e.MEDIUM=`medium`,e}({}),i={class:`s-ui-avatar-group__overflow`},a=(0,n.defineComponent)({__name:`SAvatarGroup`,props:{disabled:{type:Boolean,default:!1},maxVisible:{},size:{default:()=>r.SMALL}},setup(a){let o=(0,n.computed)(()=>[`s-ui-avatar-group--size-${a.size}`,{"s-ui-avatar-group--disabled":a.disabled}]),s={[r.EXTRA_SMALL]:e.o.SIZE_16,[r.SMALL]:e.o.SIZE_20,[r.MEDIUM]:e.o.SIZE_24},c=(0,n.computed)(()=>s[a.size]),l=(e,t)=>({"--s-ui-avatar-group-item-z-index":e-t}),u=(t,r)=>t.type===e.t?(0,n.cloneVNode)(t,{...a.disabled?{disabled:!0}:{},showName:!1,size:c.value,style:l(r.visibleCount,r.visibleIndex)}):t;return(e,r)=>((0,n.openBlock)(),(0,n.createBlock)(t.t,{class:(0,n.normalizeClass)([`s-ui-avatar-group`,o.value]),role:`group`,"aria-disabled":a.disabled||void 0,"cluster-class":`s-ui-avatar-group__cluster`,"max-visible":a.maxVisible,"map-vnode":u},{overflow:(0,n.withCtx)(({overflowLabel:e})=>[(0,n.createElementVNode)(`span`,i,(0,n.toDisplayString)(e),1)]),default:(0,n.withCtx)(()=>[(0,n.renderSlot)(e.$slots,`default`)]),_:3},8,[`class`,`aria-disabled`,`max-visible`]))}});Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});

package/dist/{SAvatarGroup-wkXHy_tK.js → SAvatarGroup-HvIlI5y0.js}

@@ -1,4 +1,4 @@
-import { o as e, t } from "./SAvatar-BS9Lu2eL.js";
+import { o as e, t } from "./SAvatar-DAfDAqrP.js";
 import { t as n } from "./SOverflowGroup-CVSon6Eg.js";
 import { cloneVNode as r, computed as i, createBlock as a, createElementVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, renderSlot as u, toDisplayString as d, withCtx as f } from "vue";
 //#region src/components/SAvatarGroup/SAvatarGroup.types.ts

package/dist/SColorPalette-B9WrqgRz.js

@@ -0,0 +1,146 @@
+import { a as e, r as t } from "./colorValue-DXJiNKGE.js";
+import { i as n, n as r, o as i, r as a } from "./useSelectionGroup-cKj38lEN.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, defineComponent as d, mergeModels as f, mergeProps as p, onScopeDispose as m, openBlock as h, renderList as g, renderSlot as _, shallowReactive as v, unref as y, useModel as b, useSlots as x } from "vue";
+import { ESColorSwatchSize as S, SColorSwatch as C } from "@shtabapp/ui-kit-primitives";
+//#region src/utils/color/types.ts
+var w = /* @__PURE__ */ function(e) {
+	return e.RED_ORANGE = "red-orange", e.ORANGE = "orange", e.YELLOW = "yellow", e.GREEN = "green", e.TEAL = "teal", e.CYAN = "cyan", e.BLUE = "blue", e.INDIGO = "indigo", e.VIOLET = "violet", e.MAGENTA = "magenta", e.PINK = "pink", e.RED = "red", e;
+}({}), T = /* @__PURE__ */ function(e) {
+	return e.HEX = "hex", e.RGB = "rgb", e.HSL = "hsl", e;
+}({}), E = [
+	w.RED_ORANGE,
+	w.ORANGE,
+	w.YELLOW,
+	w.GREEN,
+	w.TEAL,
+	w.CYAN,
+	w.BLUE,
+	w.INDIGO,
+	w.VIOLET,
+	w.MAGENTA,
+	w.PINK
+], D = [
+	w.RED_ORANGE,
+	w.ORANGE,
+	w.YELLOW,
+	w.GREEN,
+	w.TEAL,
+	w.CYAN,
+	w.BLUE,
+	w.INDIGO,
+	w.VIOLET,
+	w.MAGENTA,
+	w.PINK
+], O = [
+	"primary",
+	"secondary",
+	"tertiary"
+], k = (e, t) => `var(--s-ui-color-background-accent-${e}-${t})`, A = [
+	"var(--s-ui-color-icon-surface-primary)",
+	"var(--s-ui-color-icon-surface-tertiary)",
+	"var(--s-ui-color-icon-surface-disabled)"
+], j = [...(() => {
+	let e = [];
+	for (let t of D) for (let n of O) e.push(k(t, n));
+	return e;
+})(), ...A], M = /* @__PURE__ */ function(e) {
+	return e.ROW = "row", e.GRID = "grid", e;
+}({}), N = ["aria-disabled"], P = {
+	key: 0,
+	class: "s-ui-color-palette__append"
+}, F = /* @__PURE__ */ d({
+	__name: "SColorPalette",
+	props: /*@__PURE__*/ f({
+		layout: { default: () => M.ROW },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		colors: {},
+		size: { default: () => S.SIZE_40 }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ f(["select"], ["update:modelValue"]),
+	setup(d, { emit: f }) {
+		let S = b(d, "modelValue"), w = f, T = x(), D = s(() => d.colors === void 0 ? E : d.colors), O = i({
+			modelValue: () => S.value,
+			onUpdateModelValue: (e) => {
+				n(e) && (S.value = e, w("select", e));
+			},
+			mode: r.SINGLE,
+			orientation: a.HORIZONTAL,
+			orderedValues: () => D.value,
+			compareValues: t,
+			loop: !0
+		}), k = v(/* @__PURE__ */ new Map()), A = /* @__PURE__ */ new Map(), j = /* @__PURE__ */ new Map(), M = (e, t) => `${String(e)}-${t}`, F = (e) => e && (e instanceof HTMLElement || "$el" in e) ? e : null, I = (e, t) => {
+			let n = M(e, t), r = j.get(n);
+			if (r) return r;
+			let i = (t) => {
+				let r = A.get(n), i = F(t);
+				if (!t) {
+					r && (r(), A.delete(n)), k.delete(n);
+					return;
+				}
+				if (!i || k.get(n) === i && r) return;
+				r && (r(), A.delete(n)), k.set(n, i);
+				let a = O.registerItem({
+					value: e,
+					el: () => k.get(n) ?? null,
+					disabled: () => d.disabled
+				});
+				A.set(n, a);
+			};
+			return j.set(n, i), i;
+		};
+		m(() => {
+			for (let e of A.values()) e();
+			A.clear(), k.clear(), j.clear();
+		});
+		let L = (e) => d.disabled ? -1 : O.getItemTabIndex(e), R = (e, t) => {
+			if (d.disabled) {
+				t.preventDefault(), t.stopPropagation();
+				return;
+			}
+			O.select(e);
+		}, z = (e, t) => {
+			d.disabled || O.handleItemKeydown(t, e);
+		}, B = s(() => [`s-ui-color-palette--layout-${d.layout}`, {
+			"s-ui-color-palette--disabled": d.disabled,
+			"s-ui-color-palette--has-append": !!T.append
+		}]);
+		return (t, n) => (h(), u("div", p({
+			class: ["s-ui-color-palette", B.value],
+			role: "radiogroup",
+			"aria-disabled": d.disabled || void 0
+		}, t.$attrs), [(h(!0), u(o, null, g(D.value, (t, n) => (h(), c(y(C), {
+			key: `${String(t)}-${n}`,
+			ref_for: !0,
+			ref: I(t, n),
+			role: "radio",
+			class: "s-ui-color-palette__swatch",
+			color: y(e)(t),
+			size: d.size,
+			selected: y(O).isSelected(t),
+			disabled: d.disabled,
+			"aria-checked": y(O).isSelected(t) ? "true" : "false",
+			"aria-label": String(t),
+			tabindex: L(t),
+			onClick: (e) => R(t, e),
+			onKeydown: (e) => z(t, e)
+		}, null, 8, [
+			"color",
+			"size",
+			"selected",
+			"disabled",
+			"aria-checked",
+			"aria-label",
+			"tabindex",
+			"onClick",
+			"onKeydown"
+		]))), 128)), y(T).append ? (h(), u("div", P, [_(t.$slots, "append")])) : l("", !0)], 16, N));
+	}
+});
+//#endregion
+export { w as a, E as i, M as n, T as o, j as r, F as t };

package/dist/SColorPalette-CYGnmIWP.cjs

@@ -0,0 +1 @@
+const e=require("./colorValue-DClAEDHr.cjs"),t=require("./useSelectionGroup-TaektE-I.cjs");let n=require("vue"),r=require("@shtabapp/ui-kit-primitives");var i=function(e){return e.RED_ORANGE=`red-orange`,e.ORANGE=`orange`,e.YELLOW=`yellow`,e.GREEN=`green`,e.TEAL=`teal`,e.CYAN=`cyan`,e.BLUE=`blue`,e.INDIGO=`indigo`,e.VIOLET=`violet`,e.MAGENTA=`magenta`,e.PINK=`pink`,e.RED=`red`,e}({}),a=function(e){return e.HEX=`hex`,e.RGB=`rgb`,e.HSL=`hsl`,e}({}),o=[i.RED_ORANGE,i.ORANGE,i.YELLOW,i.GREEN,i.TEAL,i.CYAN,i.BLUE,i.INDIGO,i.VIOLET,i.MAGENTA,i.PINK],s=[i.RED_ORANGE,i.ORANGE,i.YELLOW,i.GREEN,i.TEAL,i.CYAN,i.BLUE,i.INDIGO,i.VIOLET,i.MAGENTA,i.PINK],c=[`primary`,`secondary`,`tertiary`],l=(e,t)=>`var(--s-ui-color-background-accent-${e}-${t})`,u=[`var(--s-ui-color-icon-surface-primary)`,`var(--s-ui-color-icon-surface-tertiary)`,`var(--s-ui-color-icon-surface-disabled)`],d=[...(()=>{let e=[];for(let t of s)for(let n of c)e.push(l(t,n));return e})(),...u],f=function(e){return e.ROW=`row`,e.GRID=`grid`,e}({}),p=[`aria-disabled`],m={key:0,class:`s-ui-color-palette__append`},h=(0,n.defineComponent)({__name:`SColorPalette`,props:(0,n.mergeModels)({layout:{default:()=>f.ROW},disabled:{type:Boolean,default:!1},colors:{},size:{default:()=>r.ESColorSwatchSize.SIZE_40}},{modelValue:{},modelModifiers:{}}),emits:(0,n.mergeModels)([`select`],[`update:modelValue`]),setup(i,{emit:a}){let s=(0,n.useModel)(i,`modelValue`),c=a,l=(0,n.useSlots)(),u=(0,n.computed)(()=>i.colors===void 0?o:i.colors),d=t.o({modelValue:()=>s.value,onUpdateModelValue:e=>{t.i(e)&&(s.value=e,c(`select`,e))},mode:t.n.SINGLE,orientation:t.r.HORIZONTAL,orderedValues:()=>u.value,compareValues:e.r,loop:!0}),f=(0,n.shallowReactive)(new Map),h=new Map,g=new Map,_=(e,t)=>`${String(e)}-${t}`,v=e=>e&&(e instanceof HTMLElement||`$el`in e)?e:null,y=(e,t)=>{let n=_(e,t),r=g.get(n);if(r)return r;let a=t=>{let r=h.get(n),a=v(t);if(!t){r&&(r(),h.delete(n)),f.delete(n);return}if(!a||f.get(n)===a&&r)return;r&&(r(),h.delete(n)),f.set(n,a);let o=d.registerItem({value:e,el:()=>f.get(n)??null,disabled:()=>i.disabled});h.set(n,o)};return g.set(n,a),a};(0,n.onScopeDispose)(()=>{for(let e of h.values())e();h.clear(),f.clear(),g.clear()});let b=e=>i.disabled?-1:d.getItemTabIndex(e),x=(e,t)=>{if(i.disabled){t.preventDefault(),t.stopPropagation();return}d.select(e)},S=(e,t)=>{i.disabled||d.handleItemKeydown(t,e)},C=(0,n.computed)(()=>[`s-ui-color-palette--layout-${i.layout}`,{"s-ui-color-palette--disabled":i.disabled,"s-ui-color-palette--has-append":!!l.append}]);return(t,a)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,(0,n.mergeProps)({class:[`s-ui-color-palette`,C.value],role:`radiogroup`,"aria-disabled":i.disabled||void 0},t.$attrs),[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(u.value,(t,a)=>((0,n.openBlock)(),(0,n.createBlock)((0,n.unref)(r.SColorSwatch),{key:`${String(t)}-${a}`,ref_for:!0,ref:y(t,a),role:`radio`,class:`s-ui-color-palette__swatch`,color:(0,n.unref)(e.a)(t),size:i.size,selected:(0,n.unref)(d).isSelected(t),disabled:i.disabled,"aria-checked":(0,n.unref)(d).isSelected(t)?`true`:`false`,"aria-label":String(t),tabindex:b(t),onClick:e=>x(t,e),onKeydown:e=>S(t,e)},null,8,[`color`,`size`,`selected`,`disabled`,`aria-checked`,`aria-label`,`tabindex`,`onClick`,`onKeydown`]))),128)),(0,n.unref)(l).append?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,m,[(0,n.renderSlot)(t.$slots,`append`)])):(0,n.createCommentVNode)(``,!0)],16,p))}});Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return h}});