@7pmlabs/design-system 2.0.8 → 2.1.0

package/dist/design-system181.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system181.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-system182.js

@@ -1,9 +1,59 @@
-import e from "./design-system14.js";
-import t from "./design-system180.js";
-/* empty css                 */
-//#region src/components/BSelect/BSelect.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-9a851cf3"]]);
+import { useComponentId as e } from "./design-system10.js";
+import { B_RADIO_GROUP_KEY as t } from "./design-system178.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
+		},
+		value: { default: "" },
+		name: { default: "" }
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	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
+				}
+			]]),
+			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 { n as default };
+export { h as default };
 
 //# sourceMappingURL=design-system182.js.map

package/dist/design-system182.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system182.js","names":[],"sources":["../src/components/BSelect/BSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BCommonSize } from '@/types.ts';\nimport { computed, nextTick, ref, useAttrs, watch } from 'vue';\nimport {\n  BSelectMode,\n  BSelectPlacement,\n  BSelectStatus,\n  BSelectVariant,\n  type BSelectFieldNames,\n  type BSelectOption,\n} from './types.ts';\n\ndefineOptions({ inheritAttrs: false });\n\nconst attrs = useAttrs();\n\nconst {\n  options = [],\n  size = BCommonSize.Medium,\n  variant = BSelectVariant.Outlined,\n  defaultActiveFirstOption = true,\n  allowClear = false,\n  popupMatchSelectWidth = true,\n  showSearch = false,\n  listHeight = 256,\n  loading = false,\n  maxTagCount,\n  maxCount,\n  placement: _placement = BSelectPlacement.BottomLeft,\n  filterOption = true,\n  notFoundContent = 'No data',\n  fieldNames,\n  placeholder,\n  mode,\n  tokenSeparators,\n  disabled,\n  status,\n  open,\n} = defineProps<{\n  /** Data source options array. */\n  options?: BSelectOption[];\n  /** Size of the selector. */\n  size?: `${BCommonSize}`;\n  /** Visual variant. */\n  variant?: `${BSelectVariant}`;\n  /** Whether the component is disabled. */\n  disabled?: boolean;\n  /** Validation status. */\n  status?: `${BSelectStatus}`;\n  /** Placeholder text. */\n  placeholder?: string;\n  /** Selection mode: multiple or tags. */\n  mode?: `${BSelectMode}`;\n  /** Whether to activate the first option by default. */\n  defaultActiveFirstOption?: boolean;\n  /** Show clear button. */\n  allowClear?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Default open state (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Whether to show search input. Automatically true in multiple/tags mode. */\n  showSearch?: boolean;\n  /** Whether dropdown width matches selector width. */\n  popupMatchSelectWidth?: boolean | number;\n  /** Max height of popup list in px. */\n  listHeight?: number;\n  /** Loading state. */\n  loading?: boolean;\n  /** Max tag count visible (multiple/tags mode). */\n  maxTagCount?: number | 'responsive';\n  /** Max selected items (multiple/tags mode). */\n  maxCount?: number;\n  /** Dropdown placement. */\n  placement?: `${BSelectPlacement}`;\n  /** Content shown when no options match. Set to null to hide. */\n  notFoundContent?: string | null;\n  /** Customize field names mapping. */\n  fieldNames?: BSelectFieldNames;\n  /** Filter options by input. true uses default, function for custom. */\n  filterOption?: boolean | ((inputValue: string, option: BSelectOption) => boolean);\n  /** Separators for tags mode to auto-tokenize. */\n  tokenSeparators?: string[];\n  /** Whether the selected option label is included in value. */\n  labelInValue?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when value changes. */\n  change: [value: string | number | (string | number)[], option: BSelectOption | BSelectOption[]];\n  /** Fired when an option is selected. */\n  select: [value: string | number, option: BSelectOption];\n  /** Fired when an option is deselected (multiple/tags). */\n  deselect: [value: string | number, option: BSelectOption];\n  /** Fired on focus. */\n  focus: [event: FocusEvent];\n  /** Fired on blur. */\n  blur: [event: FocusEvent];\n  /** Fired when clear button is clicked. */\n  clear: [];\n  /** Fired when dropdown opens/closes. */\n  openChange: [open: boolean];\n  /** Fired when searching (multiple/tags mode). */\n  search: [value: string];\n  /** Fired on dropdown scroll. */\n  popupScroll: [event: Event];\n  /** Fired on input keydown. */\n  inputKeyDown: [event: KeyboardEvent];\n}>();\n\nconst model = defineModel<string | number | (string | number)[] | null | undefined>();\n\nconst { componentUID } = useComponentId();\nconst anchorName = computed(() => `--b-select-anchor-${componentUID.value}`);\nconst listboxId = computed(() => `b-select-listbox-${componentUID.value}`);\n\nconst selectorRef = ref<HTMLElement | null>(null);\nconst searchInputRef = ref<HTMLInputElement | null>(null);\nconst menuRef = ref<HTMLElement | null>(null);\nconst isOpen = ref(false);\nconst activeIndex = ref(-1);\nconst searchValue = ref('');\n\nconst labelField = computed(() => fieldNames?.label ?? 'label');\nconst valueField = computed(() => fieldNames?.value ?? 'value');\nconst optionsField = computed(() => fieldNames?.options ?? 'options');\n\nconst isSearchable = computed(() => {\n  if (mode === BSelectMode.Multiple || mode === BSelectMode.Tags) return true;\n  return showSearch;\n});\n\nconst getOptionLabel = (opt: BSelectOption): string => {\n  const record = opt as unknown as Record<string, unknown>;\n  const label = record[labelField.value];\n  const value = record[valueField.value];\n  return String(label ?? value ?? '');\n};\n\nconst getOptionValue = (opt: BSelectOption): string | number => {\n  const record = opt as unknown as Record<string, unknown>;\n  return record[valueField.value] as string | number;\n};\n\nconst flatOptions = computed((): BSelectOption[] => {\n  const result: BSelectOption[] = [];\n  for (const opt of options) {\n    const record = opt as unknown as Record<string, unknown>;\n    const nested = record[optionsField.value] as BSelectOption[] | undefined;\n    if (nested && Array.isArray(nested)) {\n      for (const child of nested) {\n        result.push(child);\n      }\n    } else {\n      result.push(opt);\n    }\n  }\n  return result;\n});\n\nconst filteredOptions = computed((): BSelectOption[] => {\n  if (!searchValue.value || !isSearchable.value) return flatOptions.value;\n  if (filterOption === false) return flatOptions.value;\n  if (typeof filterOption === 'function') {\n    return flatOptions.value.filter((opt) => filterOption(searchValue.value, opt));\n  }\n  const query = searchValue.value.toLowerCase();\n  return flatOptions.value.filter((opt) => {\n    return getOptionLabel(opt).toLowerCase().includes(query);\n  });\n});\n\nconst selectedValues = computed((): (string | number)[] => {\n  if (model.value == null) return [];\n  if (Array.isArray(model.value)) return model.value;\n  return [model.value];\n});\n\nconst selectedOptions = computed((): BSelectOption[] => {\n  return selectedValues.value\n    .map((v) => flatOptions.value.find((opt) => getOptionValue(opt) === v))\n    .filter(Boolean) as BSelectOption[];\n});\n\nconst displayLabel = computed((): string => {\n  if (isMultipleMode.value) return '';\n  if (selectedOptions.value.length === 0) return '';\n  return getOptionLabel(selectedOptions.value[0]);\n});\n\nconst isMultipleMode = computed(() => {\n  return mode === BSelectMode.Multiple || mode === BSelectMode.Tags;\n});\n\nconst visibleTags = computed(() => {\n  if (maxTagCount == null || maxTagCount === 'responsive') return selectedOptions.value;\n  return selectedOptions.value.slice(0, maxTagCount as number);\n});\n\nconst hiddenTagCount = computed(() => {\n  if (maxTagCount == null || maxTagCount === 'responsive') return 0;\n  return Math.max(0, selectedOptions.value.length - (maxTagCount as number));\n});\n\nconst isOptionSelected = (opt: BSelectOption): boolean => {\n  return selectedValues.value.includes(getOptionValue(opt));\n};\n\nconst openMenu = () => {\n  if (isOpen.value) return;\n  menuRef.value?.showPopover();\n};\n\nconst closeMenu = () => {\n  if (!isOpen.value) return;\n  menuRef.value?.hidePopover();\n};\n\nconst handleToggle = ({ newState }: ToggleEvent) => {\n  const nowOpen = newState === 'open';\n  isOpen.value = nowOpen;\n  emit('openChange', nowOpen);\n  if (nowOpen) {\n    if (defaultActiveFirstOption && filteredOptions.value.length > 0) {\n      activeIndex.value = 0;\n    }\n    nextTick(() => {\n      if (isSearchable.value) {\n        searchInputRef.value?.focus();\n      }\n    });\n  } else {\n    activeIndex.value = -1;\n    searchValue.value = '';\n  }\n};\n\nconst selectSingleOption = (opt: BSelectOption) => {\n  if (opt.disabled) return;\n  const val = getOptionValue(opt);\n  model.value = val;\n  emit('select', val, opt);\n  emit('change', val, opt);\n  closeMenu();\n  nextTick(() => selectorRef.value?.focus());\n};\n\nconst selectMultipleOption = (opt: BSelectOption) => {\n  if (opt.disabled) return;\n  const val = getOptionValue(opt);\n  const current = selectedValues.value.slice();\n\n  if (current.includes(val)) {\n    const next = current.filter((v) => v !== val);\n    model.value = next;\n    emit('deselect', val, opt);\n    emit(\n      'change',\n      next,\n      next.map((v) => flatOptions.value.find((o) => getOptionValue(o) === v)!).filter(Boolean),\n    );\n  } else {\n    if (maxCount != null && current.length >= maxCount) return;\n    const next = [...current, val];\n    model.value = next;\n    emit('select', val, opt);\n    emit(\n      'change',\n      next,\n      next.map((v) => flatOptions.value.find((o) => getOptionValue(o) === v)!).filter(Boolean),\n    );\n  }\n  searchValue.value = '';\n  nextTick(() => searchInputRef.value?.focus());\n};\n\nconst selectOption = (opt: BSelectOption) => {\n  if (isMultipleMode.value) {\n    selectMultipleOption(opt);\n  } else {\n    selectSingleOption(opt);\n  }\n};\n\nconst removeTag = (val: string | number) => {\n  const opt = flatOptions.value.find((o) => getOptionValue(o) === val);\n  const next = selectedValues.value.filter((v) => v !== val);\n  model.value = next;\n  if (opt) emit('deselect', val, opt);\n  emit(\n    'change',\n    next,\n    next.map((v) => flatOptions.value.find((o) => getOptionValue(o) === v)!).filter(Boolean),\n  );\n};\n\nconst handleClear = (e: Event) => {\n  e.stopPropagation();\n  if (isMultipleMode.value) {\n    model.value = [];\n  } else {\n    model.value = undefined;\n  }\n  searchValue.value = '';\n  emit('clear');\n  emit(\n    'change',\n    isMultipleMode.value ? [] : (undefined as unknown as string),\n    [] as unknown as BSelectOption,\n  );\n};\n\nconst handleSelectorClick = () => {\n  if (disabled) return;\n  if (isOpen.value) {\n    closeMenu();\n  } else {\n    openMenu();\n  }\n};\n\nconst handleSelectorFocus = (e: FocusEvent) => {\n  emit('focus', e);\n};\n\nconst handleSelectorBlur = (e: FocusEvent) => {\n  const related = e.relatedTarget as HTMLElement | null;\n  if (menuRef.value?.contains(related)) return;\n  if (selectorRef.value?.contains(related)) return;\n  emit('blur', e);\n  closeMenu();\n};\n\nconst handleSearchInput = (e: Event) => {\n  const target = e.target as HTMLInputElement;\n  searchValue.value = target.value;\n  emit('search', target.value);\n\n  if (mode === BSelectMode.Tags && tokenSeparators) {\n    const separators = tokenSeparators;\n    for (const sep of separators) {\n      if (target.value.includes(sep)) {\n        const parts = target.value.split(\n          new RegExp(\n            `[${separators.map((s) => s.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')).join('')}]`,\n          ),\n        );\n        for (const part of parts) {\n          const trimmed = part.trim();\n          if (trimmed && !selectedValues.value.includes(trimmed)) {\n            const existing = flatOptions.value.find(\n              (o) => getOptionValue(o) === trimmed || getOptionLabel(o) === trimmed,\n            );\n            if (existing) {\n              selectMultipleOption(existing);\n            } else {\n              const current = selectedValues.value.slice();\n              const next = [...current, trimmed];\n              model.value = next;\n              emit('select', trimmed, { value: trimmed, label: trimmed });\n              emit(\n                'change',\n                next,\n                next.map(\n                  (v) =>\n                    flatOptions.value.find((o) => getOptionValue(o) === v) ?? {\n                      value: v,\n                      label: String(v),\n                    },\n                ),\n              );\n            }\n          }\n        }\n        searchValue.value = '';\n        break;\n      }\n    }\n  }\n\n  if (!isOpen.value) openMenu();\n  activeIndex.value = defaultActiveFirstOption ? 0 : -1;\n};\n\nconst handleKeyDown = (e: KeyboardEvent) => {\n  emit('inputKeyDown', e);\n\n  switch (e.key) {\n    case 'ArrowDown': {\n      e.preventDefault();\n      if (!isOpen.value) {\n        openMenu();\n        return;\n      }\n      const opts = filteredOptions.value;\n      const nextIdx = activeIndex.value + 1;\n      for (let i = 0; i < opts.length; i++) {\n        const idx = (nextIdx + i) % opts.length;\n        if (!opts[idx].disabled) {\n          activeIndex.value = idx;\n          break;\n        }\n      }\n      break;\n    }\n    case 'ArrowUp': {\n      e.preventDefault();\n      if (!isOpen.value) {\n        openMenu();\n        return;\n      }\n      const opts = filteredOptions.value;\n      const prevIdx = activeIndex.value - 1;\n      for (let i = 0; i < opts.length; i++) {\n        const idx = (((prevIdx - i) % opts.length) + opts.length) % opts.length;\n        if (!opts[idx].disabled) {\n          activeIndex.value = idx;\n          break;\n        }\n      }\n      break;\n    }\n    case 'Enter': {\n      e.preventDefault();\n      if (isOpen.value && activeIndex.value >= 0) {\n        const opt = filteredOptions.value[activeIndex.value];\n        if (opt && !opt.disabled) {\n          selectOption(opt);\n        }\n      } else if (!isOpen.value) {\n        openMenu();\n      }\n      break;\n    }\n    case ' ': {\n      if (!isSearchable.value || !searchValue.value) {\n        e.preventDefault();\n        if (!isOpen.value) {\n          openMenu();\n        } else if (activeIndex.value >= 0) {\n          const opt = filteredOptions.value[activeIndex.value];\n          if (opt && !opt.disabled) {\n            selectOption(opt);\n          }\n        }\n      }\n      break;\n    }\n    case 'Escape': {\n      e.preventDefault();\n      closeMenu();\n      selectorRef.value?.focus();\n      break;\n    }\n    case 'Backspace': {\n      if (isMultipleMode.value && !searchValue.value && selectedValues.value.length > 0) {\n        const lastVal = selectedValues.value[selectedValues.value.length - 1];\n        removeTag(lastVal);\n      }\n      break;\n    }\n    case 'Tab': {\n      if (isOpen.value) {\n        closeMenu();\n      }\n      break;\n    }\n  }\n};\n\nconst handlePopupScroll = (e: Event) => {\n  emit('popupScroll', e);\n};\n\nconst scrollActiveIntoView = () => {\n  nextTick(() => {\n    const active = menuRef.value?.querySelector('[data-active=\"true\"]');\n    active?.scrollIntoView({ block: 'nearest' });\n  });\n};\n\nwatch(activeIndex, scrollActiveIntoView);\n\nwatch(\n  () => open,\n  (val) => {\n    if (val === true && !isOpen.value) openMenu();\n    else if (val === false && isOpen.value) closeMenu();\n  },\n);\n\nconst showClear = computed(() => {\n  if (!allowClear || disabled) return false;\n  if (isMultipleMode.value) return selectedValues.value.length > 0;\n  return model.value != null && model.value !== '';\n});\n\ndefineExpose({\n  focus: () => selectorRef.value?.focus(),\n  blur: () => selectorRef.value?.blur(),\n});\n</script>\n\n<template>\n  <div\n    class=\"b-select b:relative b:inline-flex b:w-full\"\n    :class=\"{ 'b-select--disabled': disabled }\"\n  >\n    <!-- Selector trigger -->\n    <div\n      ref=\"selectorRef\"\n      v-bind=\"attrs\"\n      class=\"b-select__selector b:box-border b:flex b:w-full b:cursor-pointer b:items-center b:gap-1 b:transition-all b:outline-none\"\n      :class=\"[\n        {\n          'b:min-h-6 b:px-2 b:text-sm': size === BCommonSize.Small,\n          'b:min-h-8 b:px-3 b:text-sm': size === BCommonSize.Medium,\n          'b:min-h-10 b:px-3 b:text-base': size === BCommonSize.Large,\n        },\n        {\n          'b:rounded-lg b:border-1 b:border-[var(--b-select-border-color)] b:bg-[var(--b-select-selector-bg)] b:hover:not-disabled:border-[var(--b-select-hover-border-color)] b:focus:not-disabled:border-[var(--b-select-active-border-color)] b:focus:not-disabled:shadow-[0_0_0_2px_var(--b-select-active-outline-color)]':\n            variant === BSelectVariant.Outlined,\n          'b:rounded-lg b:border-1 b:border-transparent b:bg-[var(--b-select-filled-bg)] b:hover:not-disabled:bg-[var(--b-select-filled-bg)] b:focus:not-disabled:border-[var(--b-select-active-border-color)] b:focus:not-disabled:bg-[var(--b-select-selector-bg)] b:focus:not-disabled:shadow-[0_0_0_2px_var(--b-select-active-outline-color)]':\n            variant === BSelectVariant.Filled,\n          'b:rounded-lg b:border-1 b:border-transparent b:bg-transparent':\n            variant === BSelectVariant.Borderless,\n        },\n        {\n          'b:border-red-500! b:hover:not-disabled:border-red-400! b:focus:not-disabled:border-red-500! b:focus:not-disabled:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]!':\n            status === BSelectStatus.Error,\n          'b:border-yellow-500! b:hover:not-disabled:border-yellow-400! b:focus:not-disabled:border-yellow-500! b:focus:not-disabled:shadow-[0_0_0_2px_rgba(255,215,5,0.1)]!':\n            status === BSelectStatus.Warning,\n        },\n        {\n          'b:cursor-not-allowed b:opacity-40': disabled,\n        },\n        {\n          'b-select__selector--open': isOpen,\n        },\n      ]\"\n      :tabindex=\"disabled ? -1 : 0\"\n      role=\"combobox\"\n      :aria-expanded=\"isOpen\"\n      :aria-controls=\"isOpen ? listboxId : undefined\"\n      :aria-activedescendant=\"isOpen && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined\"\n      aria-haspopup=\"listbox\"\n      :aria-label=\"placeholder ?? 'Select'\"\n      :aria-disabled=\"disabled ?? false\"\n      @click=\"handleSelectorClick\"\n      @focus=\"handleSelectorFocus\"\n      @blur=\"handleSelectorBlur\"\n      @keydown=\"handleKeyDown\"\n    >\n      <!-- Multiple mode: tags -->\n      <template v-if=\"isMultipleMode\">\n        <span\n          v-for=\"opt in visibleTags\"\n          :key=\"getOptionValue(opt)\"\n          class=\"b-select__tag b:inline-flex b:max-w-full b:items-center b:gap-0.5 b:rounded b:border-1 b:border-[var(--b-select-multiple-item-border-color)] b:bg-[var(--b-select-multiple-item-bg)] b:leading-none\"\n          :class=\"[\n            {\n              'b:h-4 b:px-1 b:text-xs': size === BCommonSize.Small,\n              'b:h-6 b:px-1.5 b:text-xs': size === BCommonSize.Medium,\n              'b:h-8 b:px-2 b:text-sm': size === BCommonSize.Large,\n            },\n          ]\"\n        >\n          <span class=\"b:truncate\">{{ getOptionLabel(opt) }}</span>\n          <button\n            type=\"button\"\n            class=\"b-select__tag-close b:ml-0.5 b:flex b:h-3.5 b:w-3.5 b:cursor-pointer b:items-center b:justify-center b:rounded-full b:border-none b:bg-transparent b:text-[10px] b:text-zinc-400 b:hover:bg-zinc-200 b:hover:text-zinc-600\"\n            :aria-label=\"`Remove ${getOptionLabel(opt)}`\"\n            tabindex=\"-1\"\n            @click.stop=\"removeTag(getOptionValue(opt))\"\n            @mousedown.prevent\n          >\n            <svg aria-hidden=\"true\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"><path d=\"M1 1l6 6M7 1L1 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\n          </button>\n        </span>\n        <span\n          v-if=\"hiddenTagCount > 0\"\n          class=\"b-select__tag b-select__tag--count b:relative b:z-1 b:inline-flex b:shrink-0 b:items-center b:rounded b:bg-[var(--b-select-multiple-count-bg)] b:px-1.5 b:text-xs b:leading-none b:text-[var(--b-select-multiple-count-color)]\"\n          :class=\"[\n            {\n              'b:h-4': size === BCommonSize.Small,\n              'b:h-6': size === BCommonSize.Medium,\n              'b:h-8': size === BCommonSize.Large,\n            },\n          ]\"\n        >\n          +{{ hiddenTagCount }}\n        </span>\n        <input\n          ref=\"searchInputRef\"\n          class=\"b-select__search b:min-w-4 b:flex-1 b:border-none b:bg-transparent b:text-sm b:outline-none b:placeholder:text-[var(--b-select-placeholder-color)]\"\n          :value=\"searchValue\"\n          :placeholder=\"selectedValues.length === 0 ? placeholder : undefined\"\n          :disabled=\"disabled\"\n          :aria-label=\"placeholder ?? 'Search options'\"\n          autocomplete=\"off\"\n          @input=\"handleSearchInput\"\n          @keydown=\"handleKeyDown\"\n          @focus=\"handleSelectorFocus\"\n          @blur=\"handleSelectorBlur\"\n        />\n      </template>\n\n      <!-- Single mode -->\n      <template v-else>\n        <span\n          v-if=\"displayLabel && !searchValue\"\n          class=\"b-select__value b:flex-1 b:truncate b:text-[color:var(--b-select-color)]\"\n        >\n          <slot name=\"selectedLabel\" :option=\"selectedOptions[0]\">\n            {{ displayLabel }}\n          </slot>\n        </span>\n        <span\n          v-else-if=\"!searchValue && !displayLabel\"\n          class=\"b-select__placeholder b:flex-1 b:truncate b:text-[var(--b-select-placeholder-color)]\"\n        >\n          {{ placeholder }}\n        </span>\n        <input\n          v-if=\"isSearchable\"\n          ref=\"searchInputRef\"\n          class=\"b-select__search b:absolute b:inset-0 b:w-full b:border-none b:bg-transparent b:px-3 b:text-sm b:outline-none b:placeholder:text-[var(--b-select-placeholder-color)]\"\n          :class=\"{ 'b:opacity-0': !isOpen }\"\n          :value=\"searchValue\"\n          :disabled=\"disabled\"\n          :aria-label=\"placeholder ?? 'Search options'\"\n          autocomplete=\"off\"\n          tabindex=\"-1\"\n          @input=\"handleSearchInput\"\n          @keydown=\"handleKeyDown\"\n        />\n      </template>\n\n      <!-- Clear button -->\n      <button\n        v-if=\"showClear\"\n        type=\"button\"\n        class=\"b-select__clear b:z-1 b:flex b:h-4 b:w-4 b:shrink-0 b:cursor-pointer b:items-center b:justify-center b:rounded-full b:border-none b:bg-[var(--b-select-clear-bg)] b:text-xs b:text-zinc-400 b:hover:text-zinc-600\"\n        aria-label=\"Clear selection\"\n        tabindex=\"-1\"\n        @click=\"handleClear\"\n        @mousedown.prevent\n      >\n        <svg aria-hidden=\"true\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"><path d=\"M1 1l6 6M7 1L1 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\n      </button>\n\n      <!-- Suffix arrow -->\n      <span\n        class=\"b-select__arrow b:ml-auto b:flex b:shrink-0 b:items-center b:text-zinc-400 b:transition-transform b:duration-200\"\n        :class=\"{ 'b:rotate-180': isOpen }\"\n        aria-hidden=\"true\"\n      >\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n          <path\n            d=\"M2.5 4.5L6 8L9.5 4.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </span>\n\n      <!-- Loading spinner -->\n      <span\n        v-if=\"loading\"\n        class=\"b-select__loading b:ml-1 b:flex b:shrink-0 b:animate-spin b:items-center b:text-zinc-400\"\n        aria-hidden=\"true\"\n      >\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n          <circle\n            cx=\"7\"\n            cy=\"7\"\n            r=\"5.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-dasharray=\"24\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n      </span>\n    </div>\n\n    <!-- Dropdown popup -->\n    <div\n      ref=\"menuRef\"\n      :id=\"listboxId\"\n      class=\"b-select__dropdown b:overflow-auto b:rounded-lg b:bg-[var(--b-select-selector-bg)] b:shadow-lg\"\n      :class=\"{ 'b:w-[anchor-size(width)]': popupMatchSelectWidth === true }\"\n      :style=\"[\n        typeof popupMatchSelectWidth === 'number'\n          ? { width: `${popupMatchSelectWidth}px` }\n          : undefined,\n        { maxHeight: `${listHeight}px` },\n      ]\"\n      popover\n      role=\"listbox\"\n      :aria-multiselectable=\"isMultipleMode || undefined\"\n      :aria-label=\"placeholder ?? 'Options'\"\n      @toggle=\"handleToggle\"\n      @scroll=\"handlePopupScroll\"\n    >\n      <!-- Options -->\n      <div v-if=\"filteredOptions.length > 0\" class=\"b:p-1\">\n        <template v-for=\"(opt, idx) in filteredOptions\" :key=\"getOptionValue(opt)\">\n          <div\n            :id=\"`${listboxId}-option-${idx}`\"\n            class=\"b-select__option b:cursor-pointer b:rounded-md b:px-[var(--b-select-option-padding-x)] b:py-[var(--b-select-option-padding-y)] b:text-[length:var(--b-select-option-font-size)] b:leading-[var(--b-select-option-line-height)] b:transition-colors\"\n            :class=\"[\n              {\n                'b:bg-[var(--b-select-option-active-bg)]': idx === activeIndex && !opt.disabled,\n                'b:bg-[var(--b-select-option-selected-bg)] b:font-[var(--b-select-option-selected-font-weight)] b:text-[color:var(--b-select-option-selected-color)]':\n                  isOptionSelected(opt) && idx !== activeIndex,\n                'b:bg-[var(--b-select-option-selected-bg)] b:font-[var(--b-select-option-selected-font-weight)]':\n                  isOptionSelected(opt) && idx === activeIndex,\n                'b:cursor-not-allowed b:opacity-40': opt.disabled,\n                'b:hover:bg-[var(--b-select-option-active-bg)]':\n                  !opt.disabled && idx !== activeIndex && !isOptionSelected(opt),\n              },\n            ]\"\n            :data-active=\"idx === activeIndex\"\n            :aria-selected=\"isOptionSelected(opt)\"\n            :aria-disabled=\"opt.disabled ?? false\"\n            role=\"option\"\n            @mousedown.prevent=\"selectOption(opt)\"\n            @mouseenter=\"activeIndex = idx\"\n          >\n            <slot name=\"option\" :option=\"opt\" :index=\"idx\" :selected=\"isOptionSelected(opt)\">\n              <span class=\"b:flex b:items-center b:justify-between\">\n                <span>{{ getOptionLabel(opt) }}</span>\n                <svg\n                  v-if=\"isMultipleMode && isOptionSelected(opt)\"\n                  class=\"b:ml-2 b:h-3 b:w-3 b:text-[var(--b-select-active-border-color)]\"\n                  viewBox=\"0 0 12 12\"\n                  fill=\"none\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    d=\"M2 6L5 9L10 3\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.5\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </span>\n            </slot>\n          </div>\n        </template>\n      </div>\n\n      <!-- Not found content -->\n      <div\n        v-else-if=\"notFoundContent !== null\"\n        class=\"b-select__empty b:px-4 b:py-6 b:text-center b:text-sm b:text-zinc-400\"\n      >\n        {{ notFoundContent }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.b-select {\n  --b-select-active-border-color: #1677ff;\n  --b-select-active-outline-color: rgba(5, 145, 255, 0.1);\n  --b-select-hover-border-color: #4096ff;\n  --b-select-border-color: #d9d9d9;\n  --b-select-color: rgba(0, 0, 0, 0.88);\n  --b-select-placeholder-color: #606870;\n  --b-select-clear-bg: #ffffff;\n  --b-select-selector-bg: #ffffff;\n  --b-select-filled-bg: rgba(0, 0, 0, 0.04);\n  --b-select-multiple-item-bg: rgba(0, 0, 0, 0.06);\n  --b-select-multiple-count-bg: #f0f0f0;\n  --b-select-multiple-count-color: #1f1f1f;\n  --b-select-multiple-item-border-color: transparent;\n  --b-select-multiple-item-border-color-disabled: transparent;\n  --b-select-multiple-item-color-disabled: rgba(0, 0, 0, 0.25);\n  --b-select-multiple-selector-bg-disabled: rgba(0, 0, 0, 0.04);\n  --b-select-option-active-bg: rgba(0, 0, 0, 0.04);\n  --b-select-option-font-size: 14px;\n  --b-select-option-height: 32px;\n  --b-select-option-line-height: 1.5714;\n  --b-select-option-padding-x: 12px;\n  --b-select-option-padding-y: 5px;\n  --b-select-option-selected-bg: #e6f4ff;\n  --b-select-option-selected-color: rgba(0, 0, 0, 0.88);\n  --b-select-option-selected-font-weight: 600;\n  --b-select-z-index-popup: 1050;\n}\n\n@media (prefers-color-scheme: dark) {\n  .b-select {\n    --b-select-active-border-color: #1668dc;\n    --b-select-active-outline-color: rgba(22, 104, 220, 0.15);\n    --b-select-hover-border-color: #3c89e8;\n    --b-select-border-color: #424242;\n    --b-select-color: rgba(255, 255, 255, 0.88);\n    --b-select-placeholder-color: #9ca3af;\n    --b-select-clear-bg: #1f1f1f;\n    --b-select-selector-bg: #1f1f1f;\n    --b-select-filled-bg: rgba(255, 255, 255, 0.08);\n    --b-select-multiple-item-bg: rgba(255, 255, 255, 0.1);\n    --b-select-multiple-count-bg: #353535;\n    --b-select-multiple-count-color: #e0e0e0;\n    --b-select-multiple-item-color-disabled: rgba(255, 255, 255, 0.25);\n    --b-select-multiple-selector-bg-disabled: rgba(255, 255, 255, 0.08);\n    --b-select-option-active-bg: rgba(255, 255, 255, 0.08);\n    --b-select-option-selected-bg: #111a2c;\n    --b-select-option-selected-color: rgba(255, 255, 255, 0.88);\n  }\n}\n\n[data-prefers-color='light'] .b-select {\n  --b-select-active-border-color: #1677ff;\n  --b-select-active-outline-color: rgba(5, 145, 255, 0.1);\n  --b-select-hover-border-color: #4096ff;\n  --b-select-border-color: #d9d9d9;\n  --b-select-color: rgba(0, 0, 0, 0.88);\n  --b-select-placeholder-color: #606870;\n  --b-select-clear-bg: #ffffff;\n  --b-select-selector-bg: #ffffff;\n  --b-select-filled-bg: rgba(0, 0, 0, 0.04);\n  --b-select-multiple-item-bg: rgba(0, 0, 0, 0.06);\n  --b-select-multiple-count-bg: #f0f0f0;\n  --b-select-multiple-count-color: #1f1f1f;\n  --b-select-multiple-item-color-disabled: rgba(0, 0, 0, 0.25);\n  --b-select-multiple-selector-bg-disabled: rgba(0, 0, 0, 0.04);\n  --b-select-option-active-bg: rgba(0, 0, 0, 0.04);\n  --b-select-option-selected-bg: #e6f4ff;\n  --b-select-option-selected-color: rgba(0, 0, 0, 0.88);\n}\n\n[data-prefers-color='dark'] .b-select {\n  --b-select-active-border-color: #1668dc;\n  --b-select-active-outline-color: rgba(22, 104, 220, 0.15);\n  --b-select-hover-border-color: #3c89e8;\n  --b-select-border-color: #424242;\n  --b-select-color: rgba(255, 255, 255, 0.88);\n  --b-select-placeholder-color: #9ca3af;\n  --b-select-clear-bg: #1f1f1f;\n  --b-select-selector-bg: #1f1f1f;\n  --b-select-filled-bg: rgba(255, 255, 255, 0.08);\n  --b-select-multiple-item-bg: rgba(255, 255, 255, 0.1);\n  --b-select-multiple-item-color-disabled: rgba(255, 255, 255, 0.25);\n  --b-select-multiple-selector-bg-disabled: rgba(255, 255, 255, 0.08);\n  --b-select-option-active-bg: rgba(255, 255, 255, 0.08);\n  --b-select-option-selected-bg: #111a2c;\n  --b-select-option-selected-color: rgba(255, 255, 255, 0.88);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-select {\n    --b-select-active-border-color: #1668dc;\n    --b-select-active-outline-color: rgba(22, 104, 220, 0.15);\n    --b-select-hover-border-color: #3c89e8;\n    --b-select-border-color: #424242;\n    --b-select-color: rgba(255, 255, 255, 0.88);\n    --b-select-placeholder-color: #9ca3af;\n    --b-select-clear-bg: #1f1f1f;\n    --b-select-selector-bg: #1f1f1f;\n    --b-select-filled-bg: rgba(255, 255, 255, 0.08);\n    --b-select-multiple-item-bg: rgba(255, 255, 255, 0.1);\n    --b-select-multiple-item-color-disabled: rgba(255, 255, 255, 0.25);\n    --b-select-multiple-selector-bg-disabled: rgba(255, 255, 255, 0.08);\n    --b-select-option-active-bg: rgba(255, 255, 255, 0.08);\n    --b-select-option-selected-bg: #111a2c;\n    --b-select-option-selected-color: rgba(255, 255, 255, 0.88);\n  }\n}\n\n.b-select__selector {\n  anchor-name: v-bind('anchorName');\n}\n\n.b-select__dropdown {\n  position: absolute;\n  margin-top: 4px;\n  z-index: var(--b-select-z-index-popup);\n\n  position-anchor: v-bind('anchorName');\n  position-try-fallbacks: --b-select-top;\n  inset: auto;\n  top: anchor(bottom);\n  left: anchor(left);\n\n  transition:\n    display 0.2s,\n    opacity 0.2s;\n  transition-behavior: allow-discrete;\n  opacity: 0;\n\n  &:popover-open {\n    opacity: 1;\n\n    @starting-style {\n      opacity: 0;\n    }\n  }\n}\n\n@position-try --b-select-top {\n  inset: auto;\n  bottom: anchor(top);\n  left: anchor(left);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-select__dropdown {\n    transition: none;\n  }\n\n  .b-select__arrow {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system182.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-system184.js

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

package/dist/{design-system167.js.map → design-system184.js.map}

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"design-system184.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":""}

package/dist/design-system185.js

@@ -1,8 +1,72 @@
-import e from "./design-system183.js";
-/* empty css                 */
-//#region src/components/BSkeleton/BSkeletonAvatar.vue
-var t = e;
+import { B_RADIO_GROUP_KEY as e } from "./design-system178.js";
+import t from "./design-system181.js";
+import n from "./design-system184.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({
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		name: { default: "" },
+		options: { default: () => void 0 },
+		optionType: { default: "default" },
+		size: { default: "middle" },
+		buttonStyle: { default: "outline" },
+		block: {
+			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) : []);
+		function w(e) {
+			x.value = e, S("change", 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));
+	}
+});
 //#endregion
-export { t as default };
+export { x 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/BSkeleton/BSkeletonAvatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { BSkeletonAvatarShape, BSkeletonAvatarSize } from './types';\n\nconst {\n  active = false,\n  shape = 'circle',\n  size = 'default',\n} = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n  /** Avatar shape. @default 'circle' */\n  shape?: BSkeletonAvatarShape;\n  /** Avatar size: preset string or pixel number. @default 'default' */\n  size?: BSkeletonAvatarSize;\n}>();\n\nconst sizeStyle = computed<Record<string, string> | undefined>(() => {\n  if (typeof size === 'number') {\n    return { width: `${size}px`, height: `${size}px`, lineHeight: `${size}px` };\n  }\n  return undefined;\n});\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-avatar',\n  `b-skeleton-avatar--${shape}`,\n  typeof size === 'string' ? `b-skeleton-avatar--${size}` : null,\n  { 'b-skeleton-element--active': active },\n]);\n</script>\n\n<template>\n  <span :class=\"classes\" :style=\"sizeStyle\" role=\"presentation\" aria-hidden=\"true\" />\n</template>\n\n<style>\n.b-skeleton-avatar {\n  display: inline-block;\n  vertical-align: top;\n  width: var(--b-skeleton-avatar-size-default);\n  height: var(--b-skeleton-avatar-size-default);\n  background: var(--b-skeleton-gradient-from-color);\n}\n\n.b-skeleton-avatar--small {\n  width: var(--b-skeleton-avatar-size-small);\n  height: var(--b-skeleton-avatar-size-small);\n}\n\n.b-skeleton-avatar--large {\n  width: var(--b-skeleton-avatar-size-large);\n  height: var(--b-skeleton-avatar-size-large);\n}\n\n.b-skeleton-avatar--circle {\n  border-radius: 50%;\n}\n\n.b-skeleton-avatar--square {\n  border-radius: var(--b-skeleton-border-radius);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system185.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAmCA,IAAM,IAAQ,EAA4B,GAAA,aAAE,EAEtC,IAAO,GAMP,IAAoB,QACnB,EAAA,UACE,EAAA,QAAQ,KAAK,MACd,OAAO,KAAQ,YAAY,OAAO,KAAQ,WACrC;GAAE,OAAO,OAAO,EAAI;GAAE,OAAO;GAAK,GAEpC,EACP,GANmB,EAAE,CAOvB;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,UAAO,EAAA;GAAG,MAAG,EAAA;GAAG,MAAG,EAAA;GAAG,YAAS,EAAA;GAAG,aAAU,EAAA;GAAG,CAAC,CAOxD;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,EAAA,eAAe,WAAW,IAAe,EAAQ;yBAKtF,EAqBM,OAAA;GApBJ,OAAK,EAAA,CAAC,0DAAwD;4CACN,EAAA;eAAwB,EAAA,eAAU;eAAgC,EAAA,eAAU;;GAKpI,MAAK;MAEW,EAAA,MAAkB,SAAM,KAAA,EAAA,GAAA,EACtC,EAQY,GAAA,EAAA,KAAA,GAAA,EAAA,EANI,EAAA,QAAP,YAFT,EAQY,EAPL,EAAA,MAAc,EAAA;GAElB,KAAK,EAAI;GACT,OAAO,EAAI;GACX,UAAU,EAAI;;oBAEA,CAAA,EAAA,EAAZ,EAAI,MAAK,EAAA,EAAA,CAAA,CAAA;;6CAGhB,EAAe,EAAA,QAAA,WAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,GAAA,CAAA,EAAA,EAAA"}

package/dist/design-system187.js

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

package/dist/{design-system170.js.map → design-system187.js.map}

@@ -1 +1 @@
-{"version":3,"file":"design-system170.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAmCA,IAAM,IAAQ,EAA4B,GAAA,aAAE,EAEtC,IAAO,GAMP,IAAoB,QACnB,EAAA,UACE,EAAA,QAAQ,KAAK,MACd,OAAO,KAAQ,YAAY,OAAO,KAAQ,WACrC;GAAE,OAAO,OAAO,EAAI;GAAE,OAAO;GAAK,GAEpC,EACP,GANmB,EAAE,CAOvB;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,UAAO,EAAA;GAAG,MAAG,EAAA;GAAG,MAAG,EAAA;GAAG,YAAS,EAAA;GAAG,aAAU,EAAA;GAAG,CAAC,CAOxD;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,EAAA,eAAe,WAAW,IAAe,EAAQ;yBAKtF,EAqBM,OAAA;GApBJ,OAAK,EAAA,CAAC,0DAAwD;4CACN,EAAA;eAAwB,EAAA,eAAU;eAAgC,EAAA,eAAU;;GAKpI,MAAK;MAEW,EAAA,MAAkB,SAAM,KAAA,EAAA,GAAA,EACtC,EAQY,GAAA,EAAA,KAAA,GAAA,EAAA,EANI,EAAA,QAAP,YAFT,EAQY,EAPL,EAAA,MAAc,EAAA;GAElB,KAAK,EAAI;GACT,OAAO,EAAI;GACX,UAAU,EAAI;;oBAEA,CAAA,EAAA,EAAZ,EAAI,MAAK,EAAA,EAAA,CAAA,CAAA;;6CAGhB,EAAe,EAAA,QAAA,WAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,GAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"design-system187.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":""}

package/dist/design-system188.js

@@ -1,8 +1,185 @@
-import e from "./design-system186.js";
-/* empty css                 */
-//#region src/components/BSkeleton/BSkeleton.vue
-var t = e;
+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 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		keyboard: {
+			type: Boolean,
+			default: !0
+		},
+		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;
+				}
+				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));
+	}
+});
 //#endregion
-export { t as default };
+export { w as default };
 
 //# sourceMappingURL=design-system188.js.map