@7pmlabs/design-system 1.0.10 → 2.0.0

package/dist/design-system164.js

@@ -1,72 +1,61 @@
-import { B_RADIO_GROUP_KEY as e } from "./design-system157.js";
-import t from "./design-system160.js";
-import n from "./design-system163.js";
-import { Fragment as r, computed as i, createBlock as a, createElementBlock as o, createTextVNode as s, defineComponent as c, mergeModels as l, normalizeClass as u, openBlock as d, provide as f, reactive as p, renderList as m, renderSlot as h, resolveDynamicComponent as g, toDisplayString as _, toRefs as v, useModel as y, withCtx as b } from "vue";
-//#region src/components/BRadio/BRadioGroup.vue?vue&type=script&setup=true&lang.ts
-var x = /* @__PURE__ */ c({
-	__name: "BRadioGroup",
-	props: /* @__PURE__ */ l({
+import { useComponentId as e } from "./design-system10.js";
+import { B_RADIO_GROUP_KEY as t } from "./design-system163.js";
+import { computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, inject as s, mergeModels as c, normalizeClass as l, openBlock as u, renderSlot as d, useModel as f } from "vue";
+//#region src/components/BRadio/BRadio.vue?vue&type=script&setup=true&lang.ts
+var p = ["for"], m = [
+	"id",
+	"checked",
+	"disabled",
+	"name",
+	"value"
+], h = {
+	key: 0,
+	class: "b-radio__label"
+}, g = /* @__PURE__ */ o({
+	__name: "BRadio",
+	props: /* @__PURE__ */ c({
+		id: { default: "" },
 		disabled: {
 			type: Boolean,
 			default: !1
 		},
-		name: { default: "" },
-		options: { default: () => void 0 },
-		optionType: { default: "default" },
-		size: { default: "middle" },
-		buttonStyle: { default: "outline" },
-		block: {
+		value: { default: "" },
+		name: { default: "" }
+	}, {
+		modelValue: {
 			type: Boolean,
 			default: !1
-		}
-	}, {
-		modelValue: {},
+		},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ l(["change"], ["update:modelValue"]),
-	setup(c, { emit: l }) {
-		let x = y(c, "modelValue"), S = l, C = i(() => c.options ? c.options.map((e) => typeof e == "string" || typeof e == "number" ? {
-			label: String(e),
-			value: e
-		} : e) : []);
+	emits: /* @__PURE__ */ c(["change"], ["update:modelValue"]),
+	setup(o, { emit: c }) {
+		let g = f(o, "modelValue"), _ = c, v = s(t, null), y = n(() => o.disabled || v?.disabled.value || !1), b = n(() => o.name || v?.name.value || ""), x = n(() => v ? v.modelValue.value === o.value : g.value), { componentUID: S } = e(), C = n(() => o.id || `b-radio-${S.value}`);
 		function w(e) {
-			x.value = e, S("change", e);
+			y.value || (v ? v.setValue(o.value) : g.value = !0, _("change", !0, e));
 		}
-		let { disabled: T, name: E, size: D, optionType: O, buttonStyle: k } = v(p({
-			disabled: c.disabled,
-			name: c.name,
-			size: c.size,
-			optionType: c.optionType,
-			buttonStyle: c.buttonStyle
-		}));
-		f(e, {
-			modelValue: i(() => x.value),
-			disabled: T,
-			name: E,
-			size: D,
-			optionType: O,
-			buttonStyle: k,
-			setValue: w
-		});
-		let A = i(() => c.optionType === "button" ? n : t);
-		return (e, t) => (d(), o("div", {
-			class: u(["b-radio-group b:inline-flex b:flex-wrap b:items-center", {
-				"b-radio-group--block b:flex b:w-full": c.block,
-				"b:gap-2": c.optionType !== "button",
-				"b:gap-0": c.optionType === "button"
-			}]),
-			role: "radiogroup"
-		}, [C.value.length > 0 ? (d(!0), o(r, { key: 0 }, m(C.value, (e) => (d(), a(g(A.value), {
-			key: e.value,
-			value: e.value,
-			disabled: e.disabled
-		}, {
-			default: b(() => [s(_(e.label), 1)]),
-			_: 2
-		}, 1032, ["value", "disabled"]))), 128)) : h(e.$slots, "default", { key: 1 }, void 0, !0)], 2));
+		return (e, t) => (u(), i("label", {
+			class: l(["b-radio b:inline-flex b:cursor-pointer b:items-center b:gap-2 b:leading-none b:select-none", { "b-radio--disabled b:cursor-not-allowed b:opacity-50": y.value }]),
+			for: C.value
+		}, [a("span", { class: l(["b-radio__indicator b:relative b:inline-flex b:shrink-0 b:items-center b:justify-center", {
+			"b-radio__indicator--checked": x.value,
+			"b-radio__indicator--disabled": y.value
+		}]) }, [a("input", {
+			id: C.value,
+			type: "radio",
+			class: "b-radio__input",
+			checked: x.value,
+			disabled: y.value,
+			name: b.value,
+			value: o.value,
+			onChange: w
+		}, null, 40, m), t[0] ||= a("span", {
+			class: "b-radio__inner",
+			"aria-hidden": "true"
+		}, null, -1)], 2), e.$slots.default ? (u(), i("span", h, [d(e.$slots, "default", {}, void 0, !0)])) : r("", !0)], 10, p));
 	}
 });
 //#endregion
-export { x as default };
+export { g as default };
 
 //# sourceMappingURL=design-system164.js.map

package/dist/design-system164.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system164.js","names":[],"sources":["../src/components/BRadio/BRadioGroup.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { useModel as _useModel, mergeModels as _mergeModels, defineComponent as _defineComponent } from 'vue'\nimport { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveDynamicComponent as _resolveDynamicComponent, withCtx as _withCtx, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass } from \"vue\"\n\nimport { computed, provide, reactive, toRefs } from 'vue';\nimport BRadio from './BRadio.vue';\nimport BRadioButton from './BRadioButton.vue';\nimport { B_RADIO_GROUP_KEY, type BRadioOption } from './types';\n\n//#region Props\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BRadioGroup',\n  props: /*@__PURE__*/_mergeModels({\n    disabled: { type: Boolean, default: false },\n    name: { default: '' },\n    options: { default: () => (undefined) },\n    optionType: { default: 'default' },\n    size: { default: 'middle' },\n    buttonStyle: { default: 'outline' },\n    block: { type: Boolean, default: false }\n  }, {\n    \"modelValue\": {},\n    \"modelModifiers\": {},\n  }),\n  emits: /*@__PURE__*/_mergeModels([\"change\"], [\"update:modelValue\"]),\n  setup(__props: any, { emit: __emit }) {\n\n\n\n/**\n * Currently selected value.\n */\nconst model = _useModel<string | number>(__props, \"modelValue\");\n\nconst emit = __emit;\n//#endregion\n\n//#region Normalize options\nconst normalizedOptions = computed<BRadioOption[]>(() => {\n  if (!__props.options) return [];\n  return __props.options.map((opt) => {\n    if (typeof opt === 'string' || typeof opt === 'number') {\n      return { label: String(opt), value: opt };\n    }\n    return opt;\n  });\n});\n//#endregion\n\n//#region Group context\nfunction setValue(val: string | number) {\n  model.value = val;\n  emit('change', val);\n}\n\nconst props = reactive({ disabled: __props.disabled, name: __props.name, size: __props.size, optionType: __props.optionType, buttonStyle: __props.buttonStyle });\nconst {\n  disabled: disabledRef,\n  name: nameRef,\n  size: sizeRef,\n  optionType: optionTypeRef,\n  buttonStyle: buttonStyleRef,\n} = toRefs(props);\n\nprovide(B_RADIO_GROUP_KEY, {\n  modelValue: computed(() => model.value),\n  disabled: disabledRef,\n  name: nameRef,\n  size: sizeRef,\n  optionType: optionTypeRef,\n  buttonStyle: buttonStyleRef,\n  setValue,\n});\n//#endregion\n\n//#region Computed component\nconst radioComponent = computed(() => (__props.optionType === 'button' ? BRadioButton : BRadio));\n//#endregion\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", {\n    class: _normalizeClass([\"b-radio-group b:inline-flex b:flex-wrap b:items-center\", {\n      'b-radio-group--block b:flex b:w-full': __props.block,\n      'b:gap-2': __props.optionType !== 'button',\n      'b:gap-0': __props.optionType === 'button',\n    }]),\n    role: \"radiogroup\"\n  }, [\n    (normalizedOptions.value.length > 0)\n      ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(normalizedOptions.value, (opt) => {\n          return (_openBlock(), _createBlock(_resolveDynamicComponent(radioComponent.value), {\n            key: opt.value,\n            value: opt.value,\n            disabled: opt.disabled\n          }, {\n            default: _withCtx(() => [\n              _createTextVNode(_toDisplayString(opt.label), 1)\n            ]),\n            _: 2\n          }, 1032, [\"value\", \"disabled\"]))\n        }), 128))\n      : _renderSlot(_ctx.$slots, \"default\", { key: 1 }, undefined, true)\n  ], 2))\n}\n}\n\n})"],"mappings":";;;;;AAUA,IAAA,IAA4B,kBAAiB;CAC3C,QAAQ;CACR,OAAoB,kBAAa;EAC/B,UAAU;GAAE,MAAM;GAAS,SAAS;GAAO;EAC3C,MAAM,EAAE,SAAS,IAAI;EACrB,SAAS,EAAE,eAAgB,KAAA,GAAY;EACvC,YAAY,EAAE,SAAS,WAAW;EAClC,MAAM,EAAE,SAAS,UAAU;EAC3B,aAAa,EAAE,SAAS,WAAW;EACnC,OAAO;GAAE,MAAM;GAAS,SAAS;GAAO;EACzC,EAAE;EACD,YAAc,EAAE;EAChB,gBAAkB,EAAE;EACrB,CAAC;CACF,OAAoB,kBAAa,CAAC,SAAS,EAAE,CAAC,oBAAoB,CAAC;CACnE,MAAM,GAAc,EAAE,MAAM,KAAU;EAOxC,IAAM,IAAQ,EAA2B,GAAS,aAAa,EAEzD,IAAO,GAIP,IAAoB,QACnB,EAAQ,UACN,EAAQ,QAAQ,KAAK,MACtB,OAAO,KAAQ,YAAY,OAAO,KAAQ,WACrC;GAAE,OAAO,OAAO,EAAI;GAAE,OAAO;GAAK,GAEpC,EACP,GAN2B,EAAE,CAO/B;EAIF,SAAS,EAAS,GAAsB;AAEtC,GADA,EAAM,QAAQ,GACd,EAAK,UAAU,EAAI;;EAIrB,IAAM,EACJ,UAAU,GACV,MAAM,GACN,MAAM,GACN,YAAY,GACZ,aAAa,MACX,EAPU,EAAS;GAAE,UAAU,EAAQ;GAAU,MAAM,EAAQ;GAAM,MAAM,EAAQ;GAAM,YAAY,EAAQ;GAAY,aAAa,EAAQ;GAAa,CAAC,CAO/I;AAEjB,IAAQ,GAAmB;GACzB,YAAY,QAAe,EAAM,MAAM;GACvC,UAAU;GACV,MAAM;GACN,MAAM;GACN,YAAY;GACZ,aAAa;GACb;GACD,CAAC;EAIF,IAAM,IAAiB,QAAgB,EAAQ,eAAe,WAAW,IAAe,EAAQ;AAGhG,UAAQ,GAAU,OACR,GAAY,EAAE,EAAoB,OAAO;GAC/C,OAAO,EAAgB,CAAC,0DAA0D;IAChF,wCAAwC,EAAQ;IAChD,WAAW,EAAQ,eAAe;IAClC,WAAW,EAAQ,eAAe;IACnC,CAAC,CAAC;GACH,MAAM;GACP,EAAE,CACA,EAAkB,MAAM,SAAS,KAC7B,EAAW,GAAK,EAAE,EAAoB,GAAW,EAAE,KAAK,GAAG,EAAE,EAAY,EAAkB,QAAQ,OAC1F,GAAY,EAAE,EAAa,EAAyB,EAAe,MAAM,EAAE;GACjF,KAAK,EAAI;GACT,OAAO,EAAI;GACX,UAAU,EAAI;GACf,EAAE;GACD,SAAS,QAAe,CACtB,EAAiB,EAAiB,EAAI,MAAM,EAAE,EAAE,CACjD,CAAC;GACF,GAAG;GACJ,EAAE,MAAM,CAAC,SAAS,WAAW,CAAC,EAC/B,EAAE,IAAI,IACR,EAAY,EAAK,QAAQ,WAAW,EAAE,KAAK,GAAG,EAAE,KAAA,GAAW,GAAK,CACrE,EAAE,EAAE;;CAIN,CAAA"}
+{"version":3,"file":"design-system164.js","names":["$slots"],"sources":["../src/components/BRadio/BRadio.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, inject } from 'vue';\nimport { B_RADIO_GROUP_KEY, type BRadioGroupContext } from './types';\n\n//#region Props\nconst {\n  id = '',\n  disabled = false,\n  value = '',\n  name = '',\n} = defineProps<{\n  /** Custom id attribute for the radio input. */\n  id?: string;\n  /** Whether the radio is disabled. */\n  disabled?: boolean;\n  /** Value when used inside BRadioGroup. */\n  value?: string | number;\n  /** The name attribute for the input element. */\n  name?: string;\n}>();\n\n/**\n * The checked state of the radio.\n */\nconst model = defineModel<boolean>({ default: false });\n\nconst emit = defineEmits<{\n  change: [checked: boolean, event: Event];\n}>();\n//#endregion\n\n//#region Group integration\nconst group = inject<BRadioGroupContext | null>(B_RADIO_GROUP_KEY, null);\n\nconst isDisabled = computed(() => disabled || group?.disabled.value || false);\nconst inputName = computed(() => name || group?.name.value || '');\n\nconst isChecked = computed(() => {\n  if (group) {\n    return group.modelValue.value === value;\n  }\n  return model.value;\n});\n//#endregion\n\n//#region ID generation\nconst { componentUID } = useComponentId();\nconst inputId = computed(() => id || `b-radio-${componentUID.value}`);\n//#endregion\n\n//#region Handlers\nfunction handleChange(event: Event) {\n  if (isDisabled.value) return;\n\n  if (group) {\n    group.setValue(value);\n  } else {\n    model.value = true;\n  }\n  emit('change', true, event);\n}\n//#endregion\n</script>\n\n<template>\n  <label\n    class=\"b-radio b:inline-flex b:cursor-pointer b:items-center b:gap-2 b:leading-none b:select-none\"\n    :class=\"{ 'b-radio--disabled b:cursor-not-allowed b:opacity-50': isDisabled }\"\n    :for=\"inputId\"\n  >\n    <span\n      class=\"b-radio__indicator b:relative b:inline-flex b:shrink-0 b:items-center b:justify-center\"\n      :class=\"{\n        'b-radio__indicator--checked': isChecked,\n        'b-radio__indicator--disabled': isDisabled,\n      }\"\n    >\n      <input\n        :id=\"inputId\"\n        type=\"radio\"\n        class=\"b-radio__input\"\n        :checked=\"isChecked\"\n        :disabled=\"isDisabled\"\n        :name=\"inputName\"\n        :value=\"value\"\n        @change=\"handleChange\"\n      />\n      <span class=\"b-radio__inner\" aria-hidden=\"true\" />\n    </span>\n    <span v-if=\"$slots.default\" class=\"b-radio__label\">\n      <slot />\n    </span>\n  </label>\n</template>\n\n<style scoped>\n.b-radio {\n  --b-radio-size: 16px;\n  --b-radio-dot-size: 8px;\n  --b-radio-color-primary: #1677ff;\n  --b-radio-color-primary-hover: #4096ff;\n  --b-radio-color-border: #d9d9d9;\n  --b-radio-color-bg-container: #ffffff;\n  --b-radio-color-bg-container-disabled: rgba(0, 0, 0, 0.04);\n  --b-radio-color-text-disabled: rgba(0, 0, 0, 0.25);\n  --b-radio-color-border-disabled: #d9d9d9;\n  --b-radio-dot-color-disabled: rgba(0, 0, 0, 0.25);\n  --b-radio-border-width: 1px;\n  --b-radio-font-size: 14px;\n  --b-radio-line-height: 1.5714;\n  --b-radio-wrapper-margin-inline-end: 8px;\n  --b-radio-transition-duration: 0.2s;\n}\n\n[data-prefers-color='dark'] .b-radio {\n  --b-radio-color-primary: #3c89e8;\n  --b-radio-color-primary-hover: #65a9f3;\n  --b-radio-color-border: #424242;\n  --b-radio-color-bg-container: #141414;\n  --b-radio-color-bg-container-disabled: rgba(255, 255, 255, 0.08);\n  --b-radio-color-text-disabled: rgba(255, 255, 255, 0.25);\n  --b-radio-color-border-disabled: #424242;\n  --b-radio-dot-color-disabled: rgba(255, 255, 255, 0.25);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-radio {\n    --b-radio-color-primary: #3c89e8;\n    --b-radio-color-primary-hover: #65a9f3;\n    --b-radio-color-border: #424242;\n    --b-radio-color-bg-container: #141414;\n    --b-radio-color-bg-container-disabled: rgba(255, 255, 255, 0.08);\n    --b-radio-color-text-disabled: rgba(255, 255, 255, 0.25);\n    --b-radio-color-border-disabled: #424242;\n    --b-radio-dot-color-disabled: rgba(255, 255, 255, 0.25);\n  }\n}\n\n.b-radio__label {\n  font-size: var(--b-radio-font-size);\n  line-height: var(--b-radio-line-height);\n  color: inherit;\n}\n\n.b-radio--disabled .b-radio__label {\n  color: var(--b-radio-color-text-disabled);\n}\n\n.b-radio__indicator {\n  width: var(--b-radio-size);\n  height: var(--b-radio-size);\n}\n\n.b-radio__inner {\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  border: var(--b-radio-border-width) solid var(--b-radio-color-border);\n  background-color: var(--b-radio-color-bg-container);\n  transition:\n    background-color var(--b-radio-transition-duration) ease-in-out,\n    border-color var(--b-radio-transition-duration) ease-in-out;\n}\n\n/* Hover state */\n.b-radio:not(.b-radio--disabled):hover .b-radio__inner {\n  border-color: var(--b-radio-color-primary-hover);\n}\n\n/* Checked state */\n.b-radio__indicator--checked .b-radio__inner {\n  border-color: var(--b-radio-color-primary);\n}\n\n.b-radio__indicator--checked .b-radio__inner::after {\n  content: '';\n  position: absolute;\n  display: block;\n  top: 50%;\n  left: 50%;\n  width: var(--b-radio-dot-size);\n  height: var(--b-radio-dot-size);\n  background-color: var(--b-radio-color-primary);\n  border-radius: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  opacity: 1;\n  transition:\n    transform var(--b-radio-transition-duration) ease-in-out,\n    opacity var(--b-radio-transition-duration) ease-in-out;\n}\n\n/* Disabled state */\n.b-radio__indicator--disabled .b-radio__inner {\n  background-color: var(--b-radio-color-bg-container-disabled);\n  border-color: var(--b-radio-color-border-disabled);\n}\n\n.b-radio__indicator--disabled.b-radio__indicator--checked .b-radio__inner {\n  border-color: var(--b-radio-color-border-disabled);\n}\n\n.b-radio__indicator--disabled.b-radio__indicator--checked .b-radio__inner::after {\n  background-color: var(--b-radio-dot-color-disabled);\n}\n\n.b-radio__input {\n  appearance: none;\n  -webkit-appearance: none;\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n  z-index: 1;\n}\n\n.b-radio--disabled .b-radio__input {\n  cursor: not-allowed;\n}\n\n/* Focus-visible ring */\n.b-radio__input:focus-visible + .b-radio__inner {\n  outline: 2px solid var(--b-radio-color-primary);\n  outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-radio__inner,\n  .b-radio__inner::after {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyBA,IAAM,IAAQ,EAAoB,GAAA,aAAoB,EAEhD,IAAO,GAMP,IAAQ,EAAkC,GAAmB,KAAK,EAElE,IAAa,QAAe,EAAA,YAAY,GAAO,SAAS,SAAS,GAAM,EACvE,IAAY,QAAe,EAAA,QAAQ,GAAO,KAAK,SAAS,GAAG,EAE3D,IAAY,QACZ,IACK,EAAM,WAAW,UAAU,EAAA,QAE7B,EAAM,MACb,EAII,EAAE,oBAAiB,GAAgB,EACnC,IAAU,QAAe,EAAA,MAAM,WAAW,EAAa,QAAQ;EAIrE,SAAS,EAAa,GAAc;AAC9B,KAAW,UAEX,IACF,EAAM,SAAS,EAAA,MAAM,GAErB,EAAM,QAAQ,IAEhB,EAAK,UAAU,IAAM,EAAM;;yBAM3B,EA2BQ,SAAA;GA1BN,OAAK,EAAA,CAAC,8FAA4F,EAAA,uDACjC,EAAA,OAAU,CAAA,CAAA;GAC1E,KAAK,EAAA;MAEN,EAkBO,QAAA,EAjBL,OAAK,EAAA,CAAC,0FAAwF;kCAC7C,EAAA;mCAAmD,EAAA;UAKpG,EASE,SAAA;GARC,IAAI,EAAA;GACL,MAAK;GACL,OAAM;GACL,SAAS,EAAA;GACT,UAAU,EAAA;GACV,MAAM,EAAA;GACN,OAAO,EAAA;GACP,UAAQ;4BAEX,EAAkD,QAAA;GAA5C,OAAM;GAAiB,eAAY;qBAE/BA,EAAAA,OAAO,WAAA,GAAA,EAAnB,EAEO,QAFP,GAEO,CADL,EAAQ,EAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,GAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,IAAA,EAAA"}

package/dist/design-system166.js

@@ -1,8 +1,8 @@
 import e from "./design-system14.js";
 import t from "./design-system164.js";
 /* empty css                 */
-//#region src/components/BRadio/BRadioGroup.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-a8ec6dad"]]);
+//#region src/components/BRadio/BRadio.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-58cd3e1a"]]);
 //#endregion
 export { n as default };
 

package/dist/design-system166.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system166.js","names":[],"sources":["../src/components/BRadio/BRadioGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, provide, reactive, toRefs } from 'vue';\nimport BRadio from './BRadio.vue';\nimport BRadioButton from './BRadioButton.vue';\nimport { B_RADIO_GROUP_KEY, type BRadioOption } from './types';\n\n//#region Props\nconst {\n  disabled = false,\n  name = '',\n  options = undefined,\n  optionType = 'default',\n  size = 'middle',\n  buttonStyle = 'outline',\n  block = false,\n} = defineProps<{\n  /** Disable all radios in the group. */\n  disabled?: boolean;\n  /** The name property of all child input elements. */\n  name?: string;\n  /** Shorthand options to render radios from an array. */\n  options?: BRadioOption[] | string[] | number[];\n  /** Style type of radio: default or button. */\n  optionType?: 'default' | 'button';\n  /** Size of radio button (only works with button style). */\n  size?: 'large' | 'middle' | 'small';\n  /** Style of radio button appearance. */\n  buttonStyle?: 'outline' | 'solid';\n  /** Whether to fit the width of the parent container. */\n  block?: boolean;\n}>();\n\n/**\n * Currently selected value.\n */\nconst model = defineModel<string | number>();\n\nconst emit = defineEmits<{\n  change: [value: string | number | undefined, event?: Event];\n}>();\n//#endregion\n\n//#region Normalize options\nconst normalizedOptions = computed<BRadioOption[]>(() => {\n  if (!options) return [];\n  return options.map((opt) => {\n    if (typeof opt === 'string' || typeof opt === 'number') {\n      return { label: String(opt), value: opt };\n    }\n    return opt;\n  });\n});\n//#endregion\n\n//#region Group context\nfunction setValue(val: string | number) {\n  model.value = val;\n  emit('change', val);\n}\n\nconst props = reactive({ disabled, name, size, optionType, buttonStyle });\nconst {\n  disabled: disabledRef,\n  name: nameRef,\n  size: sizeRef,\n  optionType: optionTypeRef,\n  buttonStyle: buttonStyleRef,\n} = toRefs(props);\n\nprovide(B_RADIO_GROUP_KEY, {\n  modelValue: computed(() => model.value),\n  disabled: disabledRef,\n  name: nameRef,\n  size: sizeRef,\n  optionType: optionTypeRef,\n  buttonStyle: buttonStyleRef,\n  setValue,\n});\n//#endregion\n\n//#region Computed component\nconst radioComponent = computed(() => (optionType === 'button' ? BRadioButton : BRadio));\n//#endregion\n</script>\n\n<template>\n  <div\n    class=\"b-radio-group b:inline-flex b:flex-wrap b:items-center\"\n    :class=\"{\n      'b-radio-group--block b:flex b:w-full': block,\n      'b:gap-2': optionType !== 'button',\n      'b:gap-0': optionType === 'button',\n    }\"\n    role=\"radiogroup\"\n  >\n    <template v-if=\"normalizedOptions.length > 0\">\n      <component\n        :is=\"radioComponent\"\n        v-for=\"opt in normalizedOptions\"\n        :key=\"opt.value\"\n        :value=\"opt.value\"\n        :disabled=\"opt.disabled\"\n      >\n        {{ opt.label }}\n      </component>\n    </template>\n    <slot v-else />\n  </div>\n</template>\n\n<style scoped>\n.b-radio-group--block > * {\n  flex: 1;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system166.js","names":[],"sources":["../src/components/BRadio/BRadio.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, inject } from 'vue';\nimport { B_RADIO_GROUP_KEY, type BRadioGroupContext } from './types';\n\n//#region Props\nconst {\n  id = '',\n  disabled = false,\n  value = '',\n  name = '',\n} = defineProps<{\n  /** Custom id attribute for the radio input. */\n  id?: string;\n  /** Whether the radio is disabled. */\n  disabled?: boolean;\n  /** Value when used inside BRadioGroup. */\n  value?: string | number;\n  /** The name attribute for the input element. */\n  name?: string;\n}>();\n\n/**\n * The checked state of the radio.\n */\nconst model = defineModel<boolean>({ default: false });\n\nconst emit = defineEmits<{\n  change: [checked: boolean, event: Event];\n}>();\n//#endregion\n\n//#region Group integration\nconst group = inject<BRadioGroupContext | null>(B_RADIO_GROUP_KEY, null);\n\nconst isDisabled = computed(() => disabled || group?.disabled.value || false);\nconst inputName = computed(() => name || group?.name.value || '');\n\nconst isChecked = computed(() => {\n  if (group) {\n    return group.modelValue.value === value;\n  }\n  return model.value;\n});\n//#endregion\n\n//#region ID generation\nconst { componentUID } = useComponentId();\nconst inputId = computed(() => id || `b-radio-${componentUID.value}`);\n//#endregion\n\n//#region Handlers\nfunction handleChange(event: Event) {\n  if (isDisabled.value) return;\n\n  if (group) {\n    group.setValue(value);\n  } else {\n    model.value = true;\n  }\n  emit('change', true, event);\n}\n//#endregion\n</script>\n\n<template>\n  <label\n    class=\"b-radio b:inline-flex b:cursor-pointer b:items-center b:gap-2 b:leading-none b:select-none\"\n    :class=\"{ 'b-radio--disabled b:cursor-not-allowed b:opacity-50': isDisabled }\"\n    :for=\"inputId\"\n  >\n    <span\n      class=\"b-radio__indicator b:relative b:inline-flex b:shrink-0 b:items-center b:justify-center\"\n      :class=\"{\n        'b-radio__indicator--checked': isChecked,\n        'b-radio__indicator--disabled': isDisabled,\n      }\"\n    >\n      <input\n        :id=\"inputId\"\n        type=\"radio\"\n        class=\"b-radio__input\"\n        :checked=\"isChecked\"\n        :disabled=\"isDisabled\"\n        :name=\"inputName\"\n        :value=\"value\"\n        @change=\"handleChange\"\n      />\n      <span class=\"b-radio__inner\" aria-hidden=\"true\" />\n    </span>\n    <span v-if=\"$slots.default\" class=\"b-radio__label\">\n      <slot />\n    </span>\n  </label>\n</template>\n\n<style scoped>\n.b-radio {\n  --b-radio-size: 16px;\n  --b-radio-dot-size: 8px;\n  --b-radio-color-primary: #1677ff;\n  --b-radio-color-primary-hover: #4096ff;\n  --b-radio-color-border: #d9d9d9;\n  --b-radio-color-bg-container: #ffffff;\n  --b-radio-color-bg-container-disabled: rgba(0, 0, 0, 0.04);\n  --b-radio-color-text-disabled: rgba(0, 0, 0, 0.25);\n  --b-radio-color-border-disabled: #d9d9d9;\n  --b-radio-dot-color-disabled: rgba(0, 0, 0, 0.25);\n  --b-radio-border-width: 1px;\n  --b-radio-font-size: 14px;\n  --b-radio-line-height: 1.5714;\n  --b-radio-wrapper-margin-inline-end: 8px;\n  --b-radio-transition-duration: 0.2s;\n}\n\n[data-prefers-color='dark'] .b-radio {\n  --b-radio-color-primary: #3c89e8;\n  --b-radio-color-primary-hover: #65a9f3;\n  --b-radio-color-border: #424242;\n  --b-radio-color-bg-container: #141414;\n  --b-radio-color-bg-container-disabled: rgba(255, 255, 255, 0.08);\n  --b-radio-color-text-disabled: rgba(255, 255, 255, 0.25);\n  --b-radio-color-border-disabled: #424242;\n  --b-radio-dot-color-disabled: rgba(255, 255, 255, 0.25);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-radio {\n    --b-radio-color-primary: #3c89e8;\n    --b-radio-color-primary-hover: #65a9f3;\n    --b-radio-color-border: #424242;\n    --b-radio-color-bg-container: #141414;\n    --b-radio-color-bg-container-disabled: rgba(255, 255, 255, 0.08);\n    --b-radio-color-text-disabled: rgba(255, 255, 255, 0.25);\n    --b-radio-color-border-disabled: #424242;\n    --b-radio-dot-color-disabled: rgba(255, 255, 255, 0.25);\n  }\n}\n\n.b-radio__label {\n  font-size: var(--b-radio-font-size);\n  line-height: var(--b-radio-line-height);\n  color: inherit;\n}\n\n.b-radio--disabled .b-radio__label {\n  color: var(--b-radio-color-text-disabled);\n}\n\n.b-radio__indicator {\n  width: var(--b-radio-size);\n  height: var(--b-radio-size);\n}\n\n.b-radio__inner {\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  border: var(--b-radio-border-width) solid var(--b-radio-color-border);\n  background-color: var(--b-radio-color-bg-container);\n  transition:\n    background-color var(--b-radio-transition-duration) ease-in-out,\n    border-color var(--b-radio-transition-duration) ease-in-out;\n}\n\n/* Hover state */\n.b-radio:not(.b-radio--disabled):hover .b-radio__inner {\n  border-color: var(--b-radio-color-primary-hover);\n}\n\n/* Checked state */\n.b-radio__indicator--checked .b-radio__inner {\n  border-color: var(--b-radio-color-primary);\n}\n\n.b-radio__indicator--checked .b-radio__inner::after {\n  content: '';\n  position: absolute;\n  display: block;\n  top: 50%;\n  left: 50%;\n  width: var(--b-radio-dot-size);\n  height: var(--b-radio-dot-size);\n  background-color: var(--b-radio-color-primary);\n  border-radius: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  opacity: 1;\n  transition:\n    transform var(--b-radio-transition-duration) ease-in-out,\n    opacity var(--b-radio-transition-duration) ease-in-out;\n}\n\n/* Disabled state */\n.b-radio__indicator--disabled .b-radio__inner {\n  background-color: var(--b-radio-color-bg-container-disabled);\n  border-color: var(--b-radio-color-border-disabled);\n}\n\n.b-radio__indicator--disabled.b-radio__indicator--checked .b-radio__inner {\n  border-color: var(--b-radio-color-border-disabled);\n}\n\n.b-radio__indicator--disabled.b-radio__indicator--checked .b-radio__inner::after {\n  background-color: var(--b-radio-dot-color-disabled);\n}\n\n.b-radio__input {\n  appearance: none;\n  -webkit-appearance: none;\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n  z-index: 1;\n}\n\n.b-radio--disabled .b-radio__input {\n  cursor: not-allowed;\n}\n\n/* Focus-visible ring */\n.b-radio__input:focus-visible + .b-radio__inner {\n  outline: 2px solid var(--b-radio-color-primary);\n  outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-radio__inner,\n  .b-radio__inner::after {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system167.js

@@ -1,185 +1,59 @@
 import { useComponentId as e } from "./design-system10.js";
-import { Fragment as t, computed as n, createElementBlock as r, createElementVNode as i, defineComponent as a, mergeModels as o, normalizeClass as s, openBlock as c, ref as l, renderList as u, renderSlot as d, unref as f, useModel as p, watch as m } from "vue";
-//#region src/components/BRate/BRate.vue?vue&type=script&setup=true&lang.ts
-var h = [
-	"aria-label",
-	"aria-disabled",
-	"aria-valuenow",
-	"aria-valuemax",
-	"aria-valuetext",
-	"tabindex"
-], g = [
-	"title",
-	"onMousemove",
-	"onClick"
-], _ = {
-	class: "b-rate__star-first",
-	"aria-hidden": "true"
-}, v = ["data-character"], y = {
-	key: 1,
-	class: "b-rate__icon",
-	viewBox: "0 0 24 24",
-	fill: "currentColor",
-	"aria-hidden": "true"
-}, b = {
-	class: "b-rate__star-second",
-	"aria-hidden": "true"
-}, x = ["data-character"], S = {
-	key: 1,
-	class: "b-rate__icon",
-	viewBox: "0 0 24 24",
-	fill: "currentColor",
-	"aria-hidden": "true"
-}, C = ["name", "value"], w = /* @__PURE__ */ a({
-	__name: "BRate",
-	props: /* @__PURE__ */ o({
-		allowClear: {
-			type: Boolean,
-			default: !0
-		},
-		allowHalf: {
-			type: Boolean,
-			default: !1
-		},
-		count: { default: 5 },
+import { B_RADIO_GROUP_KEY as t } from "./design-system163.js";
+import { computed as n, createElementBlock as r, createElementVNode as i, defineComponent as a, inject as o, mergeModels as s, normalizeClass as c, openBlock as l, renderSlot as u, useModel as d } from "vue";
+//#region src/components/BRadio/BRadioButton.vue?vue&type=script&setup=true&lang.ts
+var f = ["for"], p = [
+	"id",
+	"checked",
+	"disabled",
+	"name",
+	"value"
+], m = { class: "b-radio-button__label" }, h = /* @__PURE__ */ a({
+	__name: "BRadioButton",
+	props: /* @__PURE__ */ s({
+		id: { default: "" },
 		disabled: {
 			type: Boolean,
 			default: !1
 		},
-		keyboard: {
+		value: { default: "" },
+		name: { default: "" }
+	}, {
+		modelValue: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
-		size: { default: "default" },
-		tooltips: { default: () => [] },
-		character: {}
-	}, {
-		modelValue: { default: 0 },
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ o([
-		"hover-change",
-		"change",
-		"focus",
-		"blur",
-		"keydown"
-	], ["update:modelValue"]),
-	setup(a, { expose: o, emit: w }) {
-		let T = p(a, "modelValue"), E = w, { componentUID: D } = e(), O = l(0), k = l(!1), A = l(0), j = n(() => O.value > 0 ? O.value : T.value), M = n(() => {
-			let e = [];
-			for (let t = 1; t <= a.count; t++) e.push({
-				index: t,
-				value: t
-			});
-			return e;
-		});
-		function N(e) {
-			let t = j.value;
-			return e <= Math.floor(t) ? "full" : a.allowHalf && e - .5 <= t && e > t ? "half" : "zero";
-		}
-		function P(e, t) {
-			if (a.disabled) return;
-			let n = t && a.allowHalf ? e - .5 : e;
-			a.allowClear && n === T.value ? (T.value = 0, E("change", 0)) : (T.value = n, E("change", n));
-		}
-		function F(e, t) {
-			if (a.disabled) return;
-			let n = t.currentTarget.getBoundingClientRect(), r = t.clientX - n.left < n.width / 2, i;
-			i = a.allowHalf && r ? e - .5 : e, i !== O.value && (O.value = i, E("hover-change", i));
-		}
-		function I() {
-			a.disabled || (O.value = 0, E("hover-change", 0));
-		}
-		function L() {
-			k.value = !0, A.value = Math.ceil(T.value) || 1, E("focus");
-		}
-		function R() {
-			k.value = !1, A.value = 0, E("blur");
-		}
-		function z(e) {
-			if (a.disabled || !a.keyboard) return;
-			E("keydown", e);
-			let t = a.allowHalf ? .5 : 1;
-			switch (e.key) {
-				case "ArrowRight":
-				case "ArrowUp": {
-					e.preventDefault();
-					let n = Math.min(T.value + t, a.count);
-					T.value = n, A.value = Math.ceil(n), E("change", n);
-					break;
+	emits: /* @__PURE__ */ s(["change"], ["update:modelValue"]),
+	setup(a, { emit: s }) {
+		let h = d(a, "modelValue"), g = s, _ = o(t, null), v = n(() => a.disabled || _?.disabled.value || !1), y = n(() => a.name || _?.name.value || ""), b = n(() => _?.size.value || "middle"), x = n(() => _?.buttonStyle.value || "outline"), S = n(() => _ ? _.modelValue.value === a.value : h.value), { componentUID: C } = e(), w = n(() => a.id || `b-radio-button-${C.value}`);
+		function T(e) {
+			v.value || (_ ? _.setValue(a.value) : h.value = !0, g("change", !0, e));
+		}
+		return (e, t) => (l(), r("label", {
+			class: c(["b-radio-button b:relative b:inline-flex b:cursor-pointer b:items-center b:justify-center b:leading-none b:select-none", [
+				`b-radio-button--${b.value}`,
+				`b-radio-button--${x.value}`,
+				{
+					"b-radio-button--checked": S.value,
+					"b-radio-button--disabled b:cursor-not-allowed": v.value
 				}
-				case "ArrowLeft":
-				case "ArrowDown": {
-					e.preventDefault();
-					let n = Math.max(T.value - t, 0);
-					T.value = n, A.value = Math.ceil(n) || 1, E("change", n);
-					break;
-				}
-				case "Enter":
-				case " ":
-					e.preventDefault(), a.allowClear && A.value === Math.ceil(T.value) && (T.value = 0, E("change", 0));
-					break;
-			}
-		}
-		let B = l(null);
-		function V() {
-			B.value?.focus();
-		}
-		function H() {
-			B.value?.blur();
-		}
-		return o({
-			focus: V,
-			blur: H
-		}), m(O, (e) => {
-			e === 0 && (A.value = Math.ceil(T.value) || 0);
-		}), (e, n) => (c(), r("div", {
-			ref_key: "rootRef",
-			ref: B,
-			class: s(["b-rate", [`b-rate--${a.size}`, {
-				"b-rate--disabled": a.disabled,
-				"b-rate--focused": k.value
-			}]]),
-			role: "slider",
-			"aria-label": e.$attrs["aria-label"] || "Rating",
-			"aria-disabled": a.disabled || void 0,
-			"aria-valuenow": T.value,
-			"aria-valuemin": 0,
-			"aria-valuemax": a.count,
-			"aria-valuetext": `${T.value} out of ${a.count} stars`,
-			tabindex: a.disabled ? -1 : 0,
-			onMouseleave: I,
-			onFocus: L,
-			onBlur: R,
-			onKeydown: z
-		}, [(c(!0), r(t, null, u(M.value, (t) => (c(), r("div", {
-			key: t.index,
-			class: s(["b-rate__star", {
-				"b-rate__star--full": N(t.index) === "full",
-				"b-rate__star--half": N(t.index) === "half",
-				"b-rate__star--zero": N(t.index) === "zero",
-				"b-rate__star--active": O.value > 0,
-				"b-rate__star--focused": k.value && A.value === t.index
-			}]),
-			title: a.tooltips[t.index - 1] || void 0,
-			onMousemove: (e) => F(t.index, e),
-			onClick: (e) => P(t.index, a.allowHalf && e.offsetX < e.currentTarget.offsetWidth / 2)
-		}, [i("div", _, [d(e.$slots, "character", { index: t.index }, () => [a.character ? (c(), r("span", {
-			key: 0,
-			class: "b-rate__character",
-			"data-character": a.character
-		}, null, 8, v)) : (c(), r("svg", y, [...n[0] ||= [i("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }, null, -1)]]))], !0)]), i("div", b, [d(e.$slots, "character", { index: t.index }, () => [a.character ? (c(), r("span", {
-			key: 0,
-			class: "b-rate__character",
-			"data-character": a.character
-		}, null, 8, x)) : (c(), r("svg", S, [...n[1] ||= [i("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }, null, -1)]]))], !0)])], 42, g))), 128)), i("input", {
-			type: "hidden",
-			name: `b-rate-${f(D)}`,
-			value: T.value
-		}, null, 8, C)], 42, h));
+			]]),
+			for: w.value
+		}, [i("input", {
+			id: w.value,
+			type: "radio",
+			class: "b-radio-button__input",
+			checked: S.value,
+			disabled: v.value,
+			name: y.value,
+			value: a.value,
+			onChange: T
+		}, null, 40, p), i("span", m, [u(e.$slots, "default", {}, void 0, !0)])], 10, f));
 	}
 });
 //#endregion
-export { w as default };
+export { h as default };
 
 //# sourceMappingURL=design-system167.js.map

package/dist/design-system167.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system167.js","names":[],"sources":["../src/components/BRate/BRate.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { useModel as _useModel, mergeModels as _mergeModels, defineComponent as _defineComponent } from 'vue'\nimport { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, unref as _unref } from \"vue\"\n\nconst _hoisted_1 = [\"aria-label\", \"aria-disabled\", \"aria-valuenow\", \"aria-valuemax\", \"aria-valuetext\", \"tabindex\"]\nconst _hoisted_2 = [\"title\", \"onMousemove\", \"onClick\"]\nconst _hoisted_3 = {\n  class: \"b-rate__star-first\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_4 = [\"data-character\"]\nconst _hoisted_5 = {\n  key: 1,\n  class: \"b-rate__icon\",\n  viewBox: \"0 0 24 24\",\n  fill: \"currentColor\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_6 = {\n  class: \"b-rate__star-second\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_7 = [\"data-character\"]\nconst _hoisted_8 = {\n  key: 1,\n  class: \"b-rate__icon\",\n  viewBox: \"0 0 24 24\",\n  fill: \"currentColor\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_9 = [\"name\", \"value\"]\n\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, ref, watch } from 'vue';\n\n//#region Props\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BRate',\n  props: /*@__PURE__*/_mergeModels({\n    allowClear: { type: Boolean, default: true },\n    allowHalf: { type: Boolean, default: false },\n    count: { default: 5 },\n    disabled: { type: Boolean, default: false },\n    keyboard: { type: Boolean, default: true },\n    size: { default: 'default' },\n    tooltips: { default: () => ([]) },\n    character: {}\n  }, {\n    \"modelValue\": { default: 0 },\n    \"modelModifiers\": {},\n  }),\n  emits: /*@__PURE__*/_mergeModels([\"hover-change\", \"change\", \"focus\", \"blur\", \"keydown\"], [\"update:modelValue\"]),\n  setup(__props: any, { expose: __expose, emit: __emit }) {\n\n\n\n/**\n * The current rating value.\n * Supports v-model for controlled usage.\n */\nconst model = _useModel<number>(__props, \"modelValue\");\n\nconst emit = __emit;\n//#endregion\n\n//#region Internal state\nconst { componentUID } = useComponentId();\nconst hoverValue = ref(0);\nconst isFocused = ref(false);\nconst focusedIndex = ref(0);\n\nconst currentValue = computed(() =>\n  hoverValue.value > 0 ? hoverValue.value : model.value,\n);\n\nconst stars = computed(() => {\n  const items: { index: number; value: number }[] = [];\n  for (let i = 1; i <= __props.count; i++) {\n    items.push({ index: i, value: i });\n  }\n  return items;\n});\n//#endregion\n\n//#region Star state\nfunction getStarState(index: number): 'full' | 'half' | 'zero' {\n  const val = currentValue.value;\n  if (index <= Math.floor(val)) return 'full';\n  if (__props.allowHalf && index - 0.5 <= val && index > val) return 'half';\n  return 'zero';\n}\n//#endregion\n\n//#region Handlers\nfunction handleClick(index: number, isHalf: boolean) {\n  if (__props.disabled) return;\n\n  const newValue = isHalf && __props.allowHalf ? index - 0.5 : index;\n\n  if (__props.allowClear && newValue === model.value) {\n    model.value = 0;\n    emit('change', 0);\n  } else {\n    model.value = newValue;\n    emit('change', newValue);\n  }\n}\n\nfunction handleMouseMove(index: number, event: MouseEvent) {\n  if (__props.disabled) return;\n\n  const target = event.currentTarget as HTMLElement;\n  const rect = target.getBoundingClientRect();\n  const isLeftHalf = event.clientX - rect.left < rect.width / 2;\n\n  let newHoverValue: number;\n  if (__props.allowHalf && isLeftHalf) {\n    newHoverValue = index - 0.5;\n  } else {\n    newHoverValue = index;\n  }\n\n  if (newHoverValue !== hoverValue.value) {\n    hoverValue.value = newHoverValue;\n    emit('hover-change', newHoverValue);\n  }\n}\n\nfunction handleMouseLeave() {\n  if (__props.disabled) return;\n  hoverValue.value = 0;\n  emit('hover-change', 0);\n}\n\nfunction handleFocus() {\n  isFocused.value = true;\n  focusedIndex.value = Math.ceil(model.value) || 1;\n  emit('focus');\n}\n\nfunction handleBlur() {\n  isFocused.value = false;\n  focusedIndex.value = 0;\n  emit('blur');\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  if (__props.disabled || !__props.keyboard) return;\n  emit('keydown', event);\n\n  const step = __props.allowHalf ? 0.5 : 1;\n\n  switch (event.key) {\n    case 'ArrowRight':\n    case 'ArrowUp': {\n      event.preventDefault();\n      const next = Math.min(model.value + step, __props.count);\n      model.value = next;\n      focusedIndex.value = Math.ceil(next);\n      emit('change', next);\n      break;\n    }\n    case 'ArrowLeft':\n    case 'ArrowDown': {\n      event.preventDefault();\n      const prev = Math.max(model.value - step, 0);\n      model.value = prev;\n      focusedIndex.value = Math.ceil(prev) || 1;\n      emit('change', prev);\n      break;\n    }\n    case 'Enter':\n    case ' ': {\n      event.preventDefault();\n      if (__props.allowClear && focusedIndex.value === Math.ceil(model.value)) {\n        model.value = 0;\n        emit('change', 0);\n      }\n      break;\n    }\n  }\n}\n//#endregion\n\n//#region Expose\nconst rootRef = ref<HTMLElement | null>(null);\n\nfunction focus() {\n  rootRef.value?.focus();\n}\n\nfunction blur() {\n  rootRef.value?.blur();\n}\n\n__expose({ focus, blur });\n//#endregion\n\n//#region Watch hover for tooltip\nwatch(hoverValue, (val) => {\n  if (val === 0) {\n    focusedIndex.value = Math.ceil(model.value) || 0;\n  }\n});\n//#endregion\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", {\n    ref_key: \"rootRef\",\n    ref: rootRef,\n    class: _normalizeClass([\"b-rate\", [\n      `b-rate--${__props.size}`,\n      {\n        'b-rate--disabled': __props.disabled,\n        'b-rate--focused': isFocused.value,\n      },\n    ]]),\n    role: \"slider\",\n    \"aria-label\": _ctx.$attrs['aria-label'] as string || 'Rating',\n    \"aria-disabled\": __props.disabled || undefined,\n    \"aria-valuenow\": model.value,\n    \"aria-valuemin\": 0,\n    \"aria-valuemax\": __props.count,\n    \"aria-valuetext\": `${model.value} out of ${__props.count} stars`,\n    tabindex: __props.disabled ? -1 : 0,\n    onMouseleave: handleMouseLeave,\n    onFocus: handleFocus,\n    onBlur: handleBlur,\n    onKeydown: handleKeyDown\n  }, [\n    (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(stars.value, (star) => {\n      return (_openBlock(), _createElementBlock(\"div\", {\n        key: star.index,\n        class: _normalizeClass([\"b-rate__star\", {\n        'b-rate__star--full': getStarState(star.index) === 'full',\n        'b-rate__star--half': getStarState(star.index) === 'half',\n        'b-rate__star--zero': getStarState(star.index) === 'zero',\n        'b-rate__star--active': hoverValue.value > 0,\n        'b-rate__star--focused': isFocused.value && focusedIndex.value === star.index,\n      }]),\n        title: __props.tooltips[star.index - 1] || undefined,\n        onMousemove: (e) => handleMouseMove(star.index, e),\n        onClick: (e) => handleClick(star.index, __props.allowHalf && (e.offsetX < (e.currentTarget as HTMLElement).offsetWidth / 2))\n      }, [\n        _createElementVNode(\"div\", _hoisted_3, [\n          _renderSlot(_ctx.$slots, \"character\", {\n            index: star.index\n          }, () => [\n            (__props.character)\n              ? (_openBlock(), _createElementBlock(\"span\", {\n                  key: 0,\n                  class: \"b-rate__character\",\n                  \"data-character\": __props.character\n                }, null, 8, _hoisted_4))\n              : (_openBlock(), _createElementBlock(\"svg\", _hoisted_5, [...(_cache[0] || (_cache[0] = [\n                  _createElementVNode(\"path\", { d: \"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" }, null, -1)\n                ]))]))\n          ], true)\n        ]),\n        _createElementVNode(\"div\", _hoisted_6, [\n          _renderSlot(_ctx.$slots, \"character\", {\n            index: star.index\n          }, () => [\n            (__props.character)\n              ? (_openBlock(), _createElementBlock(\"span\", {\n                  key: 0,\n                  class: \"b-rate__character\",\n                  \"data-character\": __props.character\n                }, null, 8, _hoisted_7))\n              : (_openBlock(), _createElementBlock(\"svg\", _hoisted_8, [...(_cache[1] || (_cache[1] = [\n                  _createElementVNode(\"path\", { d: \"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" }, null, -1)\n                ]))]))\n          ], true)\n        ])\n      ], 42, _hoisted_2))\n    }), 128)),\n    _createElementVNode(\"input\", {\n      type: \"hidden\",\n      name: `b-rate-${_unref(componentUID)}`,\n      value: model.value\n    }, null, 8, _hoisted_9)\n  ], 42, _hoisted_1))\n}\n}\n\n})"],"mappings":"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"}
+{"version":3,"file":"design-system167.js","names":[],"sources":["../src/components/BRadio/BRadioButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, inject } from 'vue';\nimport { B_RADIO_GROUP_KEY, type BRadioGroupContext } from './types';\n\n//#region Props\nconst {\n  id = '',\n  disabled = false,\n  value = '',\n  name = '',\n} = defineProps<{\n  /** Custom id attribute for the radio button input. */\n  id?: string;\n  /** Whether the radio button is disabled. */\n  disabled?: boolean;\n  /** Value when used inside BRadioGroup. */\n  value?: string | number;\n  /** The name attribute for the input element. */\n  name?: string;\n}>();\n\n/**\n * The checked state of the radio button.\n */\nconst model = defineModel<boolean>({ default: false });\n\nconst emit = defineEmits<{\n  change: [checked: boolean, event: Event];\n}>();\n//#endregion\n\n//#region Group integration\nconst group = inject<BRadioGroupContext | null>(B_RADIO_GROUP_KEY, null);\n\nconst isDisabled = computed(() => disabled || group?.disabled.value || false);\nconst inputName = computed(() => name || group?.name.value || '');\nconst groupSize = computed(() => group?.size.value || 'middle');\nconst groupButtonStyle = computed(() => group?.buttonStyle.value || 'outline');\n\nconst isChecked = computed(() => {\n  if (group) {\n    return group.modelValue.value === value;\n  }\n  return model.value;\n});\n//#endregion\n\n//#region ID generation\nconst { componentUID } = useComponentId();\nconst inputId = computed(() => id || `b-radio-button-${componentUID.value}`);\n//#endregion\n\n//#region Handlers\nfunction handleChange(event: Event) {\n  if (isDisabled.value) return;\n\n  if (group) {\n    group.setValue(value);\n  } else {\n    model.value = true;\n  }\n  emit('change', true, event);\n}\n//#endregion\n</script>\n\n<template>\n  <label\n    class=\"b-radio-button b:relative b:inline-flex b:cursor-pointer b:items-center b:justify-center b:leading-none b:select-none\"\n    :class=\"[\n      `b-radio-button--${groupSize}`,\n      `b-radio-button--${groupButtonStyle}`,\n      {\n        'b-radio-button--checked': isChecked,\n        'b-radio-button--disabled b:cursor-not-allowed': isDisabled,\n      },\n    ]\"\n    :for=\"inputId\"\n  >\n    <input\n      :id=\"inputId\"\n      type=\"radio\"\n      class=\"b-radio-button__input\"\n      :checked=\"isChecked\"\n      :disabled=\"isDisabled\"\n      :name=\"inputName\"\n      :value=\"value\"\n      @change=\"handleChange\"\n    />\n    <span class=\"b-radio-button__label\">\n      <slot />\n    </span>\n  </label>\n</template>\n\n<style scoped>\n.b-radio-button {\n  --b-radio-button-bg: #ffffff;\n  --b-radio-button-checked-bg: #ffffff;\n  --b-radio-button-color: rgba(0, 0, 0, 0.88);\n  --b-radio-button-color-primary: #0958d9;\n  --b-radio-button-color-primary-hover: #0958d9;\n  --b-radio-button-color-primary-active: #003eb3;\n  --b-radio-button-color-border: #d9d9d9;\n  --b-radio-button-color-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-radio-button-color-disabled: rgba(0, 0, 0, 0.25);\n  --b-radio-button-solid-checked-bg: #0958d9;\n  --b-radio-button-solid-checked-color: #fff;\n  --b-radio-button-solid-checked-hover-bg: #003eb3;\n  --b-radio-button-solid-checked-active-bg: #002b80;\n  --b-radio-button-padding-inline: 15px;\n  --b-radio-button-border-width: 1px;\n  --b-radio-button-transition-duration: 0.2s;\n\n  border: var(--b-radio-button-border-width) solid var(--b-radio-button-color-border);\n  background-color: var(--b-radio-button-bg);\n  color: var(--b-radio-button-color);\n  padding-inline: var(--b-radio-button-padding-inline);\n  transition:\n    color var(--b-radio-button-transition-duration) ease-in-out,\n    background-color var(--b-radio-button-transition-duration) ease-in-out,\n    border-color var(--b-radio-button-transition-duration) ease-in-out;\n  margin-inline-start: calc(-1 * var(--b-radio-button-border-width));\n}\n\n.b-radio-button:first-child {\n  margin-inline-start: 0;\n  border-start-start-radius: 6px;\n  border-end-start-radius: 6px;\n}\n\n.b-radio-button:last-child {\n  border-start-end-radius: 6px;\n  border-end-end-radius: 6px;\n}\n\n/* Sizes */\n.b-radio-button--large {\n  padding-block: 8px;\n  font-size: 16px;\n  line-height: 1.5;\n}\n\n.b-radio-button--middle {\n  padding-block: 5px;\n  font-size: 14px;\n  line-height: 1.5714;\n}\n\n.b-radio-button--small {\n  padding-block: 1px;\n  font-size: 14px;\n  line-height: 1.5714;\n}\n\n/* Outline style — checked */\n.b-radio-button--outline.b-radio-button--checked {\n  color: var(--b-radio-button-color-primary);\n  border-color: var(--b-radio-button-color-primary);\n  background-color: var(--b-radio-button-checked-bg);\n  z-index: 1;\n}\n\n.b-radio-button--outline:not(.b-radio-button--disabled):hover {\n  color: var(--b-radio-button-color-primary-hover);\n  border-color: var(--b-radio-button-color-primary-hover);\n  z-index: 1;\n}\n\n/* Solid style — checked */\n.b-radio-button--solid.b-radio-button--checked {\n  color: var(--b-radio-button-solid-checked-color);\n  background-color: var(--b-radio-button-solid-checked-bg);\n  border-color: var(--b-radio-button-solid-checked-bg);\n  z-index: 1;\n}\n\n.b-radio-button--solid.b-radio-button--checked:hover {\n  background-color: var(--b-radio-button-solid-checked-hover-bg);\n  border-color: var(--b-radio-button-solid-checked-hover-bg);\n}\n\n.b-radio-button--solid:not(.b-radio-button--checked):not(.b-radio-button--disabled):hover {\n  color: var(--b-radio-button-color-primary-hover);\n  border-color: var(--b-radio-button-color-primary-hover);\n  z-index: 1;\n}\n\n/* Disabled */\n.b-radio-button--disabled {\n  background-color: var(--b-radio-button-color-disabled-bg);\n  color: var(--b-radio-button-color-disabled);\n  border-color: var(--b-radio-button-color-border);\n  opacity: 1;\n}\n\n.b-radio-button--disabled.b-radio-button--checked {\n  background-color: var(--b-radio-button-color-disabled-bg);\n  color: var(--b-radio-button-color-disabled);\n  border-color: var(--b-radio-button-color-border);\n}\n\n/* Hidden input */\n.b-radio-button__input {\n  appearance: none;\n  -webkit-appearance: none;\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n  z-index: 1;\n}\n\n.b-radio-button--disabled .b-radio-button__input {\n  cursor: not-allowed;\n}\n\n/* Focus-visible ring */\n.b-radio-button__input:focus-visible ~ .b-radio-button__label {\n  outline: 2px solid var(--b-radio-button-color-primary);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n/* Dark mode */\n[data-prefers-color='dark'] .b-radio-button {\n  --b-radio-button-bg: #141414;\n  --b-radio-button-checked-bg: #141414;\n  --b-radio-button-color: rgba(255, 255, 255, 0.85);\n  --b-radio-button-color-primary: #4d94e8;\n  --b-radio-button-color-primary-hover: #4d94e8;\n  --b-radio-button-color-primary-active: #3c89e8;\n  --b-radio-button-color-border: #424242;\n  --b-radio-button-color-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-radio-button-color-disabled: rgba(255, 255, 255, 0.25);\n  --b-radio-button-solid-checked-bg: #1668dc;\n  --b-radio-button-solid-checked-color: #fff;\n  --b-radio-button-solid-checked-hover-bg: #0958d9;\n  --b-radio-button-solid-checked-active-bg: #003eb3;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-radio-button {\n    --b-radio-button-bg: #141414;\n    --b-radio-button-checked-bg: #141414;\n    --b-radio-button-color: rgba(255, 255, 255, 0.85);\n    --b-radio-button-color-primary: #4d94e8;\n    --b-radio-button-color-primary-hover: #4d94e8;\n    --b-radio-button-color-primary-active: #3c89e8;\n    --b-radio-button-color-border: #424242;\n    --b-radio-button-color-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-radio-button-color-disabled: rgba(255, 255, 255, 0.25);\n    --b-radio-button-solid-checked-bg: #1668dc;\n    --b-radio-button-solid-checked-color: #fff;\n    --b-radio-button-solid-checked-hover-bg: #0958d9;\n    --b-radio-button-solid-checked-active-bg: #003eb3;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-radio-button {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyBA,IAAM,IAAQ,EAAoB,GAAA,aAAoB,EAEhD,IAAO,GAMP,IAAQ,EAAkC,GAAmB,KAAK,EAElE,IAAa,QAAe,EAAA,YAAY,GAAO,SAAS,SAAS,GAAM,EACvE,IAAY,QAAe,EAAA,QAAQ,GAAO,KAAK,SAAS,GAAG,EAC3D,IAAY,QAAe,GAAO,KAAK,SAAS,SAAS,EACzD,IAAmB,QAAe,GAAO,YAAY,SAAS,UAAU,EAExE,IAAY,QACZ,IACK,EAAM,WAAW,UAAU,EAAA,QAE7B,EAAM,MACb,EAII,EAAE,oBAAiB,GAAgB,EACnC,IAAU,QAAe,EAAA,MAAM,kBAAkB,EAAa,QAAQ;EAI5E,SAAS,EAAa,GAAc;AAC9B,KAAW,UAEX,IACF,EAAM,SAAS,EAAA,MAAM,GAErB,EAAM,QAAQ,IAEhB,EAAK,UAAU,IAAM,EAAM;;yBAM3B,EAyBQ,SAAA;GAxBN,OAAK,EAAA,CAAC,yHAAuH;uBAC1F,EAAA;uBAAsC,EAAA;;gCAA+D,EAAA;sDAAoE,EAAA;;;GAQ3M,KAAK,EAAA;MAEN,EASE,SAAA;GARC,IAAI,EAAA;GACL,MAAK;GACL,OAAM;GACL,SAAS,EAAA;GACT,UAAU,EAAA;GACV,MAAM,EAAA;GACN,OAAO,EAAA;GACP,UAAQ;mBAEX,EAEO,QAFP,GAEO,CADL,EAAQ,EAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,GAAA,CAAA,CAAA,CAAA,EAAA,IAAA,EAAA"}

package/dist/design-system169.js

@@ -1,8 +1,8 @@
 import e from "./design-system14.js";
 import t from "./design-system167.js";
 /* empty css                 */
-//#region src/components/BRate/BRate.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-60355169"]]);
+//#region src/components/BRadio/BRadioButton.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-401aa983"]]);
 //#endregion
 export { n as default };
 

package/dist/design-system169.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system169.js","names":[],"sources":["../src/components/BRate/BRate.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, ref, watch } from 'vue';\n\n//#region Props\nconst {\n  allowClear = true,\n  allowHalf = false,\n  count = 5,\n  disabled = false,\n  keyboard = true,\n  size = 'default',\n  tooltips = [],\n  character,\n} = defineProps<{\n  /** Whether to allow clearing the value when clicking the same star again. */\n  allowClear?: boolean;\n  /** Whether to allow half-star selection. */\n  allowHalf?: boolean;\n  /** Total number of stars. */\n  count?: number;\n  /** If true, the component is read-only and cannot be interacted with. */\n  disabled?: boolean;\n  /** Whether keyboard navigation is enabled. */\n  keyboard?: boolean;\n  /** Size of the stars. */\n  size?: 'small' | 'default' | 'large';\n  /** Array of tooltip strings displayed on hover for each star. */\n  tooltips?: string[];\n  /** Custom character/icon rendered as each star. Receives `{ index }`. */\n  character?: string;\n}>();\n\n/**\n * The current rating value.\n * Supports v-model for controlled usage.\n */\nconst model = defineModel<number>({ default: 0 });\n\nconst emit = defineEmits<{\n  'hover-change': [value: number];\n  change: [value: number];\n  focus: [];\n  blur: [];\n  keydown: [event: KeyboardEvent];\n}>();\n//#endregion\n\n//#region Internal state\nconst { componentUID } = useComponentId();\nconst hoverValue = ref(0);\nconst isFocused = ref(false);\nconst focusedIndex = ref(0);\n\nconst currentValue = computed(() =>\n  hoverValue.value > 0 ? hoverValue.value : model.value,\n);\n\nconst stars = computed(() => {\n  const items: { index: number; value: number }[] = [];\n  for (let i = 1; i <= count; i++) {\n    items.push({ index: i, value: i });\n  }\n  return items;\n});\n//#endregion\n\n//#region Star state\nfunction getStarState(index: number): 'full' | 'half' | 'zero' {\n  const val = currentValue.value;\n  if (index <= Math.floor(val)) return 'full';\n  if (allowHalf && index - 0.5 <= val && index > val) return 'half';\n  return 'zero';\n}\n//#endregion\n\n//#region Handlers\nfunction handleClick(index: number, isHalf: boolean) {\n  if (disabled) return;\n\n  const newValue = isHalf && allowHalf ? index - 0.5 : index;\n\n  if (allowClear && newValue === model.value) {\n    model.value = 0;\n    emit('change', 0);\n  } else {\n    model.value = newValue;\n    emit('change', newValue);\n  }\n}\n\nfunction handleMouseMove(index: number, event: MouseEvent) {\n  if (disabled) return;\n\n  const target = event.currentTarget as HTMLElement;\n  const rect = target.getBoundingClientRect();\n  const isLeftHalf = event.clientX - rect.left < rect.width / 2;\n\n  let newHoverValue: number;\n  if (allowHalf && isLeftHalf) {\n    newHoverValue = index - 0.5;\n  } else {\n    newHoverValue = index;\n  }\n\n  if (newHoverValue !== hoverValue.value) {\n    hoverValue.value = newHoverValue;\n    emit('hover-change', newHoverValue);\n  }\n}\n\nfunction handleMouseLeave() {\n  if (disabled) return;\n  hoverValue.value = 0;\n  emit('hover-change', 0);\n}\n\nfunction handleFocus() {\n  isFocused.value = true;\n  focusedIndex.value = Math.ceil(model.value) || 1;\n  emit('focus');\n}\n\nfunction handleBlur() {\n  isFocused.value = false;\n  focusedIndex.value = 0;\n  emit('blur');\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  if (disabled || !keyboard) return;\n  emit('keydown', event);\n\n  const step = allowHalf ? 0.5 : 1;\n\n  switch (event.key) {\n    case 'ArrowRight':\n    case 'ArrowUp': {\n      event.preventDefault();\n      const next = Math.min(model.value + step, count);\n      model.value = next;\n      focusedIndex.value = Math.ceil(next);\n      emit('change', next);\n      break;\n    }\n    case 'ArrowLeft':\n    case 'ArrowDown': {\n      event.preventDefault();\n      const prev = Math.max(model.value - step, 0);\n      model.value = prev;\n      focusedIndex.value = Math.ceil(prev) || 1;\n      emit('change', prev);\n      break;\n    }\n    case 'Enter':\n    case ' ': {\n      event.preventDefault();\n      if (allowClear && focusedIndex.value === Math.ceil(model.value)) {\n        model.value = 0;\n        emit('change', 0);\n      }\n      break;\n    }\n  }\n}\n//#endregion\n\n//#region Expose\nconst rootRef = ref<HTMLElement | null>(null);\n\nfunction focus() {\n  rootRef.value?.focus();\n}\n\nfunction blur() {\n  rootRef.value?.blur();\n}\n\ndefineExpose({ focus, blur });\n//#endregion\n\n//#region Watch hover for tooltip\nwatch(hoverValue, (val) => {\n  if (val === 0) {\n    focusedIndex.value = Math.ceil(model.value) || 0;\n  }\n});\n//#endregion\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    class=\"b-rate\"\n    :class=\"[\n      `b-rate--${size}`,\n      {\n        'b-rate--disabled': disabled,\n        'b-rate--focused': isFocused,\n      },\n    ]\"\n    role=\"slider\"\n    :aria-label=\"$attrs['aria-label'] as string || 'Rating'\"\n    :aria-disabled=\"disabled || undefined\"\n    :aria-valuenow=\"model\"\n    :aria-valuemin=\"0\"\n    :aria-valuemax=\"count\"\n    :aria-valuetext=\"`${model} out of ${count} stars`\"\n    :tabindex=\"disabled ? -1 : 0\"\n    @mouseleave=\"handleMouseLeave\"\n    @focus=\"handleFocus\"\n    @blur=\"handleBlur\"\n    @keydown=\"handleKeyDown\"\n  >\n    <div\n      v-for=\"star in stars\"\n      :key=\"star.index\"\n      class=\"b-rate__star\"\n      :class=\"{\n        'b-rate__star--full': getStarState(star.index) === 'full',\n        'b-rate__star--half': getStarState(star.index) === 'half',\n        'b-rate__star--zero': getStarState(star.index) === 'zero',\n        'b-rate__star--active': hoverValue > 0,\n        'b-rate__star--focused': isFocused && focusedIndex === star.index,\n      }\"\n      :title=\"tooltips[star.index - 1] || undefined\"\n      @mousemove=\"(e) => handleMouseMove(star.index, e)\"\n      @click=\"(e) => handleClick(star.index, allowHalf && (e.offsetX < (e.currentTarget as HTMLElement).offsetWidth / 2))\"\n    >\n      <div class=\"b-rate__star-first\" aria-hidden=\"true\">\n        <slot name=\"character\" :index=\"star.index\">\n          <span v-if=\"character\" class=\"b-rate__character\" :data-character=\"character\" />\n          <svg\n            v-else\n            class=\"b-rate__icon\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            />\n          </svg>\n        </slot>\n      </div>\n      <div class=\"b-rate__star-second\" aria-hidden=\"true\">\n        <slot name=\"character\" :index=\"star.index\">\n          <span v-if=\"character\" class=\"b-rate__character\" :data-character=\"character\" />\n          <svg\n            v-else\n            class=\"b-rate__icon\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            />\n          </svg>\n        </slot>\n      </div>\n    </div>\n\n    <input\n      type=\"hidden\"\n      :name=\"`b-rate-${componentUID}`\"\n      :value=\"model\"\n    />\n  </div>\n</template>\n\n<style scoped>\n.b-rate {\n  --b-rate-star-bg: rgba(0, 0, 0, 0.06);\n  --b-rate-star-color: #fadb14;\n  --b-rate-star-hover-scale: scale(1.1);\n  --b-rate-star-size: 20px;\n\n  display: inline-flex;\n  gap: 8px;\n  align-items: center;\n  outline: none;\n  cursor: pointer;\n  line-height: 1;\n}\n\n.b-rate--small {\n  --b-rate-star-size: 15px;\n  gap: 6px;\n}\n\n.b-rate--large {\n  --b-rate-star-size: 25px;\n  gap: 10px;\n}\n\n.b-rate--disabled {\n  cursor: not-allowed;\n  opacity: 0.65;\n}\n\n.b-rate:focus-visible {\n  outline: 2px solid var(--b-rate-star-color);\n  outline-offset: 4px;\n  border-radius: 2px;\n}\n\n.b-rate__star {\n  position: relative;\n  display: inline-flex;\n  width: var(--b-rate-star-size);\n  height: var(--b-rate-star-size);\n  cursor: pointer;\n  transition: transform 0.15s ease;\n}\n\n.b-rate--disabled .b-rate__star {\n  cursor: not-allowed;\n}\n\n.b-rate__star:not(.b-rate--disabled .b-rate__star):hover {\n  transform: var(--b-rate-star-hover-scale);\n}\n\n.b-rate__star--focused {\n  outline: 2px solid var(--b-rate-star-color);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n.b-rate__star-first,\n.b-rate__star-second {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  user-select: none;\n}\n\n.b-rate__star-first {\n  width: 50%;\n  overflow: hidden;\n  z-index: 1;\n}\n\n.b-rate__star-second {\n  z-index: 0;\n}\n\n/* Zero state: both halves use background color */\n.b-rate__star--zero .b-rate__star-first,\n.b-rate__star--zero .b-rate__star-second {\n  color: var(--b-rate-star-bg);\n}\n\n/* Full state: both halves use active color */\n.b-rate__star--full .b-rate__star-first,\n.b-rate__star--full .b-rate__star-second {\n  color: var(--b-rate-star-color);\n}\n\n/* Half state: first half active, second half background */\n.b-rate__star--half .b-rate__star-first {\n  color: var(--b-rate-star-color);\n}\n\n.b-rate__star--half .b-rate__star-second {\n  color: var(--b-rate-star-bg);\n}\n\n.b-rate__icon {\n  width: var(--b-rate-star-size);\n  height: var(--b-rate-star-size);\n  flex-shrink: 0;\n  display: block;\n}\n\n.b-rate__character {\n  font-size: var(--b-rate-star-size);\n  line-height: 1;\n  white-space: nowrap;\n}\n\n.b-rate__character::before {\n  content: attr(data-character);\n}\n\n/* Dark mode */\n[data-prefers-color='dark'] .b-rate {\n  --b-rate-star-bg: rgba(255, 255, 255, 0.12);\n  --b-rate-star-color: #fadb14;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-rate {\n    --b-rate-star-bg: rgba(255, 255, 255, 0.12);\n    --b-rate-star-color: #fadb14;\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-rate__star {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system169.js","names":[],"sources":["../src/components/BRadio/BRadioButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, inject } from 'vue';\nimport { B_RADIO_GROUP_KEY, type BRadioGroupContext } from './types';\n\n//#region Props\nconst {\n  id = '',\n  disabled = false,\n  value = '',\n  name = '',\n} = defineProps<{\n  /** Custom id attribute for the radio button input. */\n  id?: string;\n  /** Whether the radio button is disabled. */\n  disabled?: boolean;\n  /** Value when used inside BRadioGroup. */\n  value?: string | number;\n  /** The name attribute for the input element. */\n  name?: string;\n}>();\n\n/**\n * The checked state of the radio button.\n */\nconst model = defineModel<boolean>({ default: false });\n\nconst emit = defineEmits<{\n  change: [checked: boolean, event: Event];\n}>();\n//#endregion\n\n//#region Group integration\nconst group = inject<BRadioGroupContext | null>(B_RADIO_GROUP_KEY, null);\n\nconst isDisabled = computed(() => disabled || group?.disabled.value || false);\nconst inputName = computed(() => name || group?.name.value || '');\nconst groupSize = computed(() => group?.size.value || 'middle');\nconst groupButtonStyle = computed(() => group?.buttonStyle.value || 'outline');\n\nconst isChecked = computed(() => {\n  if (group) {\n    return group.modelValue.value === value;\n  }\n  return model.value;\n});\n//#endregion\n\n//#region ID generation\nconst { componentUID } = useComponentId();\nconst inputId = computed(() => id || `b-radio-button-${componentUID.value}`);\n//#endregion\n\n//#region Handlers\nfunction handleChange(event: Event) {\n  if (isDisabled.value) return;\n\n  if (group) {\n    group.setValue(value);\n  } else {\n    model.value = true;\n  }\n  emit('change', true, event);\n}\n//#endregion\n</script>\n\n<template>\n  <label\n    class=\"b-radio-button b:relative b:inline-flex b:cursor-pointer b:items-center b:justify-center b:leading-none b:select-none\"\n    :class=\"[\n      `b-radio-button--${groupSize}`,\n      `b-radio-button--${groupButtonStyle}`,\n      {\n        'b-radio-button--checked': isChecked,\n        'b-radio-button--disabled b:cursor-not-allowed': isDisabled,\n      },\n    ]\"\n    :for=\"inputId\"\n  >\n    <input\n      :id=\"inputId\"\n      type=\"radio\"\n      class=\"b-radio-button__input\"\n      :checked=\"isChecked\"\n      :disabled=\"isDisabled\"\n      :name=\"inputName\"\n      :value=\"value\"\n      @change=\"handleChange\"\n    />\n    <span class=\"b-radio-button__label\">\n      <slot />\n    </span>\n  </label>\n</template>\n\n<style scoped>\n.b-radio-button {\n  --b-radio-button-bg: #ffffff;\n  --b-radio-button-checked-bg: #ffffff;\n  --b-radio-button-color: rgba(0, 0, 0, 0.88);\n  --b-radio-button-color-primary: #0958d9;\n  --b-radio-button-color-primary-hover: #0958d9;\n  --b-radio-button-color-primary-active: #003eb3;\n  --b-radio-button-color-border: #d9d9d9;\n  --b-radio-button-color-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-radio-button-color-disabled: rgba(0, 0, 0, 0.25);\n  --b-radio-button-solid-checked-bg: #0958d9;\n  --b-radio-button-solid-checked-color: #fff;\n  --b-radio-button-solid-checked-hover-bg: #003eb3;\n  --b-radio-button-solid-checked-active-bg: #002b80;\n  --b-radio-button-padding-inline: 15px;\n  --b-radio-button-border-width: 1px;\n  --b-radio-button-transition-duration: 0.2s;\n\n  border: var(--b-radio-button-border-width) solid var(--b-radio-button-color-border);\n  background-color: var(--b-radio-button-bg);\n  color: var(--b-radio-button-color);\n  padding-inline: var(--b-radio-button-padding-inline);\n  transition:\n    color var(--b-radio-button-transition-duration) ease-in-out,\n    background-color var(--b-radio-button-transition-duration) ease-in-out,\n    border-color var(--b-radio-button-transition-duration) ease-in-out;\n  margin-inline-start: calc(-1 * var(--b-radio-button-border-width));\n}\n\n.b-radio-button:first-child {\n  margin-inline-start: 0;\n  border-start-start-radius: 6px;\n  border-end-start-radius: 6px;\n}\n\n.b-radio-button:last-child {\n  border-start-end-radius: 6px;\n  border-end-end-radius: 6px;\n}\n\n/* Sizes */\n.b-radio-button--large {\n  padding-block: 8px;\n  font-size: 16px;\n  line-height: 1.5;\n}\n\n.b-radio-button--middle {\n  padding-block: 5px;\n  font-size: 14px;\n  line-height: 1.5714;\n}\n\n.b-radio-button--small {\n  padding-block: 1px;\n  font-size: 14px;\n  line-height: 1.5714;\n}\n\n/* Outline style — checked */\n.b-radio-button--outline.b-radio-button--checked {\n  color: var(--b-radio-button-color-primary);\n  border-color: var(--b-radio-button-color-primary);\n  background-color: var(--b-radio-button-checked-bg);\n  z-index: 1;\n}\n\n.b-radio-button--outline:not(.b-radio-button--disabled):hover {\n  color: var(--b-radio-button-color-primary-hover);\n  border-color: var(--b-radio-button-color-primary-hover);\n  z-index: 1;\n}\n\n/* Solid style — checked */\n.b-radio-button--solid.b-radio-button--checked {\n  color: var(--b-radio-button-solid-checked-color);\n  background-color: var(--b-radio-button-solid-checked-bg);\n  border-color: var(--b-radio-button-solid-checked-bg);\n  z-index: 1;\n}\n\n.b-radio-button--solid.b-radio-button--checked:hover {\n  background-color: var(--b-radio-button-solid-checked-hover-bg);\n  border-color: var(--b-radio-button-solid-checked-hover-bg);\n}\n\n.b-radio-button--solid:not(.b-radio-button--checked):not(.b-radio-button--disabled):hover {\n  color: var(--b-radio-button-color-primary-hover);\n  border-color: var(--b-radio-button-color-primary-hover);\n  z-index: 1;\n}\n\n/* Disabled */\n.b-radio-button--disabled {\n  background-color: var(--b-radio-button-color-disabled-bg);\n  color: var(--b-radio-button-color-disabled);\n  border-color: var(--b-radio-button-color-border);\n  opacity: 1;\n}\n\n.b-radio-button--disabled.b-radio-button--checked {\n  background-color: var(--b-radio-button-color-disabled-bg);\n  color: var(--b-radio-button-color-disabled);\n  border-color: var(--b-radio-button-color-border);\n}\n\n/* Hidden input */\n.b-radio-button__input {\n  appearance: none;\n  -webkit-appearance: none;\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n  z-index: 1;\n}\n\n.b-radio-button--disabled .b-radio-button__input {\n  cursor: not-allowed;\n}\n\n/* Focus-visible ring */\n.b-radio-button__input:focus-visible ~ .b-radio-button__label {\n  outline: 2px solid var(--b-radio-button-color-primary);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n/* Dark mode */\n[data-prefers-color='dark'] .b-radio-button {\n  --b-radio-button-bg: #141414;\n  --b-radio-button-checked-bg: #141414;\n  --b-radio-button-color: rgba(255, 255, 255, 0.85);\n  --b-radio-button-color-primary: #4d94e8;\n  --b-radio-button-color-primary-hover: #4d94e8;\n  --b-radio-button-color-primary-active: #3c89e8;\n  --b-radio-button-color-border: #424242;\n  --b-radio-button-color-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-radio-button-color-disabled: rgba(255, 255, 255, 0.25);\n  --b-radio-button-solid-checked-bg: #1668dc;\n  --b-radio-button-solid-checked-color: #fff;\n  --b-radio-button-solid-checked-hover-bg: #0958d9;\n  --b-radio-button-solid-checked-active-bg: #003eb3;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-radio-button {\n    --b-radio-button-bg: #141414;\n    --b-radio-button-checked-bg: #141414;\n    --b-radio-button-color: rgba(255, 255, 255, 0.85);\n    --b-radio-button-color-primary: #4d94e8;\n    --b-radio-button-color-primary-hover: #4d94e8;\n    --b-radio-button-color-primary-active: #3c89e8;\n    --b-radio-button-color-border: #424242;\n    --b-radio-button-color-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-radio-button-color-disabled: rgba(255, 255, 255, 0.25);\n    --b-radio-button-solid-checked-bg: #1668dc;\n    --b-radio-button-solid-checked-color: #fff;\n    --b-radio-button-solid-checked-hover-bg: #0958d9;\n    --b-radio-button-solid-checked-active-bg: #003eb3;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-radio-button {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}