@7pmlabs/design-system 1.0.9 → 1.0.10

package/dist/design-system180.js

@@ -1,103 +1,91 @@
-import { BSpinSize as e } from "./design-system3.js";
-import { Fragment as t, Teleport as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createStaticVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, normalizeClass as p, openBlock as m, ref as h, renderSlot as g, toDisplayString as _, unref as v, useId as y, useSlots as b, watch as x, withCtx as S } from "vue";
-//#region src/components/BSpin/BSpin.vue?vue&type=script&setup=true&lang.ts
-var C = ["aria-label", "aria-describedby"], w = {
-	class: "b-spin__indicator",
+import e from "./design-system179.js";
+import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, renderList as d, renderSlot as f } from "vue";
+//#region src/components/BSkeleton/BSkeleton.vue?vue&type=script&setup=true&lang.ts
+var p = {
+	key: 0,
+	class: "b-skeleton__header"
+}, m = { class: "b-skeleton__content" }, h = {
+	key: 1,
+	class: "b-skeleton__paragraph",
 	"aria-hidden": "true"
-}, T = ["id"], E = ["aria-label", "aria-describedby"], D = {
-	class: "b-spin__indicator",
-	"aria-hidden": "true"
-}, O = ["id"], k = ["aria-label", "aria-describedby"], A = {
-	class: "b-spin__indicator",
-	"aria-hidden": "true"
-}, j = ["id"], M = ["aria-busy", "inert"], N = /* @__PURE__ */ f({
-	__name: "BSpin",
+}, g = /* @__PURE__ */ s({
+	__name: "BSkeleton",
 	props: {
-		spinning: {
+		active: {
+			type: Boolean,
+			default: !1
+		},
+		avatar: {
+			type: [Boolean, Object],
+			default: !1
+		},
+		loading: {
 			type: Boolean,
 			default: !0
 		},
-		size: { default: () => e.Default },
-		tip: { default: "" },
-		delay: { default: 0 },
-		fullscreen: {
+		paragraph: {
+			type: [Boolean, Object],
+			default: !0
+		},
+		round: {
 			type: Boolean,
 			default: !1
+		},
+		title: {
+			type: [Boolean, Object],
+			default: !0
 		}
 	},
-	setup(e) {
-		let f = b(), N = y(), P = h(!1), F;
-		function I(t) {
-			clearTimeout(F), t && e.delay > 0 ? F = setTimeout(() => {
-				P.value = !0;
-			}, e.delay) : P.value = t;
+	setup(s) {
+		let g = n(() => s.avatar !== !1 && s.avatar != null), _ = n(() => s.title !== !1 && s.title != null), v = n(() => s.paragraph !== !1 && s.paragraph != null), y = n(() => typeof s.avatar == "object" && s.avatar !== null ? s.avatar : {}), b = n(() => typeof s.title == "object" && s.title !== null ? s.title : {}), x = n(() => typeof s.paragraph == "object" && s.paragraph !== null ? s.paragraph : {}), S = n(() => T(b.value.width)), C = n(() => {
+			let e = x.value.rows;
+			return typeof e == "number" && e > 0 ? Math.floor(e) : 3;
+		}), w = n(() => {
+			let e = x.value.width, t = C.value, n = [];
+			for (let r = 0; r < t; r += 1) if (Array.isArray(e)) {
+				let t = e[r];
+				n.push(T(t) ?? "");
+			} else if (r === t - 1) {
+				let t = T(e);
+				n.push(t ?? "61%");
+			} else n.push("");
+			return n;
+		});
+		function T(e) {
+			if (e != null) return typeof e == "number" ? `${e}px` : e;
 		}
-		I(e.spinning), x(() => e.spinning, I);
-		let L = i(() => !!f.default), R = i(() => !!(e.tip || f.tip)), z = i(() => [
-			"b-spin",
-			`b-spin--${e.size}`,
-			{
-				"b-spin--spinning": P.value,
-				"b-spin--nested": L.value,
-				"b-spin--has-tip": R.value,
-				"b-spin--fullscreen": e.fullscreen
-			}
-		]);
-		return (i, f) => e.fullscreen ? (m(), a(n, {
-			key: 0,
-			to: "body"
-		}, [d(r, { name: "b-spin-fade" }, {
-			default: S(() => [P.value ? (m(), s("div", {
-				key: 0,
-				class: p(["b-spin b-spin--fullscreen", [`b-spin--${e.size}`, {
-					"b-spin--spinning": P.value,
-					"b-spin--has-tip": R.value
-				}]]),
-				role: "status",
-				"aria-label": R.value ? void 0 : "Loading",
-				"aria-describedby": R.value ? v(N) : void 0
-			}, [c("div", w, [g(i.$slots, "indicator", {}, () => [f[0] ||= c("span", { class: "b-spin__dot" }, [
-				c("i", { class: "b-spin__dot-item" }),
-				c("i", { class: "b-spin__dot-item" }),
-				c("i", { class: "b-spin__dot-item" }),
-				c("i", { class: "b-spin__dot-item" })
-			], -1)])]), R.value ? (m(), s("div", {
-				key: 0,
-				id: v(N),
-				class: "b-spin__tip"
-			}, [g(i.$slots, "tip", {}, () => [u(_(e.tip), 1)])], 8, T)) : o("", !0)], 10, C)) : o("", !0)]),
-			_: 3
-		})])) : L.value ? (m(), s("div", {
-			key: 2,
-			class: p(z.value)
-		}, [P.value ? (m(), s("div", {
-			key: 0,
-			class: "b-spin__overlay-container",
-			role: "status",
-			"aria-label": R.value ? void 0 : "Loading",
-			"aria-describedby": R.value ? v(N) : void 0
-		}, [c("div", A, [g(i.$slots, "indicator", {}, () => [f[2] ||= l("<span class=\"b-spin__dot\"><i class=\"b-spin__dot-item\"></i><i class=\"b-spin__dot-item\"></i><i class=\"b-spin__dot-item\"></i><i class=\"b-spin__dot-item\"></i></span>", 1)])]), R.value ? (m(), s("div", {
-			key: 0,
-			id: v(N),
-			class: "b-spin__tip"
-		}, [g(i.$slots, "tip", {}, () => [u(_(e.tip), 1)])], 8, j)) : o("", !0)], 8, k)) : o("", !0), c("div", {
-			class: p(["b-spin__content", { "b-spin__content--blurred": P.value }]),
-			"aria-busy": P.value,
-			inert: P.value
-		}, [g(i.$slots, "default")], 10, M)], 2)) : (m(), s(t, { key: 1 }, [P.value ? (m(), s("div", {
+		let E = n(() => ["b-skeleton", {
+			"b-skeleton--active": s.active,
+			"b-skeleton--with-avatar": g.value,
+			"b-skeleton--round": s.round
+		}]);
+		return (n, b) => s.loading ? (u(), i("div", {
 			key: 0,
-			class: p(z.value),
+			class: c(E.value),
 			role: "status",
-			"aria-label": R.value ? void 0 : "Loading",
-			"aria-describedby": R.value ? v(N) : void 0
-		}, [c("div", D, [g(i.$slots, "indicator", {}, () => [f[1] ||= l("<span class=\"b-spin__dot\"><i class=\"b-spin__dot-item\"></i><i class=\"b-spin__dot-item\"></i><i class=\"b-spin__dot-item\"></i><i class=\"b-spin__dot-item\"></i></span>", 1)])]), R.value ? (m(), s("div", {
+			"aria-live": "polite",
+			"aria-label": "Loading"
+		}, [g.value ? (u(), i("div", p, [o(e, {
+			active: s.active || y.value.active,
+			shape: y.value.shape,
+			size: y.value.size
+		}, null, 8, [
+			"active",
+			"shape",
+			"size"
+		])])) : r("", !0), a("div", m, [_.value ? (u(), i("h3", {
 			key: 0,
-			id: v(N),
-			class: "b-spin__tip"
-		}, [g(i.$slots, "tip", {}, () => [u(_(e.tip), 1)])], 8, O)) : o("", !0)], 10, E)) : o("", !0)], 64));
+			class: "b-skeleton__title",
+			style: l(S.value ? { width: S.value } : void 0),
+			"aria-hidden": "true"
+		}, null, 4)) : r("", !0), v.value ? (u(), i("ul", h, [(u(!0), i(t, null, d(w.value, (e, t) => (u(), i("li", {
+			key: t,
+			class: "b-skeleton__paragraph-row",
+			style: l(e ? { width: e } : void 0)
+		}, null, 4))), 128))])) : r("", !0)])], 2)) : f(n.$slots, "default", { key: 1 });
 	}
 });
 //#endregion
-export { N as default };
+export { g as default };
 
 //# sourceMappingURL=design-system180.js.map

package/dist/design-system180.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system180.js","names":[],"sources":["../src/components/BSpin/BSpin.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { useSlots as _useSlots, defineComponent as _defineComponent } from 'vue'\nimport { unref as _unref, renderSlot as _renderSlot, createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock, Fragment as _Fragment, createStaticVNode as _createStaticVNode } from \"vue\"\n\nconst _hoisted_1 = [\"aria-label\", \"aria-describedby\"]\nconst _hoisted_2 = {\n  class: \"b-spin__indicator\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_3 = [\"id\"]\nconst _hoisted_4 = [\"aria-label\", \"aria-describedby\"]\nconst _hoisted_5 = {\n  class: \"b-spin__indicator\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_6 = [\"id\"]\nconst _hoisted_7 = [\"aria-label\", \"aria-describedby\"]\nconst _hoisted_8 = {\n  class: \"b-spin__indicator\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_9 = [\"id\"]\nconst _hoisted_10 = [\"aria-busy\", \"inert\"]\n\nimport { BSpinSize } from '@/types.ts';\nimport { computed, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BSpin',\n  props: {\n    spinning: { type: Boolean, default: true },\n    size: { default: () => (BSpinSize.Default) },\n    tip: { default: '' },\n    delay: { default: 0 },\n    fullscreen: { type: Boolean, default: false }\n  },\n  setup(__props: any) {\n\n\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\nconst slots = _useSlots();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst tipId = useId();\n\n/** Delayed spinning state - respects `delay` prop. */\nconst shouldShow = ref(false);\nlet delayTimer: ReturnType<typeof setTimeout> | undefined;\n\nfunction applySpinning(value: boolean) {\n  clearTimeout(delayTimer);\n  if (value && __props.delay > 0) {\n    delayTimer = setTimeout(() => {\n      shouldShow.value = true;\n    }, __props.delay);\n  } else {\n    shouldShow.value = value;\n  }\n}\n\n// Run immediately on mount, then watch for changes\napplySpinning(__props.spinning);\n\nwatch(() => __props.spinning, applySpinning);\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\nconst isNested = computed(() => Boolean(slots.default));\nconst hasTip = computed(() => Boolean(__props.tip || slots.tip));\n\nconst rootClasses = computed(() => [\n  'b-spin',\n  `b-spin--${__props.size}`,\n  {\n    'b-spin--spinning': shouldShow.value,\n    'b-spin--nested': isNested.value,\n    'b-spin--has-tip': hasTip.value,\n    'b-spin--fullscreen': __props.fullscreen,\n  },\n]);\n\nreturn (_ctx: any,_cache: any) => {\n  return (__props.fullscreen)\n    ? (_openBlock(), _createBlock(_Teleport, {\n        key: 0,\n        to: \"body\"\n      }, [\n        _createVNode(_Transition, { name: \"b-spin-fade\" }, {\n          default: _withCtx(() => [\n            (shouldShow.value)\n              ? (_openBlock(), _createElementBlock(\"div\", {\n                  key: 0,\n                  class: _normalizeClass([\"b-spin b-spin--fullscreen\", [`b-spin--${__props.size}`, { 'b-spin--spinning': shouldShow.value, 'b-spin--has-tip': hasTip.value }]]),\n                  role: \"status\",\n                  \"aria-label\": hasTip.value ? undefined : 'Loading',\n                  \"aria-describedby\": hasTip.value ? _unref(tipId) : undefined\n                }, [\n                  _createElementVNode(\"div\", _hoisted_2, [\n                    _renderSlot(_ctx.$slots, \"indicator\", {}, () => [\n                      _cache[0] || (_cache[0] = _createElementVNode(\"span\", { class: \"b-spin__dot\" }, [\n                        _createElementVNode(\"i\", { class: \"b-spin__dot-item\" }),\n                        _createElementVNode(\"i\", { class: \"b-spin__dot-item\" }),\n                        _createElementVNode(\"i\", { class: \"b-spin__dot-item\" }),\n                        _createElementVNode(\"i\", { class: \"b-spin__dot-item\" })\n                      ], -1))\n                    ])\n                  ]),\n                  (hasTip.value)\n                    ? (_openBlock(), _createElementBlock(\"div\", {\n                        key: 0,\n                        id: _unref(tipId),\n                        class: \"b-spin__tip\"\n                      }, [\n                        _renderSlot(_ctx.$slots, \"tip\", {}, () => [\n                          _createTextVNode(_toDisplayString(__props.tip), 1)\n                        ])\n                      ], 8, _hoisted_3))\n                    : _createCommentVNode(\"\", true)\n                ], 10, _hoisted_1))\n              : _createCommentVNode(\"\", true)\n          ]),\n          _: 3\n        })\n      ]))\n    : (!isNested.value)\n      ? (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [\n          (shouldShow.value)\n            ? (_openBlock(), _createElementBlock(\"div\", {\n                key: 0,\n                class: _normalizeClass(rootClasses.value),\n                role: \"status\",\n                \"aria-label\": hasTip.value ? undefined : 'Loading',\n                \"aria-describedby\": hasTip.value ? _unref(tipId) : undefined\n              }, [\n                _createElementVNode(\"div\", _hoisted_5, [\n                  _renderSlot(_ctx.$slots, \"indicator\", {}, () => [\n                    _cache[1] || (_cache[1] = _createStaticVNode(\"<span class=\\\"b-spin__dot\\\"><i class=\\\"b-spin__dot-item\\\"></i><i class=\\\"b-spin__dot-item\\\"></i><i class=\\\"b-spin__dot-item\\\"></i><i class=\\\"b-spin__dot-item\\\"></i></span>\", 1))\n                  ])\n                ]),\n                (hasTip.value)\n                  ? (_openBlock(), _createElementBlock(\"div\", {\n                      key: 0,\n                      id: _unref(tipId),\n                      class: \"b-spin__tip\"\n                    }, [\n                      _renderSlot(_ctx.$slots, \"tip\", {}, () => [\n                        _createTextVNode(_toDisplayString(__props.tip), 1)\n                      ])\n                    ], 8, _hoisted_6))\n                  : _createCommentVNode(\"\", true)\n              ], 10, _hoisted_4))\n            : _createCommentVNode(\"\", true)\n        ], 64))\n      : (_openBlock(), _createElementBlock(\"div\", {\n          key: 2,\n          class: _normalizeClass(rootClasses.value)\n        }, [\n          (shouldShow.value)\n            ? (_openBlock(), _createElementBlock(\"div\", {\n                key: 0,\n                class: \"b-spin__overlay-container\",\n                role: \"status\",\n                \"aria-label\": hasTip.value ? undefined : 'Loading',\n                \"aria-describedby\": hasTip.value ? _unref(tipId) : undefined\n              }, [\n                _createElementVNode(\"div\", _hoisted_8, [\n                  _renderSlot(_ctx.$slots, \"indicator\", {}, () => [\n                    _cache[2] || (_cache[2] = _createStaticVNode(\"<span class=\\\"b-spin__dot\\\"><i class=\\\"b-spin__dot-item\\\"></i><i class=\\\"b-spin__dot-item\\\"></i><i class=\\\"b-spin__dot-item\\\"></i><i class=\\\"b-spin__dot-item\\\"></i></span>\", 1))\n                  ])\n                ]),\n                (hasTip.value)\n                  ? (_openBlock(), _createElementBlock(\"div\", {\n                      key: 0,\n                      id: _unref(tipId),\n                      class: \"b-spin__tip\"\n                    }, [\n                      _renderSlot(_ctx.$slots, \"tip\", {}, () => [\n                        _createTextVNode(_toDisplayString(__props.tip), 1)\n                      ])\n                    ], 8, _hoisted_9))\n                  : _createCommentVNode(\"\", true)\n              ], 8, _hoisted_7))\n            : _createCommentVNode(\"\", true),\n          _createElementVNode(\"div\", {\n            class: _normalizeClass([\"b-spin__content\", { 'b-spin__content--blurred': shouldShow.value }]),\n            \"aria-busy\": shouldShow.value,\n            inert: shouldShow.value\n          }, [\n            _renderSlot(_ctx.$slots, \"default\")\n          ], 10, _hoisted_10)\n        ], 2))\n}\n}\n\n})"],"mappings":"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"}
+{"version":3,"file":"design-system180.js","names":[],"sources":["../src/components/BSkeleton/BSkeleton.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, renderList as _renderList, Fragment as _Fragment, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, renderSlot as _renderSlot } from \"vue\"\n\nconst _hoisted_1 = {\n  key: 0,\n  class: \"b-skeleton__header\"\n}\nconst _hoisted_2 = { class: \"b-skeleton__content\" }\nconst _hoisted_3 = {\n  key: 1,\n  class: \"b-skeleton__paragraph\",\n  \"aria-hidden\": \"true\"\n}\n\nimport { computed } from 'vue';\nimport BSkeletonAvatar from './BSkeletonAvatar.vue';\nimport type {\n  BSkeletonAvatarConfig,\n  BSkeletonParagraphConfig,\n  BSkeletonTitleConfig,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BSkeleton',\n  props: {\n    active: { type: Boolean, default: false },\n    avatar: { type: [Boolean, Object], default: false },\n    loading: { type: Boolean, default: true },\n    paragraph: { type: [Boolean, Object], default: true },\n    round: { type: Boolean, default: false },\n    title: { type: [Boolean, Object], default: true }\n  },\n  setup(__props: any) {\n\n\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\n\n\n// ─────────────────────────────────────────────\n// Derived flags / configs\n// ─────────────────────────────────────────────\nconst showAvatar = computed(() => __props.avatar !== false && __props.avatar != null);\nconst showTitle = computed(() => __props.title !== false && __props.title != null);\nconst showParagraph = computed(() => __props.paragraph !== false && __props.paragraph != null);\n\nconst avatarConfig = computed<BSkeletonAvatarConfig>(() =>\n  typeof __props.avatar === 'object' && __props.avatar !== null ? __props.avatar : {},\n);\n\nconst titleConfig = computed<BSkeletonTitleConfig>(() =>\n  typeof __props.title === 'object' && __props.title !== null ? __props.title : {},\n);\n\nconst paragraphConfig = computed<BSkeletonParagraphConfig>(() =>\n  typeof __props.paragraph === 'object' && __props.paragraph !== null ? __props.paragraph : {},\n);\n\nconst titleWidth = computed(() => normalizeWidth(titleConfig.value.width));\n\nconst paragraphRows = computed(() => {\n  const r = paragraphConfig.value.rows;\n  return typeof r === 'number' && r > 0 ? Math.floor(r) : 3;\n});\n\nconst paragraphRowWidths = computed<string[]>(() => {\n  const widths = paragraphConfig.value.width;\n  const rows = paragraphRows.value;\n  const out: string[] = [];\n  for (let i = 0; i < rows; i += 1) {\n    if (Array.isArray(widths)) {\n      const w = widths[i];\n      out.push(normalizeWidth(w) ?? '');\n    } else if (i === rows - 1) {\n      // Apply explicit width to the LAST row only when a single value is given.\n      const w = normalizeWidth(widths);\n      out.push(w ?? '61%');\n    } else {\n      out.push('');\n    }\n  }\n  return out;\n});\n\nfunction normalizeWidth(w: number | string | undefined): string | undefined {\n  if (w == null) return undefined;\n  if (typeof w === 'number') return `${w}px`;\n  return w;\n}\n\nconst rootClasses = computed(() => [\n  'b-skeleton',\n  {\n    'b-skeleton--active': __props.active,\n    'b-skeleton--with-avatar': showAvatar.value,\n    'b-skeleton--round': __props.round,\n  },\n]);\n\nreturn (_ctx: any,_cache: any) => {\n  return (__props.loading)\n    ? (_openBlock(), _createElementBlock(\"div\", {\n        key: 0,\n        class: _normalizeClass(rootClasses.value),\n        role: \"status\",\n        \"aria-live\": \"polite\",\n        \"aria-label\": \"Loading\"\n      }, [\n        (showAvatar.value)\n          ? (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n              _createVNode(BSkeletonAvatar, {\n                active: __props.active || avatarConfig.value.active,\n                shape: avatarConfig.value.shape,\n                size: avatarConfig.value.size\n              }, null, 8, [\"active\", \"shape\", \"size\"])\n            ]))\n          : _createCommentVNode(\"\", true),\n        _createElementVNode(\"div\", _hoisted_2, [\n          (showTitle.value)\n            ? (_openBlock(), _createElementBlock(\"h3\", {\n                key: 0,\n                class: \"b-skeleton__title\",\n                style: _normalizeStyle(titleWidth.value ? { width: titleWidth.value } : undefined),\n                \"aria-hidden\": \"true\"\n              }, null, 4))\n            : _createCommentVNode(\"\", true),\n          (showParagraph.value)\n            ? (_openBlock(), _createElementBlock(\"ul\", _hoisted_3, [\n                (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(paragraphRowWidths.value, (w, i) => {\n                  return (_openBlock(), _createElementBlock(\"li\", {\n                    key: i,\n                    class: \"b-skeleton__paragraph-row\",\n                    style: _normalizeStyle(w ? { width: w } : undefined)\n                  }, null, 4))\n                }), 128))\n              ]))\n            : _createCommentVNode(\"\", true)\n        ])\n      ], 2))\n    : _renderSlot(_ctx.$slots, \"default\", { key: 1 })\n}\n}\n\n})"],"mappings":"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"}

package/dist/design-system182.js

@@ -1,6 +1,6 @@
 import e from "./design-system180.js";
 /* empty css                 */
-//#region src/components/BSpin/BSpin.vue
+//#region src/components/BSkeleton/BSkeleton.vue
 var t = e;
 //#endregion
 export { t as default };

package/dist/design-system182.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system182.js","names":[],"sources":["../src/components/BSpin/BSpin.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BSpinSize } from '@/types.ts';\nimport { computed, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  spinning = true,\n  size = BSpinSize.Default,\n  tip = '',\n  delay = 0,\n  fullscreen = false,\n} = defineProps<{\n  /**\n   * Whether the Spin indicator is active.\n   * @default true\n   */\n  spinning?: boolean;\n  /**\n   * Size of the spinner - small, default, or large.\n   * @default 'default'\n   */\n  size?: `${BSpinSize}`;\n  /**\n   * Descriptive text displayed below the spinning indicator.\n   */\n  tip?: string;\n  /**\n   * Delay in milliseconds before the spinner shows after `spinning` becomes true.\n   * Prevents flicker for fast operations. Does not apply to hiding.\n   * @default 0\n   */\n  delay?: number;\n  /**\n   * Display as fullscreen overlay (fixed, covers the entire viewport).\n   * @default false\n   */\n  fullscreen?: boolean;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\nconst slots = defineSlots<{\n  /** Content to wrap with a spinning overlay. */\n  default?(): unknown;\n  /** Custom spinner indicator (replaces the default dots). */\n  indicator?(): unknown;\n  /** Custom tip content (replaces the `tip` prop text). */\n  tip?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst tipId = useId();\n\n/** Delayed spinning state - respects `delay` prop. */\nconst shouldShow = ref(false);\nlet delayTimer: ReturnType<typeof setTimeout> | undefined;\n\nfunction applySpinning(value: boolean) {\n  clearTimeout(delayTimer);\n  if (value && delay > 0) {\n    delayTimer = setTimeout(() => {\n      shouldShow.value = true;\n    }, delay);\n  } else {\n    shouldShow.value = value;\n  }\n}\n\n// Run immediately on mount, then watch for changes\napplySpinning(spinning);\n\nwatch(() => spinning, applySpinning);\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\nconst isNested = computed(() => Boolean(slots.default));\nconst hasTip = computed(() => Boolean(tip || slots.tip));\n\nconst rootClasses = computed(() => [\n  'b-spin',\n  `b-spin--${size}`,\n  {\n    'b-spin--spinning': shouldShow.value,\n    'b-spin--nested': isNested.value,\n    'b-spin--has-tip': hasTip.value,\n    'b-spin--fullscreen': fullscreen,\n  },\n]);\n</script>\n\n<template>\n  <!-- Fullscreen mode: uses Teleport to <body> -->\n  <Teleport v-if=\"fullscreen\" to=\"body\">\n    <Transition name=\"b-spin-fade\">\n      <div\n        v-if=\"shouldShow\"\n        class=\"b-spin b-spin--fullscreen\"\n        :class=\"[`b-spin--${size}`, { 'b-spin--spinning': shouldShow, 'b-spin--has-tip': hasTip }]\"\n        role=\"status\"\n        :aria-label=\"hasTip ? undefined : 'Loading'\"\n        :aria-describedby=\"hasTip ? tipId : undefined\"\n      >\n        <div class=\"b-spin__indicator\" aria-hidden=\"true\">\n          <slot name=\"indicator\">\n            <span class=\"b-spin__dot\">\n              <i class=\"b-spin__dot-item\" />\n              <i class=\"b-spin__dot-item\" />\n              <i class=\"b-spin__dot-item\" />\n              <i class=\"b-spin__dot-item\" />\n            </span>\n          </slot>\n        </div>\n        <div v-if=\"hasTip\" :id=\"tipId\" class=\"b-spin__tip\">\n          <slot name=\"tip\">{{ tip }}</slot>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n\n  <!-- Standalone (no children) -->\n  <template v-else-if=\"!isNested\">\n    <div\n      v-if=\"shouldShow\"\n      :class=\"rootClasses\"\n      role=\"status\"\n      :aria-label=\"hasTip ? undefined : 'Loading'\"\n      :aria-describedby=\"hasTip ? tipId : undefined\"\n    >\n      <div class=\"b-spin__indicator\" aria-hidden=\"true\">\n        <slot name=\"indicator\">\n          <span class=\"b-spin__dot\">\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n          </span>\n        </slot>\n      </div>\n      <div v-if=\"hasTip\" :id=\"tipId\" class=\"b-spin__tip\">\n        <slot name=\"tip\">{{ tip }}</slot>\n      </div>\n    </div>\n  </template>\n\n  <!-- Nested (wraps children) -->\n  <div v-else :class=\"rootClasses\">\n    <div\n      v-if=\"shouldShow\"\n      class=\"b-spin__overlay-container\"\n      role=\"status\"\n      :aria-label=\"hasTip ? undefined : 'Loading'\"\n      :aria-describedby=\"hasTip ? tipId : undefined\"\n    >\n      <div class=\"b-spin__indicator\" aria-hidden=\"true\">\n        <slot name=\"indicator\">\n          <span class=\"b-spin__dot\">\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n          </span>\n        </slot>\n      </div>\n      <div v-if=\"hasTip\" :id=\"tipId\" class=\"b-spin__tip\">\n        <slot name=\"tip\">{{ tip }}</slot>\n      </div>\n    </div>\n    <div\n      class=\"b-spin__content\"\n      :class=\"{ 'b-spin__content--blurred': shouldShow }\"\n      :aria-busy=\"shouldShow\"\n      :inert=\"shouldShow\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-spin {\n  /* Dot sizes per variant */\n  --b-spin-dot-size-small: 14px;\n  --b-spin-dot-size-default: 20px;\n  --b-spin-dot-size-large: 32px;\n\n  /* Dot colour */\n  --b-spin-dot-color: oklch(50% 0.169 237.323); /* primary – darkened for AA contrast */\n\n  /* Tip text */\n  --b-spin-tip-color: oklch(50% 0.169 237.323);\n  --b-spin-tip-font-size: 0.875rem;\n\n  /* Overlay */\n  --b-spin-overlay-bg: oklch(100% 0 0 / 0.6);\n  --b-spin-content-blur: 0.5px;\n\n  /* Fullscreen */\n  --b-spin-fullscreen-bg: oklch(100% 0 0 / 0.75);\n\n  /* Animation */\n  --b-spin-animation-duration: 1.2s;\n  --b-spin-transition-duration: 300ms;\n}\n\n/* ── Dark mode ───────────────────────────────── */\n[data-prefers-color='dark'] .b-spin {\n  --b-spin-dot-color: oklch(72% 0.14 237);\n  --b-spin-tip-color: oklch(72% 0.14 237);\n  --b-spin-overlay-bg: oklch(15% 0 0 / 0.6);\n  --b-spin-fullscreen-bg: oklch(15% 0 0 / 0.75);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-spin {\n    --b-spin-dot-color: oklch(72% 0.14 237);\n    --b-spin-tip-color: oklch(72% 0.14 237);\n    --b-spin-overlay-bg: oklch(15% 0 0 / 0.6);\n    --b-spin-fullscreen-bg: oklch(15% 0 0 / 0.75);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-spin {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  font-family: inherit;\n}\n\n/* Nested wrapper needs relative positioning for overlay */\n.b-spin--nested {\n  position: relative;\n  display: block;\n}\n\n/* ── Overlay container (nested mode) ── */\n.b-spin__overlay-container {\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  background: var(--b-spin-overlay-bg);\n  border-radius: inherit;\n  transition: opacity var(--b-spin-transition-duration) ease;\n}\n\n/* ── Content (nested) ── */\n.b-spin__content {\n  transition:\n    opacity var(--b-spin-transition-duration) ease,\n    filter var(--b-spin-transition-duration) ease;\n}\n\n.b-spin__content--blurred {\n  opacity: 0.5;\n  filter: blur(var(--b-spin-content-blur));\n  pointer-events: none;\n  user-select: none;\n}\n\n/* ── Fullscreen ── */\n.b-spin--fullscreen {\n  position: fixed;\n  inset: 0;\n  z-index: 1070;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  background: var(--b-spin-fullscreen-bg);\n}\n\n/* ── Dot indicator ── */\n.b-spin__indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n.b-spin__dot {\n  position: relative;\n  display: inline-block;\n  font-size: var(--b-spin-dot-size-default);\n  width: 1em;\n  height: 1em;\n  animation: b-spin-rotate var(--b-spin-animation-duration) linear infinite;\n}\n\n.b-spin--small .b-spin__dot {\n  font-size: var(--b-spin-dot-size-small);\n}\n\n.b-spin--large .b-spin__dot {\n  font-size: var(--b-spin-dot-size-large);\n}\n\n.b-spin__dot-item {\n  position: absolute;\n  display: block;\n  width: calc(1em * 0.45);\n  height: calc(1em * 0.45);\n  background-color: var(--b-spin-dot-color);\n  border-radius: 50%;\n  opacity: 0.3;\n  animation: b-spin-bounce var(--b-spin-animation-duration) ease-in-out infinite;\n  transform: scale(0.75);\n}\n\n.b-spin__dot-item:nth-child(1) {\n  top: 0;\n  left: 0;\n}\n\n.b-spin__dot-item:nth-child(2) {\n  top: 0;\n  right: 0;\n  animation-delay: 0.4s;\n}\n\n.b-spin__dot-item:nth-child(3) {\n  right: 0;\n  bottom: 0;\n  animation-delay: 0.8s;\n}\n\n.b-spin__dot-item:nth-child(4) {\n  bottom: 0;\n  left: 0;\n  animation-delay: 1.2s;\n}\n\n/* ── Tip ── */\n.b-spin__tip {\n  color: var(--b-spin-tip-color);\n  font-size: var(--b-spin-tip-font-size);\n  text-align: center;\n}\n\n/* ─────────────────────────────────────────────\n   Keyframes\n   ───────────────────────────────────────────── */\n@keyframes b-spin-rotate {\n  to {\n    transform: rotate(405deg);\n  }\n}\n\n@keyframes b-spin-bounce {\n  0%,\n  100% {\n    opacity: 0.3;\n    transform: scale(0.75);\n  }\n  50% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Fade transition (fullscreen)\n   ───────────────────────────────────────────── */\n.b-spin-fade-enter-active,\n.b-spin-fade-leave-active {\n  transition: opacity var(--b-spin-transition-duration) ease;\n}\n\n.b-spin-fade-enter-from,\n.b-spin-fade-leave-to {\n  opacity: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-spin__dot {\n    animation: none;\n  }\n\n  .b-spin__dot-item {\n    animation: none;\n    opacity: 0.8;\n    transform: scale(1);\n  }\n\n  .b-spin-fade-enter-active,\n  .b-spin-fade-leave-active {\n    transition: none;\n  }\n\n  .b-spin__content {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system182.js","names":[],"sources":["../src/components/BSkeleton/BSkeleton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport BSkeletonAvatar from './BSkeletonAvatar.vue';\nimport type {\n  BSkeletonAvatarConfig,\n  BSkeletonParagraphConfig,\n  BSkeletonTitleConfig,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  active = false,\n  avatar = false,\n  loading = true,\n  paragraph = true,\n  round = false,\n  title = true,\n} = defineProps<{\n  /**\n   * Show the animated shimmer effect.\n   * @default false\n   */\n  active?: boolean;\n  /**\n   * Show the avatar placeholder. Pass an object to configure its shape/size/active.\n   * @default false\n   */\n  avatar?: boolean | BSkeletonAvatarConfig;\n  /**\n   * When `false`, renders the default slot (real content) instead of placeholders.\n   * @default true\n   */\n  loading?: boolean;\n  /**\n   * Show paragraph placeholder rows. Pass an object to configure rows / row widths.\n   * @default true\n   */\n  paragraph?: boolean | BSkeletonParagraphConfig;\n  /**\n   * Round corners on title and paragraph rows.\n   * @default false\n   */\n  round?: boolean;\n  /**\n   * Show the title bar placeholder. Pass an object to configure its width.\n   * @default true\n   */\n  title?: boolean | BSkeletonTitleConfig;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Real content rendered when `loading` is `false`. */\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Derived flags / configs\n// ─────────────────────────────────────────────\nconst showAvatar = computed(() => avatar !== false && avatar != null);\nconst showTitle = computed(() => title !== false && title != null);\nconst showParagraph = computed(() => paragraph !== false && paragraph != null);\n\nconst avatarConfig = computed<BSkeletonAvatarConfig>(() =>\n  typeof avatar === 'object' && avatar !== null ? avatar : {},\n);\n\nconst titleConfig = computed<BSkeletonTitleConfig>(() =>\n  typeof title === 'object' && title !== null ? title : {},\n);\n\nconst paragraphConfig = computed<BSkeletonParagraphConfig>(() =>\n  typeof paragraph === 'object' && paragraph !== null ? paragraph : {},\n);\n\nconst titleWidth = computed(() => normalizeWidth(titleConfig.value.width));\n\nconst paragraphRows = computed(() => {\n  const r = paragraphConfig.value.rows;\n  return typeof r === 'number' && r > 0 ? Math.floor(r) : 3;\n});\n\nconst paragraphRowWidths = computed<string[]>(() => {\n  const widths = paragraphConfig.value.width;\n  const rows = paragraphRows.value;\n  const out: string[] = [];\n  for (let i = 0; i < rows; i += 1) {\n    if (Array.isArray(widths)) {\n      const w = widths[i];\n      out.push(normalizeWidth(w) ?? '');\n    } else if (i === rows - 1) {\n      // Apply explicit width to the LAST row only when a single value is given.\n      const w = normalizeWidth(widths);\n      out.push(w ?? '61%');\n    } else {\n      out.push('');\n    }\n  }\n  return out;\n});\n\nfunction normalizeWidth(w: number | string | undefined): string | undefined {\n  if (w == null) return undefined;\n  if (typeof w === 'number') return `${w}px`;\n  return w;\n}\n\nconst rootClasses = computed(() => [\n  'b-skeleton',\n  {\n    'b-skeleton--active': active,\n    'b-skeleton--with-avatar': showAvatar.value,\n    'b-skeleton--round': round,\n  },\n]);\n</script>\n\n<template>\n  <div v-if=\"loading\" :class=\"rootClasses\" role=\"status\" aria-live=\"polite\" aria-label=\"Loading\">\n    <div v-if=\"showAvatar\" class=\"b-skeleton__header\">\n      <BSkeletonAvatar\n        :active=\"active || avatarConfig.active\"\n        :shape=\"avatarConfig.shape\"\n        :size=\"avatarConfig.size\"\n      />\n    </div>\n\n    <div class=\"b-skeleton__content\">\n      <h3\n        v-if=\"showTitle\"\n        class=\"b-skeleton__title\"\n        :style=\"titleWidth ? { width: titleWidth } : undefined\"\n        aria-hidden=\"true\"\n      />\n\n      <ul v-if=\"showParagraph\" class=\"b-skeleton__paragraph\" aria-hidden=\"true\">\n        <li\n          v-for=\"(w, i) in paragraphRowWidths\"\n          :key=\"i\"\n          class=\"b-skeleton__paragraph-row\"\n          :style=\"w ? { width: w } : undefined\"\n        />\n      </ul>\n    </div>\n  </div>\n\n  <template v-else>\n    <slot />\n  </template>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ─────────────────────────────────────────────\n   AntD design-token mapping:\n     gradientFromColor  → --b-skeleton-gradient-from-color\n     gradientToColor    → --b-skeleton-gradient-to-color\n     titleHeight        → --b-skeleton-title-height\n     paragraphLiHeight  → --b-skeleton-paragraph-li-height\n     paragraphMarginTop → --b-skeleton-paragraph-margin-top\n     blockRadius        → --b-skeleton-block-radius\n     borderRadius       → --b-skeleton-border-radius\n     borderRadiusSM     → --b-skeleton-border-radius-sm\n     controlHeight      → --b-skeleton-control-height\n     controlHeightLG    → --b-skeleton-control-height-lg\n     controlHeightSM    → --b-skeleton-control-height-sm\n     ─────────────────────────────────────────── */\n.b-skeleton {\n  --b-skeleton-gradient-from-color: oklch(93% 0 0); /* #f2f2f2 */\n  --b-skeleton-gradient-to-color: oklch(85% 0 0); /* #d9d9d9 */\n  --b-skeleton-title-height: 16px;\n  --b-skeleton-paragraph-li-height: 16px;\n  --b-skeleton-paragraph-margin-top: 28px;\n  --b-skeleton-paragraph-row-gap: 16px;\n  --b-skeleton-block-radius: 4px;\n  --b-skeleton-border-radius: 6px;\n  --b-skeleton-border-radius-sm: 4px;\n  --b-skeleton-control-height: 32px;\n  --b-skeleton-control-height-lg: 40px;\n  --b-skeleton-control-height-sm: 24px;\n  --b-skeleton-avatar-size-default: 32px;\n  --b-skeleton-avatar-size-small: 24px;\n  --b-skeleton-avatar-size-large: 40px;\n  --b-skeleton-image-size: 96px;\n  --b-skeleton-button-min-width: 64px;\n  --b-skeleton-input-min-width: 160px;\n  --b-skeleton-animation-duration: 1.4s;\n  --b-skeleton-content-gap: 16px;\n}\n\n/* Dark mode (explicit + system) */\n[data-prefers-color='dark'] .b-skeleton,\n[data-prefers-color='dark'] .b-skeleton-element {\n  --b-skeleton-gradient-from-color: oklch(28% 0 0);\n  --b-skeleton-gradient-to-color: oklch(35% 0 0);\n}\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-skeleton,\n  [data-prefers-color='system'] .b-skeleton-element {\n    --b-skeleton-gradient-from-color: oklch(28% 0 0);\n    --b-skeleton-gradient-to-color: oklch(35% 0 0);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Layout\n   ───────────────────────────────────────────── */\n.b-skeleton {\n  display: flex;\n  width: 100%;\n  gap: var(--b-skeleton-content-gap);\n  box-sizing: border-box;\n}\n\n.b-skeleton__header {\n  flex-shrink: 0;\n}\n\n.b-skeleton__content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Title\n   ───────────────────────────────────────────── */\n.b-skeleton__title {\n  width: 38%;\n  height: var(--b-skeleton-title-height);\n  margin: 0;\n  background: var(--b-skeleton-gradient-from-color);\n  border-radius: var(--b-skeleton-block-radius);\n}\n\n.b-skeleton--with-avatar .b-skeleton__title {\n  width: 50%;\n}\n\n.b-skeleton--round .b-skeleton__title {\n  border-radius: 100px;\n}\n\n/* ─────────────────────────────────────────────\n   Paragraph\n   ───────────────────────────────────────────── */\n.b-skeleton__paragraph {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  margin-top: var(--b-skeleton-paragraph-margin-top);\n}\n\n.b-skeleton__title + .b-skeleton__paragraph {\n  margin-top: var(--b-skeleton-paragraph-margin-top);\n}\n\n.b-skeleton__paragraph-row {\n  width: 100%;\n  height: var(--b-skeleton-paragraph-li-height);\n  background: var(--b-skeleton-gradient-from-color);\n  border-radius: var(--b-skeleton-block-radius);\n}\n\n.b-skeleton__paragraph-row + .b-skeleton__paragraph-row {\n  margin-top: var(--b-skeleton-paragraph-row-gap);\n}\n\n.b-skeleton--round .b-skeleton__paragraph-row {\n  border-radius: 100px;\n}\n\n/* ─────────────────────────────────────────────\n   Active shimmer animation\n   ───────────────────────────────────────────── */\n.b-skeleton--active .b-skeleton__title,\n.b-skeleton--active .b-skeleton__paragraph-row {\n  background: linear-gradient(\n    90deg,\n    var(--b-skeleton-gradient-from-color) 25%,\n    var(--b-skeleton-gradient-to-color) 37%,\n    var(--b-skeleton-gradient-from-color) 63%\n  );\n  background-size: 400% 100%;\n  animation: b-skeleton-loading var(--b-skeleton-animation-duration) ease infinite;\n}\n\n@keyframes b-skeleton-loading {\n  0% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0 50%;\n  }\n}\n\n/* Shared active shimmer for sub-components (Avatar, Button, Input, Image, Node) */\n.b-skeleton-element--active {\n  background: linear-gradient(\n    90deg,\n    var(--b-skeleton-gradient-from-color, oklch(93% 0 0)) 25%,\n    var(--b-skeleton-gradient-to-color, oklch(85% 0 0)) 37%,\n    var(--b-skeleton-gradient-from-color, oklch(93% 0 0)) 63%\n  );\n  background-size: 400% 100%;\n  animation: b-skeleton-loading var(--b-skeleton-animation-duration, 1.4s) ease infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-skeleton--active .b-skeleton__title,\n  .b-skeleton--active .b-skeleton__paragraph-row,\n  .b-skeleton-element--active {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system183.js

@@ -1,111 +1,38 @@
-import { BCommonSize as e, BIconSize as t, BStepsDirection as n, BStepsLabelPlacement as r, BStepsStatus as i, BStepsType as a } from "./design-system3.js";
-import o from "./design-system27.js";
-import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, defineComponent as p, mergeModels as m, normalizeClass as h, normalizeStyle as g, openBlock as _, renderList as v, toDisplayString as y, toRefs as b, unref as x, useModel as S } from "vue";
-//#region src/components/BSteps/BSteps.vue?vue&type=script&setup=true&lang.ts
-var C = ["data-status"], w = [
-	"role",
-	"tabindex",
-	"aria-disabled",
-	"aria-current",
-	"onClick",
-	"onKeydown"
-], T = { class: "b:flex b:items-center b:gap-x-2" }, E = {
-	key: 0,
-	"aria-hidden": "true",
-	class: "b-steps__tail"
-}, D = /* @__PURE__ */ p({
-	__name: "BSteps",
-	props: /* @__PURE__ */ m({
-		items: { default: () => [] },
-		status: { default: i.Process },
-		direction: { default: n.Horizontal },
-		size: { default: e.Medium },
-		labelPlacement: { default: r.Horizontal },
-		type: { default: a.Default }
-	}, {
-		modelValue: { default: 0 },
-		modelModifiers: {}
-	}),
-	emits: /* @__PURE__ */ m(["change"], ["update:modelValue"]),
-	setup(p, { emit: m }) {
-		let { items: D, status: O, direction: k, size: A, labelPlacement: j, type: M } = b(p), N = S(p, "modelValue"), P = m, F = c(() => A.value === e.Small ? e.Small : e.Medium), I = c(() => F.value === e.Small ? t.Small : t.Medium), L = c(() => ({
-			"--b-steps-icon-size": F.value === e.Small ? "1.5rem" : "2rem",
-			"--b-steps-gap": F.value === e.Small ? "0.5rem" : "0.75rem"
-		})), R = c(() => F.value === e.Small ? "b:text-sm" : "b:text-base"), z = c(() => F.value === e.Small ? "b:text-xs" : "b:text-sm"), B = c(() => M.value === a.Navigation), V = (e, t) => e.status ? e.status : t === N.value ? O.value || i.Process : t < N.value ? i.Finish : i.Wait, H = (e) => {
-			switch (e) {
-				case i.Finish:
-				case i.Process: return "var(--b-color-primary)";
-				case i.Error: return "var(--b-color-failure)";
-				case i.Wait:
-				default: return "var(--b-color-zinc-200)";
+import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, openBlock as i } from "vue";
+//#region src/components/BSkeleton/BSkeletonButton.vue?vue&type=script&setup=true&lang.ts
+var a = /* @__PURE__ */ n({
+	__name: "BSkeletonButton",
+	props: {
+		active: {
+			type: Boolean,
+			default: !1
+		},
+		block: {
+			type: Boolean,
+			default: !1
+		},
+		shape: { default: "default" },
+		size: { default: "default" }
+	},
+	setup(n) {
+		let a = e(() => [
+			"b-skeleton-element",
+			"b-skeleton-button",
+			`b-skeleton-button--${n.shape}`,
+			`b-skeleton-button--${n.size}`,
+			{
+				"b-skeleton-button--block": n.block,
+				"b-skeleton-element--active": n.active
 			}
-		}, U = (e, t) => {
-			!B.value || e.disabled || (N.value = t, P("change", t));
-		}, W = (e, t, n) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), U(t, n));
-		}, G = (e) => ({
-			"b:border-secondary b:bg-white b:text-secondary": e === i.Wait,
-			"b:border-primary b:bg-primary b:text-white": e === i.Process,
-			"b:border-primary b:bg-white b:text-primary": e === i.Finish,
-			"b:border-failure b:bg-white b:text-failure": e === i.Error
-		}), K = (e) => ({
-			"b:text-black-base": e === i.Process || e === i.Finish,
-			"b:text-failure": e === i.Error,
-			"b:text-black/65": e === i.Wait
-		}), q = (e) => ({
-			"b:text-black/65": e !== i.Error,
-			"b:text-failure": e === i.Error
-		});
-		return (t, c) => (_(), d("ol", {
-			class: h(["b-steps", [{
-				"b-steps--horizontal": x(k) === x(n).Horizontal,
-				"b-steps--vertical": x(k) === x(n).Vertical,
-				"b-steps--label-vertical": x(k) === x(n).Horizontal && x(j) === x(r).Vertical,
-				"b-steps--navigation": x(M) === x(a).Navigation,
-				"b-steps--inline": x(M) === x(a).Inline
-			}]]),
-			style: g(L.value)
-		}, [(_(!0), d(s, null, v(x(D), (t, a) => (_(), d("li", {
-			key: `${t.title}-${a}`,
-			class: h(["b-steps__item", [{ "b:opacity-50": t.disabled }, { "b-steps__item--clickable": B.value && !t.disabled }]]),
-			"data-status": V(t, a),
-			style: g({ "--b-steps-tail-color": H(V(t, a)) })
-		}, [f("div", {
-			class: "b-steps__item-inner",
-			role: B.value && !t.disabled ? "button" : void 0,
-			tabindex: B.value && !t.disabled ? 0 : void 0,
-			"aria-disabled": t.disabled ? "true" : void 0,
-			"aria-current": a === N.value ? "step" : void 0,
-			onClick: (e) => U(t, a),
-			onKeydown: (e) => W(e, t, a)
-		}, [f("div", { class: h(["b-steps__icon b:flex b:items-center b:justify-center b:rounded-full b:border", [G(V(t, a)), {
-			"b:h-6 b:w-6": F.value === x(e).Small,
-			"b:h-8 b:w-8": F.value === x(e).Medium
-		}]]) }, [t.icon ? (_(), l(o, {
-			key: 0,
-			icon: t.icon,
-			size: I.value
-		}, null, 8, ["icon", "size"])) : V(t, a) === x(i).Finish ? (_(), l(o, {
-			key: 1,
-			icon: "check",
-			size: I.value
-		}, null, 8, ["size"])) : V(t, a) === x(i).Error ? (_(), l(o, {
-			key: 2,
-			icon: "xmark",
-			size: I.value
-		}, null, 8, ["size"])) : (_(), d("span", {
-			key: 3,
-			class: h(R.value)
-		}, y(a + 1), 3))], 2), f("div", { class: h(["b-steps__content b:flex b:flex-col b:gap-y-1", [{ "b:items-center b:text-center": x(k) === x(n).Horizontal && x(j) === x(r).Vertical }]]) }, [f("div", T, [f("span", { class: h(["b:font-medium", [R.value, K(V(t, a))]]) }, y(t.title), 3), t.subTitle ? (_(), d("span", {
-			key: 0,
-			class: h(["b:text-xs b:text-black/65", K(V(t, a))])
-		}, y(t.subTitle), 3)) : u("", !0)]), t.description ? (_(), d("p", {
-			key: 0,
-			class: h(["b:leading-snug", [z.value, q(V(t, a))]])
-		}, y(t.description), 3)) : u("", !0)], 2)], 40, w), x(k) === x(n).Horizontal && a < x(D).length - 1 ? (_(), d("span", E)) : u("", !0)], 14, C))), 128))], 6));
+		]);
+		return (e, n) => (i(), t("span", {
+			class: r(a.value),
+			role: "presentation",
+			"aria-hidden": "true"
+		}, null, 2));
 	}
 });
 //#endregion
-export { D as default };
+export { a as default };
 
 //# sourceMappingURL=design-system183.js.map

package/dist/design-system183.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system183.js","names":[],"sources":["../src/components/BSteps/BSteps.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { useModel as _useModel, mergeModels as _mergeModels, defineComponent as _defineComponent } from 'vue'\nimport { unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle } from \"vue\"\n\nconst _hoisted_1 = [\"data-status\"]\nconst _hoisted_2 = [\"role\", \"tabindex\", \"aria-disabled\", \"aria-current\", \"onClick\", \"onKeydown\"]\nconst _hoisted_3 = { class: \"b:flex b:items-center b:gap-x-2\" }\nconst _hoisted_4 = {\n  key: 0,\n  \"aria-hidden\": \"true\",\n  class: \"b-steps__tail\"\n}\n\nimport BIcon from '@/components/BIcon/BIcon.vue';\nimport {\n  BCommonSize,\n  BIconSize,\n  BStepsDirection,\n  BStepsLabelPlacement,\n  BStepsStatus,\n  BStepsType,\n  type BStepItem,\n} from '@/types.ts';\nimport { computed, toRefs } from 'vue';\n\nexport interface BStepsProps {\n  /**\n   * The step items to render.\n   */\n  items?: BStepItem[];\n  /**\n   * Status applied to the current step if not overridden by the item.\n   */\n  status?: `${BStepsStatus}`;\n  /**\n   * Layout direction.\n   */\n  direction?: `${BStepsDirection}`;\n  /**\n   * Size of the step icons and text.\n   */\n  size?: `${BCommonSize}`;\n  /**\n   * Placement of labels for horizontal steps.\n   */\n  labelPlacement?: `${BStepsLabelPlacement}`;\n  /**\n   * Step type styling.\n   */\n  type?: `${BStepsType}`;\n}\n\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BSteps',\n  props: /*@__PURE__*/_mergeModels({\n    items: { default: () => [] },\n    status: { default: BStepsStatus.Process },\n    direction: { default: BStepsDirection.Horizontal },\n    size: { default: BCommonSize.Medium },\n    labelPlacement: { default: BStepsLabelPlacement.Horizontal },\n    type: { default: BStepsType.Default }\n  }, {\n    \"modelValue\": { default: 0 },\n    \"modelModifiers\": {},\n  }),\n  emits: /*@__PURE__*/_mergeModels([\"change\"], [\"update:modelValue\"]),\n  setup(__props: any, { emit: __emit }) {\n\nconst props = __props;\nconst { items, status, direction, size, labelPlacement, type } = toRefs(props);\nconst model = _useModel<number>(__props, \"modelValue\");\n\nconst emit = __emit;\n\nconst normalizedSize = computed(() =>\n  size.value === BCommonSize.Small ? BCommonSize.Small : BCommonSize.Medium,\n);\nconst iconSize = computed(() =>\n  normalizedSize.value === BCommonSize.Small ? BIconSize.Small : BIconSize.Medium,\n);\n\nconst rootStyle = computed(() => ({\n  '--b-steps-icon-size': normalizedSize.value === BCommonSize.Small ? '1.5rem' : '2rem',\n  '--b-steps-gap': normalizedSize.value === BCommonSize.Small ? '0.5rem' : '0.75rem',\n}));\n\nconst titleSizeClass = computed(() =>\n  normalizedSize.value === BCommonSize.Small ? 'b:text-sm' : 'b:text-base',\n);\nconst descriptionSizeClass = computed(() =>\n  normalizedSize.value === BCommonSize.Small ? 'b:text-xs' : 'b:text-sm',\n);\n\nconst isClickable = computed(() => type.value === BStepsType.Navigation);\n\nconst getStepStatus = (item: BStepItem, index: number) => {\n  if (item.status) {\n    return item.status;\n  }\n  if (index === model.value) {\n    return status.value || BStepsStatus.Process;\n  }\n  if (index < model.value) {\n    return BStepsStatus.Finish;\n  }\n  return BStepsStatus.Wait;\n};\n\nconst getTailColor = (status: `${BStepsStatus}`) => {\n  switch (status) {\n    case BStepsStatus.Finish:\n    case BStepsStatus.Process:\n      return 'var(--b-color-primary)';\n    case BStepsStatus.Error:\n      return 'var(--b-color-failure)';\n    case BStepsStatus.Wait:\n    default:\n      return 'var(--b-color-zinc-200)';\n  }\n};\n\nconst onStepClick = (item: BStepItem, index: number) => {\n  if (!isClickable.value || item.disabled) {\n    return;\n  }\n  model.value = index;\n  emit('change', index);\n};\n\nconst onStepKeydown = (event: KeyboardEvent, item: BStepItem, index: number) => {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    onStepClick(item, index);\n  }\n};\n\nconst iconClass = (status: `${BStepsStatus}`) => ({\n  'b:border-secondary b:bg-white b:text-secondary': status === BStepsStatus.Wait,\n  'b:border-primary b:bg-primary b:text-white': status === BStepsStatus.Process,\n  'b:border-primary b:bg-white b:text-primary': status === BStepsStatus.Finish,\n  'b:border-failure b:bg-white b:text-failure': status === BStepsStatus.Error,\n});\nconst titleClass = (status: `${BStepsStatus}`) => ({\n  'b:text-black-base': status === BStepsStatus.Process || status === BStepsStatus.Finish,\n  'b:text-failure': status === BStepsStatus.Error,\n  'b:text-black/65': status === BStepsStatus.Wait,\n});\nconst descriptionClass = (status: `${BStepsStatus}`) => ({\n  'b:text-black/65': status !== BStepsStatus.Error,\n  'b:text-failure': status === BStepsStatus.Error,\n});\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"ol\", {\n    class: _normalizeClass([\"b-steps\", [\n      {\n        'b-steps--horizontal': _unref(direction) === _unref(BStepsDirection).Horizontal,\n        'b-steps--vertical': _unref(direction) === _unref(BStepsDirection).Vertical,\n        'b-steps--label-vertical':\n          _unref(direction) === _unref(BStepsDirection).Horizontal &&\n          _unref(labelPlacement) === _unref(BStepsLabelPlacement).Vertical,\n        'b-steps--navigation': _unref(type) === _unref(BStepsType).Navigation,\n        'b-steps--inline': _unref(type) === _unref(BStepsType).Inline,\n      },\n    ]]),\n    style: _normalizeStyle(rootStyle.value)\n  }, [\n    (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_unref(items), (item, index) => {\n      return (_openBlock(), _createElementBlock(\"li\", {\n        key: `${item.title}-${index}`,\n        class: _normalizeClass([\"b-steps__item\", [\n        { 'b:opacity-50': item.disabled },\n        { 'b-steps__item--clickable': isClickable.value && !item.disabled },\n      ]]),\n        \"data-status\": getStepStatus(item, index),\n        style: _normalizeStyle({ '--b-steps-tail-color': getTailColor(getStepStatus(item, index)) })\n      }, [\n        _createElementVNode(\"div\", {\n          class: \"b-steps__item-inner\",\n          role: isClickable.value && !item.disabled ? 'button' : undefined,\n          tabindex: isClickable.value && !item.disabled ? 0 : undefined,\n          \"aria-disabled\": item.disabled ? 'true' : undefined,\n          \"aria-current\": index === model.value ? 'step' : undefined,\n          onClick: ($event: any) => (onStepClick(item, index)),\n          onKeydown: ($event: any) => (onStepKeydown($event, item, index))\n        }, [\n          _createElementVNode(\"div\", {\n            class: _normalizeClass([\"b-steps__icon b:flex b:items-center b:justify-center b:rounded-full b:border\", [\n            iconClass(getStepStatus(item, index)),\n            {\n              'b:h-6 b:w-6': normalizedSize.value === _unref(BCommonSize).Small,\n              'b:h-8 b:w-8': normalizedSize.value === _unref(BCommonSize).Medium,\n            },\n          ]])\n          }, [\n            (item.icon)\n              ? (_openBlock(), _createBlock(BIcon, {\n                  key: 0,\n                  icon: item.icon,\n                  size: iconSize.value\n                }, null, 8, [\"icon\", \"size\"]))\n              : (getStepStatus(item, index) === _unref(BStepsStatus).Finish)\n                ? (_openBlock(), _createBlock(BIcon, {\n                    key: 1,\n                    icon: \"check\",\n                    size: iconSize.value\n                  }, null, 8, [\"size\"]))\n                : (getStepStatus(item, index) === _unref(BStepsStatus).Error)\n                  ? (_openBlock(), _createBlock(BIcon, {\n                      key: 2,\n                      icon: \"xmark\",\n                      size: iconSize.value\n                    }, null, 8, [\"size\"]))\n                  : (_openBlock(), _createElementBlock(\"span\", {\n                      key: 3,\n                      class: _normalizeClass(titleSizeClass.value)\n                    }, _toDisplayString(index + 1), 3))\n          ], 2),\n          _createElementVNode(\"div\", {\n            class: _normalizeClass([\"b-steps__content b:flex b:flex-col b:gap-y-1\", [\n            {\n              'b:items-center b:text-center':\n                _unref(direction) === _unref(BStepsDirection).Horizontal &&\n                _unref(labelPlacement) === _unref(BStepsLabelPlacement).Vertical,\n            },\n          ]])\n          }, [\n            _createElementVNode(\"div\", _hoisted_3, [\n              _createElementVNode(\"span\", {\n                class: _normalizeClass([\"b:font-medium\", [titleSizeClass.value, titleClass(getStepStatus(item, index))]])\n              }, _toDisplayString(item.title), 3),\n              (item.subTitle)\n                ? (_openBlock(), _createElementBlock(\"span\", {\n                    key: 0,\n                    class: _normalizeClass([\"b:text-xs b:text-black/65\", titleClass(getStepStatus(item, index))])\n                  }, _toDisplayString(item.subTitle), 3))\n                : _createCommentVNode(\"\", true)\n            ]),\n            (item.description)\n              ? (_openBlock(), _createElementBlock(\"p\", {\n                  key: 0,\n                  class: _normalizeClass([\"b:leading-snug\", [descriptionSizeClass.value, descriptionClass(getStepStatus(item, index))]])\n                }, _toDisplayString(item.description), 3))\n              : _createCommentVNode(\"\", true)\n          ], 2)\n        ], 40, _hoisted_2),\n        (_unref(direction) === _unref(BStepsDirection).Horizontal && index < _unref(items).length - 1)\n          ? (_openBlock(), _createElementBlock(\"span\", _hoisted_4))\n          : _createCommentVNode(\"\", true)\n      ], 14, _hoisted_1))\n    }), 128))\n  ], 6))\n}\n}\n\n})"],"mappings":";;;;AAGA,IAAM,IAAa,CAAC,cAAc,EAC5B,IAAa;CAAC;CAAQ;CAAY;CAAiB;CAAgB;CAAW;CAAY,EAC1F,IAAa,EAAE,OAAO,mCAAmC,EACzD,IAAa;CACjB,KAAK;CACL,eAAe;CACf,OAAO;CACR,EA0CD,IAA4B,kBAAiB;CAC3C,QAAQ;CACR,OAAoB,kBAAa;EAC/B,OAAO,EAAE,eAAe,EAAE,EAAE;EAC5B,QAAQ,EAAE,SAAS,EAAa,SAAS;EACzC,WAAW,EAAE,SAAS,EAAgB,YAAY;EAClD,MAAM,EAAE,SAAS,EAAY,QAAQ;EACrC,gBAAgB,EAAE,SAAS,EAAqB,YAAY;EAC5D,MAAM,EAAE,SAAS,EAAW,SAAS;EACtC,EAAE;EACD,YAAc,EAAE,SAAS,GAAG;EAC5B,gBAAkB,EAAE;EACrB,CAAC;CACF,OAAoB,kBAAa,CAAC,SAAS,EAAE,CAAC,oBAAoB,CAAC;CACnE,MAAM,GAAc,EAAE,MAAM,KAAU;EAGxC,IAAM,EAAE,UAAO,WAAQ,cAAW,SAAM,mBAAgB,YAAS,EADnD,EACgE,EACxE,IAAQ,EAAkB,GAAS,aAAa,EAEhD,IAAO,GAEP,IAAiB,QACrB,EAAK,UAAU,EAAY,QAAQ,EAAY,QAAQ,EAAY,OACpE,EACK,IAAW,QACf,EAAe,UAAU,EAAY,QAAQ,EAAU,QAAQ,EAAU,OAC1E,EAEK,IAAY,SAAgB;GAChC,uBAAuB,EAAe,UAAU,EAAY,QAAQ,WAAW;GAC/E,iBAAiB,EAAe,UAAU,EAAY,QAAQ,WAAW;GAC1E,EAAE,EAEG,IAAiB,QACrB,EAAe,UAAU,EAAY,QAAQ,cAAc,cAC5D,EACK,IAAuB,QAC3B,EAAe,UAAU,EAAY,QAAQ,cAAc,YAC5D,EAEK,IAAc,QAAe,EAAK,UAAU,EAAW,WAAW,EAElE,KAAiB,GAAiB,MAClC,EAAK,SACA,EAAK,SAEV,MAAU,EAAM,QACX,EAAO,SAAS,EAAa,UAElC,IAAQ,EAAM,QACT,EAAa,SAEf,EAAa,MAGhB,KAAgB,MAA8B;AAClD,WAAQ,GAAR;IACE,KAAK,EAAa;IAClB,KAAK,EAAa,QAChB,QAAO;IACT,KAAK,EAAa,MAChB,QAAO;IACT,KAAK,EAAa;IAClB,QACE,QAAO;;KAIP,KAAe,GAAiB,MAAkB;AAClD,IAAC,EAAY,SAAS,EAAK,aAG/B,EAAM,QAAQ,GACd,EAAK,UAAU,EAAM;KAGjB,KAAiB,GAAsB,GAAiB,MAAkB;AAC9E,IAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,gBAAgB,EACtB,EAAY,GAAM,EAAM;KAItB,KAAa,OAA+B;GAChD,kDAAkD,MAAW,EAAa;GAC1E,8CAA8C,MAAW,EAAa;GACtE,8CAA8C,MAAW,EAAa;GACtE,8CAA8C,MAAW,EAAa;GACvE,GACK,KAAc,OAA+B;GACjD,qBAAqB,MAAW,EAAa,WAAW,MAAW,EAAa;GAChF,kBAAkB,MAAW,EAAa;GAC1C,mBAAmB,MAAW,EAAa;GAC5C,GACK,KAAoB,OAA+B;GACvD,mBAAmB,MAAW,EAAa;GAC3C,kBAAkB,MAAW,EAAa;GAC3C;AAED,UAAQ,GAAU,OACR,GAAY,EAAE,EAAoB,MAAM;GAC9C,OAAO,EAAgB,CAAC,WAAW,CACjC;IACE,uBAAuB,EAAO,EAAU,KAAK,EAAO,EAAgB,CAAC;IACrE,qBAAqB,EAAO,EAAU,KAAK,EAAO,EAAgB,CAAC;IACnE,2BACE,EAAO,EAAU,KAAK,EAAO,EAAgB,CAAC,cAC9C,EAAO,EAAe,KAAK,EAAO,EAAqB,CAAC;IAC1D,uBAAuB,EAAO,EAAK,KAAK,EAAO,EAAW,CAAC;IAC3D,mBAAmB,EAAO,EAAK,KAAK,EAAO,EAAW,CAAC;IACxD,CACF,CAAC,CAAC;GACH,OAAO,EAAgB,EAAU,MAAM;GACxC,EAAE,EACA,EAAW,GAAK,EAAE,EAAoB,GAAW,MAAM,EAAY,EAAO,EAAM,GAAG,GAAM,OAChF,GAAY,EAAE,EAAoB,MAAM;GAC9C,KAAK,GAAG,EAAK,MAAM,GAAG;GACtB,OAAO,EAAgB,CAAC,iBAAiB,CACzC,EAAE,gBAAgB,EAAK,UAAU,EACjC,EAAE,4BAA4B,EAAY,SAAS,CAAC,EAAK,UAAU,CACpE,CAAC,CAAC;GACD,eAAe,EAAc,GAAM,EAAM;GACzC,OAAO,EAAgB,EAAE,wBAAwB,EAAa,EAAc,GAAM,EAAM,CAAC,EAAE,CAAC;GAC7F,EAAE,CACD,EAAoB,OAAO;GACzB,OAAO;GACP,MAAM,EAAY,SAAS,CAAC,EAAK,WAAW,WAAW,KAAA;GACvD,UAAU,EAAY,SAAS,CAAC,EAAK,WAAW,IAAI,KAAA;GACpD,iBAAiB,EAAK,WAAW,SAAS,KAAA;GAC1C,gBAAgB,MAAU,EAAM,QAAQ,SAAS,KAAA;GACjD,UAAU,MAAiB,EAAY,GAAM,EAAM;GACnD,YAAY,MAAiB,EAAc,GAAQ,GAAM,EAAM;GAChE,EAAE,CACD,EAAoB,OAAO,EACzB,OAAO,EAAgB,CAAC,gFAAgF,CACxG,EAAU,EAAc,GAAM,EAAM,CAAC,EACrC;GACE,eAAe,EAAe,UAAU,EAAO,EAAY,CAAC;GAC5D,eAAe,EAAe,UAAU,EAAO,EAAY,CAAC;GAC7D,CACF,CAAC,CAAC,EACF,EAAE,CACA,EAAK,QACD,GAAY,EAAE,EAAa,GAAO;GACjC,KAAK;GACL,MAAM,EAAK;GACX,MAAM,EAAS;GAChB,EAAE,MAAM,GAAG,CAAC,QAAQ,OAAO,CAAC,IAC5B,EAAc,GAAM,EAAM,KAAK,EAAO,EAAa,CAAC,UAClD,GAAY,EAAE,EAAa,GAAO;GACjC,KAAK;GACL,MAAM;GACN,MAAM,EAAS;GAChB,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC,IACpB,EAAc,GAAM,EAAM,KAAK,EAAO,EAAa,CAAC,SAClD,GAAY,EAAE,EAAa,GAAO;GACjC,KAAK;GACL,MAAM;GACN,MAAM,EAAS;GAChB,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC,KACpB,GAAY,EAAE,EAAoB,QAAQ;GACzC,KAAK;GACL,OAAO,EAAgB,EAAe,MAAM;GAC7C,EAAE,EAAiB,IAAQ,EAAE,EAAE,EAAE,EAC3C,EAAE,EAAE,EACL,EAAoB,OAAO,EACzB,OAAO,EAAgB,CAAC,gDAAgD,CACxE,EACE,gCACE,EAAO,EAAU,KAAK,EAAO,EAAgB,CAAC,cAC9C,EAAO,EAAe,KAAK,EAAO,EAAqB,CAAC,UAC3D,CACF,CAAC,CAAC,EACF,EAAE,CACD,EAAoB,OAAO,GAAY,CACrC,EAAoB,QAAQ,EAC1B,OAAO,EAAgB,CAAC,iBAAiB,CAAC,EAAe,OAAO,EAAW,EAAc,GAAM,EAAM,CAAC,CAAC,CAAC,CAAC,EAC1G,EAAE,EAAiB,EAAK,MAAM,EAAE,EAAE,EAClC,EAAK,YACD,GAAY,EAAE,EAAoB,QAAQ;GACzC,KAAK;GACL,OAAO,EAAgB,CAAC,6BAA6B,EAAW,EAAc,GAAM,EAAM,CAAC,CAAC,CAAC;GAC9F,EAAE,EAAiB,EAAK,SAAS,EAAE,EAAE,IACtC,EAAoB,IAAI,GAAK,CAClC,CAAC,EACD,EAAK,eACD,GAAY,EAAE,EAAoB,KAAK;GACtC,KAAK;GACL,OAAO,EAAgB,CAAC,kBAAkB,CAAC,EAAqB,OAAO,EAAiB,EAAc,GAAM,EAAM,CAAC,CAAC,CAAC,CAAC;GACvH,EAAE,EAAiB,EAAK,YAAY,EAAE,EAAE,IACzC,EAAoB,IAAI,GAAK,CAClC,EAAE,EAAE,CACN,EAAE,IAAI,EAAW,EACjB,EAAO,EAAU,KAAK,EAAO,EAAgB,CAAC,cAAc,IAAQ,EAAO,EAAM,CAAC,SAAS,KACvF,GAAY,EAAE,EAAoB,QAAQ,EAAW,IACtD,EAAoB,IAAI,GAAK,CAClC,EAAE,IAAI,EAAW,EAClB,EAAE,IAAI,EACT,EAAE,EAAE;;CAIN,CAAA"}
+{"version":3,"file":"design-system183.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonButton.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nimport { computed } from 'vue';\nimport type { BSkeletonButtonShape, BSkeletonButtonSize } from './types';\n\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BSkeletonButton',\n  props: {\n    active: { type: Boolean, default: false },\n    block: { type: Boolean, default: false },\n    shape: { default: 'default' },\n    size: { default: 'default' }\n  },\n  setup(__props: any) {\n\n\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-button',\n  `b-skeleton-button--${__props.shape}`,\n  `b-skeleton-button--${__props.size}`,\n  {\n    'b-skeleton-button--block': __props.block,\n    'b-skeleton-element--active': __props.active,\n  },\n]);\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"span\", {\n    class: _normalizeClass(classes.value),\n    role: \"presentation\",\n    \"aria-hidden\": \"true\"\n  }, null, 2))\n}\n}\n\n})"],"mappings":";;AAOA,IAAA,IAA4B,kBAAiB;CAC3C,QAAQ;CACR,OAAO;EACL,QAAQ;GAAE,MAAM;GAAS,SAAS;GAAO;EACzC,OAAO;GAAE,MAAM;GAAS,SAAS;GAAO;EACxC,OAAO,EAAE,SAAS,WAAW;EAC7B,MAAM,EAAE,SAAS,WAAW;EAC7B;CACD,MAAM,GAAc;EAItB,IAAM,IAAU,QAAe;GAC7B;GACA;GACA,sBAAsB,EAAQ;GAC9B,sBAAsB,EAAQ;GAC9B;IACE,4BAA4B,EAAQ;IACpC,8BAA8B,EAAQ;IACvC;GACF,CAAC;AAEF,UAAQ,GAAU,OACR,GAAY,EAAE,EAAoB,QAAQ;GAChD,OAAO,EAAgB,EAAQ,MAAM;GACrC,MAAM;GACN,eAAe;GAChB,EAAE,MAAM,EAAE;;CAIZ,CAAA"}

package/dist/design-system185.js

@@ -1,9 +1,8 @@
-import e from "./design-system14.js";
-import t from "./design-system183.js";
+import e from "./design-system183.js";
 /* empty css                 */
-//#region src/components/BSteps/BSteps.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-75d0dd09"]]);
+//#region src/components/BSkeleton/BSkeletonButton.vue
+var t = e;
 //#endregion
-export { n as default };
+export { t as default };
 
 //# sourceMappingURL=design-system185.js.map

package/dist/design-system185.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system185.js","names":[],"sources":["../src/components/BSteps/BSteps.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport BIcon from '@/components/BIcon/BIcon.vue';\nimport {\n  BCommonSize,\n  BIconSize,\n  BStepsDirection,\n  BStepsLabelPlacement,\n  BStepsStatus,\n  BStepsType,\n  type BStepItem,\n} from '@/types.ts';\nimport { computed, toRefs } from 'vue';\n\nexport interface BStepsProps {\n  /**\n   * The step items to render.\n   */\n  items?: BStepItem[];\n  /**\n   * Status applied to the current step if not overridden by the item.\n   */\n  status?: `${BStepsStatus}`;\n  /**\n   * Layout direction.\n   */\n  direction?: `${BStepsDirection}`;\n  /**\n   * Size of the step icons and text.\n   */\n  size?: `${BCommonSize}`;\n  /**\n   * Placement of labels for horizontal steps.\n   */\n  labelPlacement?: `${BStepsLabelPlacement}`;\n  /**\n   * Step type styling.\n   */\n  type?: `${BStepsType}`;\n}\n\nconst props = withDefaults(defineProps<BStepsProps>(), {\n  items: () => [],\n  status: BStepsStatus.Process,\n  direction: BStepsDirection.Horizontal,\n  size: BCommonSize.Medium,\n  labelPlacement: BStepsLabelPlacement.Horizontal,\n  type: BStepsType.Default,\n});\nconst { items, status, direction, size, labelPlacement, type } = toRefs(props);\nconst model = defineModel<number>({ default: 0 });\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the current step changes via user interaction.\n   */\n  change: [value: number];\n}>();\n\nconst normalizedSize = computed(() =>\n  size.value === BCommonSize.Small ? BCommonSize.Small : BCommonSize.Medium,\n);\nconst iconSize = computed(() =>\n  normalizedSize.value === BCommonSize.Small ? BIconSize.Small : BIconSize.Medium,\n);\n\nconst rootStyle = computed(() => ({\n  '--b-steps-icon-size': normalizedSize.value === BCommonSize.Small ? '1.5rem' : '2rem',\n  '--b-steps-gap': normalizedSize.value === BCommonSize.Small ? '0.5rem' : '0.75rem',\n}));\n\nconst titleSizeClass = computed(() =>\n  normalizedSize.value === BCommonSize.Small ? 'b:text-sm' : 'b:text-base',\n);\nconst descriptionSizeClass = computed(() =>\n  normalizedSize.value === BCommonSize.Small ? 'b:text-xs' : 'b:text-sm',\n);\n\nconst isClickable = computed(() => type.value === BStepsType.Navigation);\n\nconst getStepStatus = (item: BStepItem, index: number) => {\n  if (item.status) {\n    return item.status;\n  }\n  if (index === model.value) {\n    return status.value || BStepsStatus.Process;\n  }\n  if (index < model.value) {\n    return BStepsStatus.Finish;\n  }\n  return BStepsStatus.Wait;\n};\n\nconst getTailColor = (status: `${BStepsStatus}`) => {\n  switch (status) {\n    case BStepsStatus.Finish:\n    case BStepsStatus.Process:\n      return 'var(--b-color-primary)';\n    case BStepsStatus.Error:\n      return 'var(--b-color-failure)';\n    case BStepsStatus.Wait:\n    default:\n      return 'var(--b-color-zinc-200)';\n  }\n};\n\nconst onStepClick = (item: BStepItem, index: number) => {\n  if (!isClickable.value || item.disabled) {\n    return;\n  }\n  model.value = index;\n  emit('change', index);\n};\n\nconst onStepKeydown = (event: KeyboardEvent, item: BStepItem, index: number) => {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    onStepClick(item, index);\n  }\n};\n\nconst iconClass = (status: `${BStepsStatus}`) => ({\n  'b:border-secondary b:bg-white b:text-secondary': status === BStepsStatus.Wait,\n  'b:border-primary b:bg-primary b:text-white': status === BStepsStatus.Process,\n  'b:border-primary b:bg-white b:text-primary': status === BStepsStatus.Finish,\n  'b:border-failure b:bg-white b:text-failure': status === BStepsStatus.Error,\n});\nconst titleClass = (status: `${BStepsStatus}`) => ({\n  'b:text-black-base': status === BStepsStatus.Process || status === BStepsStatus.Finish,\n  'b:text-failure': status === BStepsStatus.Error,\n  'b:text-black/65': status === BStepsStatus.Wait,\n});\nconst descriptionClass = (status: `${BStepsStatus}`) => ({\n  'b:text-black/65': status !== BStepsStatus.Error,\n  'b:text-failure': status === BStepsStatus.Error,\n});\n</script>\n\n<template>\n  <ol\n    class=\"b-steps\"\n    :class=\"[\n      {\n        'b-steps--horizontal': direction === BStepsDirection.Horizontal,\n        'b-steps--vertical': direction === BStepsDirection.Vertical,\n        'b-steps--label-vertical':\n          direction === BStepsDirection.Horizontal &&\n          labelPlacement === BStepsLabelPlacement.Vertical,\n        'b-steps--navigation': type === BStepsType.Navigation,\n        'b-steps--inline': type === BStepsType.Inline,\n      },\n    ]\"\n    :style=\"rootStyle\"\n  >\n    <li\n      v-for=\"(item, index) in items\"\n      :key=\"`${item.title}-${index}`\"\n      class=\"b-steps__item\"\n      :class=\"[\n        { 'b:opacity-50': item.disabled },\n        { 'b-steps__item--clickable': isClickable && !item.disabled },\n      ]\"\n      :data-status=\"getStepStatus(item, index)\"\n      :style=\"{ '--b-steps-tail-color': getTailColor(getStepStatus(item, index)) }\"\n    >\n      <div\n        class=\"b-steps__item-inner\"\n        :role=\"isClickable && !item.disabled ? 'button' : undefined\"\n        :tabindex=\"isClickable && !item.disabled ? 0 : undefined\"\n        :aria-disabled=\"item.disabled ? 'true' : undefined\"\n        :aria-current=\"index === model ? 'step' : undefined\"\n        @click=\"onStepClick(item, index)\"\n        @keydown=\"onStepKeydown($event, item, index)\"\n      >\n        <div\n          class=\"b-steps__icon b:flex b:items-center b:justify-center b:rounded-full b:border\"\n          :class=\"[\n            iconClass(getStepStatus(item, index)),\n            {\n              'b:h-6 b:w-6': normalizedSize === BCommonSize.Small,\n              'b:h-8 b:w-8': normalizedSize === BCommonSize.Medium,\n            },\n          ]\"\n        >\n          <template v-if=\"item.icon\">\n            <BIcon :icon=\"item.icon\" :size=\"iconSize\" />\n          </template>\n          <template v-else-if=\"getStepStatus(item, index) === BStepsStatus.Finish\">\n            <BIcon icon=\"check\" :size=\"iconSize\" />\n          </template>\n          <template v-else-if=\"getStepStatus(item, index) === BStepsStatus.Error\">\n            <BIcon icon=\"xmark\" :size=\"iconSize\" />\n          </template>\n          <template v-else>\n            <span :class=\"titleSizeClass\">{{ index + 1 }}</span>\n          </template>\n        </div>\n\n        <div\n          class=\"b-steps__content b:flex b:flex-col b:gap-y-1\"\n          :class=\"[\n            {\n              'b:items-center b:text-center':\n                direction === BStepsDirection.Horizontal &&\n                labelPlacement === BStepsLabelPlacement.Vertical,\n            },\n          ]\"\n        >\n          <div class=\"b:flex b:items-center b:gap-x-2\">\n            <span\n              class=\"b:font-medium\"\n              :class=\"[titleSizeClass, titleClass(getStepStatus(item, index))]\"\n            >\n              {{ item.title }}\n            </span>\n            <span\n              v-if=\"item.subTitle\"\n              class=\"b:text-xs b:text-black/65\"\n              :class=\"titleClass(getStepStatus(item, index))\"\n            >\n              {{ item.subTitle }}\n            </span>\n          </div>\n          <p\n            v-if=\"item.description\"\n            class=\"b:leading-snug\"\n            :class=\"[descriptionSizeClass, descriptionClass(getStepStatus(item, index))]\"\n          >\n            {{ item.description }}\n          </p>\n        </div>\n      </div>\n      <span\n        v-if=\"direction === BStepsDirection.Horizontal && index < items.length - 1\"\n        aria-hidden=\"true\"\n        class=\"b-steps__tail\"\n      />\n    </li>\n  </ol>\n</template>\n\n<style scoped>\n.b-steps {\n  display: flex;\n  gap: var(--b-steps-gap);\n}\n\n.b-steps--vertical {\n  flex-direction: column;\n}\n\n.b-steps__item {\n  position: relative;\n  flex: 1;\n  min-width: 0;\n}\n\n.b-steps__item-inner {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--b-steps-gap);\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.b-steps__icon {\n  flex-shrink: 0;\n}\n\n.b-steps__content {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.b-steps--label-vertical .b-steps__item-inner {\n  flex-direction: column;\n  align-items: center;\n}\n\n.b-steps--inline .b-steps__item-inner {\n  align-items: center;\n}\n\n.b-steps--inline .b-steps__content {\n  flex-direction: row;\n  align-items: center;\n  gap: var(--b-steps-gap);\n}\n\n.b-steps--inline .b-steps__content p {\n  display: none;\n}\n\n.b-steps__item--clickable .b-steps__item-inner {\n  cursor: pointer;\n}\n\n.b-steps--horizontal .b-steps__item {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--b-steps-gap);\n}\n\n.b-steps--vertical .b-steps__item {\n  padding-bottom: var(--b-steps-gap);\n}\n\n.b-steps--vertical .b-steps__item::after {\n  content: '';\n  position: absolute;\n  top: calc(var(--b-steps-icon-size) + var(--b-steps-gap));\n  left: calc(var(--b-steps-icon-size) / 2);\n  bottom: 0;\n  width: 1px;\n  background-color: var(--b-steps-tail-color);\n}\n\n.b-steps--vertical .b-steps__item:last-child::after {\n  display: none;\n}\n\n.b-steps__tail {\n  flex: 1 1 0;\n  min-width: 1.5rem;\n  height: 1px;\n  margin-top: calc(var(--b-steps-icon-size) / 2);\n  background-color: var(--b-steps-tail-color);\n}\n\n.b-steps--navigation .b-steps__item--clickable .b-steps__content {\n  transition: color 0.2s ease;\n}\n\n.b-steps--navigation .b-steps__item--clickable:hover .b-steps__content {\n  color: var(--b-color-primary);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system185.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { BSkeletonButtonShape, BSkeletonButtonSize } from './types';\n\nconst {\n  active = false,\n  block = false,\n  shape = 'default',\n  size = 'default',\n} = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n  /** Stretch to full width. @default false */\n  block?: boolean;\n  /** Button shape. @default 'default' */\n  shape?: BSkeletonButtonShape;\n  /** Button size. @default 'default' */\n  size?: BSkeletonButtonSize;\n}>();\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-button',\n  `b-skeleton-button--${shape}`,\n  `b-skeleton-button--${size}`,\n  {\n    'b-skeleton-button--block': block,\n    'b-skeleton-element--active': active,\n  },\n]);\n</script>\n\n<template>\n  <span :class=\"classes\" role=\"presentation\" aria-hidden=\"true\" />\n</template>\n\n<style>\n.b-skeleton-button {\n  display: inline-block;\n  vertical-align: top;\n  height: var(--b-skeleton-control-height, 32px);\n  min-width: var(--b-skeleton-button-min-width, 64px);\n  background: var(--b-skeleton-gradient-from-color, oklch(93% 0 0));\n  border-radius: var(--b-skeleton-border-radius, 6px);\n}\n\n.b-skeleton-button--small {\n  height: var(--b-skeleton-control-height-sm, 24px);\n  min-width: 48px;\n  border-radius: var(--b-skeleton-border-radius-sm, 4px);\n}\n\n.b-skeleton-button--large {\n  height: var(--b-skeleton-control-height-lg, 40px);\n  min-width: 80px;\n}\n\n.b-skeleton-button--round {\n  border-radius: 100px;\n}\n\n.b-skeleton-button--circle {\n  width: var(--b-skeleton-control-height, 32px);\n  min-width: var(--b-skeleton-control-height, 32px);\n  border-radius: 50%;\n}\n.b-skeleton-button--circle.b-skeleton-button--small {\n  width: var(--b-skeleton-control-height-sm, 24px);\n  min-width: var(--b-skeleton-control-height-sm, 24px);\n}\n.b-skeleton-button--circle.b-skeleton-button--large {\n  width: var(--b-skeleton-control-height-lg, 40px);\n  min-width: var(--b-skeleton-control-height-lg, 40px);\n}\n\n.b-skeleton-button--square {\n  border-radius: var(--b-skeleton-border-radius-sm, 4px);\n}\n\n.b-skeleton-button--block {\n  display: block;\n  width: 100%;\n}\n</style>\n"],"mappings":""}