@7pmlabs/design-system 2.0.8 → 2.1.0

package/dist/design-system197.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system197.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { BSkeletonInputSize } from './types';\n\nconst {\n  active = false,\n  block = false,\n  size = 'default',\n} = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n  /** Stretch to full width. @default false */\n  block?: boolean;\n  /** Input size. @default 'default' */\n  size?: BSkeletonInputSize;\n}>();\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-input',\n  `b-skeleton-input--${size}`,\n  {\n    'b-skeleton-input--block': block,\n    'b-skeleton-element--active': active,\n  },\n]);\n</script>\n\n<template>\n  <span :class=\"classes\" role=\"presentation\" aria-hidden=\"true\" />\n</template>\n\n<style>\n.b-skeleton-input {\n  display: inline-block;\n  vertical-align: top;\n  height: var(--b-skeleton-control-height, 32px);\n  min-width: var(--b-skeleton-input-min-width, 160px);\n  background: var(--b-skeleton-gradient-from-color, oklch(93% 0 0));\n  border-radius: var(--b-skeleton-border-radius, 6px);\n}\n\n.b-skeleton-input--small {\n  height: var(--b-skeleton-control-height-sm, 24px);\n  min-width: 96px;\n  border-radius: var(--b-skeleton-border-radius-sm, 4px);\n}\n\n.b-skeleton-input--large {\n  height: var(--b-skeleton-control-height-lg, 40px);\n  min-width: 200px;\n}\n\n.b-skeleton-input--block {\n  display: block;\n  width: 100%;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system197.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":""}

package/dist/design-system198.js

@@ -1,31 +1,35 @@
-import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, openBlock as i, renderSlot as a } from "vue";
-//#region src/components/BSkeleton/BSkeletonNode.vue?vue&type=script&setup=true&lang.ts
+import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, normalizeStyle as i, openBlock as a } from "vue";
+//#region src/components/BSkeleton/BSkeletonAvatar.vue?vue&type=script&setup=true&lang.ts
 var o = /* @__PURE__ */ n({
-	__name: "BSkeletonNode",
+	__name: "BSkeletonAvatar",
 	props: {
 		active: {
 			type: Boolean,
 			default: !1
 		},
-		fullSize: {
-			type: Boolean,
-			default: !1
-		}
+		shape: { default: "circle" },
+		size: { default: "default" }
 	},
 	setup(n) {
-		let o = e(() => [
+		let o = e(() => {
+			if (typeof n.size == "number") return {
+				width: `${n.size}px`,
+				height: `${n.size}px`,
+				lineHeight: `${n.size}px`
+			};
+		}), s = e(() => [
 			"b-skeleton-element",
-			"b-skeleton-node",
-			{
-				"b-skeleton-node--full-size": n.fullSize,
-				"b-skeleton-element--active": n.active
-			}
+			"b-skeleton-avatar",
+			`b-skeleton-avatar--${n.shape}`,
+			typeof n.size == "string" ? `b-skeleton-avatar--${n.size}` : null,
+			{ "b-skeleton-element--active": n.active }
 		]);
-		return (e, n) => (i(), t("div", {
-			class: r(o.value),
+		return (e, n) => (a(), t("span", {
+			class: r(s.value),
+			style: i(o.value),
 			role: "presentation",
 			"aria-hidden": "true"
-		}, [a(e.$slots, "default")], 2));
+		}, null, 6));
 	}
 });
 //#endregion

package/dist/design-system198.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system198.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonNode.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nconst { active = false, fullSize = false } = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n  /** Stretch to fill the parent's width and height. @default false */\n  fullSize?: boolean;\n}>();\n\ndefineSlots<{\n  /** Custom content placed inside the placeholder block (e.g., an icon). */\n  default?(): unknown;\n}>();\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-node',\n  {\n    'b-skeleton-node--full-size': fullSize,\n    'b-skeleton-element--active': active,\n  },\n]);\n</script>\n\n<template>\n  <div :class=\"classes\" role=\"presentation\" aria-hidden=\"true\">\n    <slot />\n  </div>\n</template>\n\n<style>\n.b-skeleton-node {\n  display: inline-flex;\n  vertical-align: top;\n  align-items: center;\n  justify-content: center;\n  width: var(--b-skeleton-image-size, 96px);\n  height: var(--b-skeleton-image-size, 96px);\n  background: var(--b-skeleton-gradient-from-color, oklch(93% 0 0));\n  border-radius: var(--b-skeleton-border-radius, 6px);\n  color: oklch(75% 0 0);\n}\n\n.b-skeleton-node--full-size {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;EAeA,IAAM,IAAU,QAAe;GAC7B;GACA;GACA;IACE,8BAA8B,EAAA;IAC9B,8BAA8B,EAAA;IAC/B;GACF,CAAC;yBAIA,EAEM,OAAA;GAFA,OAAK,EAAE,EAAA,MAAO;GAAE,MAAK;GAAe,eAAY;MACpD,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"design-system198.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":";;;;;;;;;;;;;EAiBA,IAAM,IAAY,QAAmD;AACnE,OAAI,OAAO,EAAA,QAAS,SAClB,QAAO;IAAE,OAAO,GAAG,EAAA,KAAK;IAAK,QAAQ,GAAG,EAAA,KAAK;IAAK,YAAY,GAAG,EAAA,KAAK;IAAK;IAG7E,EAEI,IAAU,QAAe;GAC7B;GACA;GACA,sBAAsB,EAAA;GACtB,OAAO,EAAA,QAAS,WAAW,sBAAsB,EAAA,SAAS;GAC1D,EAAE,8BAA8B,EAAA,QAAQ;GACzC,CAAC;yBAIA,EAAmF,QAAA;GAA5E,OAAK,EAAE,EAAA,MAAO;GAAG,OAAK,EAAE,EAAA,MAAS;GAAE,MAAK;GAAe,eAAY"}

package/dist/design-system200.js

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

package/dist/design-system200.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system200.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonNode.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nconst { active = false, fullSize = false } = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n  /** Stretch to fill the parent's width and height. @default false */\n  fullSize?: boolean;\n}>();\n\ndefineSlots<{\n  /** Custom content placed inside the placeholder block (e.g., an icon). */\n  default?(): unknown;\n}>();\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-node',\n  {\n    'b-skeleton-node--full-size': fullSize,\n    'b-skeleton-element--active': active,\n  },\n]);\n</script>\n\n<template>\n  <div :class=\"classes\" role=\"presentation\" aria-hidden=\"true\">\n    <slot />\n  </div>\n</template>\n\n<style>\n.b-skeleton-node {\n  display: inline-flex;\n  vertical-align: top;\n  align-items: center;\n  justify-content: center;\n  width: var(--b-skeleton-image-size, 96px);\n  height: var(--b-skeleton-image-size, 96px);\n  background: var(--b-skeleton-gradient-from-color, oklch(93% 0 0));\n  border-radius: var(--b-skeleton-border-radius, 6px);\n  color: oklch(75% 0 0);\n}\n\n.b-skeleton-node--full-size {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system200.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":""}

package/dist/design-system201.js

@@ -1,335 +1,91 @@
-import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, mergeModels as o, normalizeClass as s, normalizeStyle as c, onBeforeUnmount as l, openBlock as u, ref as d, renderList as f, toDisplayString as p, unref as m, useAttrs as h, useModel as ee, withModifiers as te } from "vue";
-//#region src/components/BSlider/BSlider.vue?vue&type=script&setup=true&lang.ts
-var ne = [
-	"tabindex",
-	"aria-valuemin",
-	"aria-valuemax",
-	"aria-valuenow",
-	"aria-disabled",
-	"aria-orientation",
-	"aria-label"
-], re = [
-	"tabindex",
-	"aria-valuemin",
-	"aria-valuemax",
-	"aria-valuenow",
-	"aria-disabled",
-	"aria-orientation",
-	"aria-label"
-], g = {
+import e from "./design-system200.js";
+import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, renderList as d, renderSlot as f } from "vue";
+//#region src/components/BSkeleton/BSkeleton.vue?vue&type=script&setup=true&lang.ts
+var p = {
 	key: 0,
-	class: "b-slider__marks"
-}, _ = /* @__PURE__ */ a({
-	inheritAttrs: !1,
-	__name: "BSlider",
-	props: /* @__PURE__ */ o({
-		disabled: {
+	class: "b-skeleton__header"
+}, m = { class: "b-skeleton__content" }, h = {
+	key: 1,
+	class: "b-skeleton__paragraph",
+	"aria-hidden": "true"
+}, g = /* @__PURE__ */ s({
+	__name: "BSkeleton",
+	props: {
+		active: {
 			type: Boolean,
 			default: !1
 		},
-		dots: {
-			type: Boolean,
+		avatar: {
+			type: [Boolean, Object],
 			default: !1
 		},
-		included: {
-			type: Boolean,
-			default: !0
-		},
-		keyboard: {
+		loading: {
 			type: Boolean,
 			default: !0
 		},
-		max: { default: 100 },
-		min: { default: 0 },
-		range: {
+		paragraph: {
 			type: [Boolean, Object],
-			default: !1
-		},
-		reverse: {
-			type: Boolean,
-			default: !1
+			default: !0
 		},
-		step: { default: 1 },
-		vertical: {
+		round: {
 			type: Boolean,
 			default: !1
 		},
-		tooltip: { default: () => ({}) },
-		marks: {}
-	}, {
-		modelValue: { default: 0 },
-		modelModifiers: {}
-	}),
-	emits: /* @__PURE__ */ o(["change", "changeComplete"], ["update:modelValue"]),
-	setup(a, { expose: o, emit: _ }) {
-		let v = h(), y = ee(a, "modelValue"), b = _, x = d(null), S = d(null), C = d(null), w = d(!1), T = d(null), E = d({
-			lower: !1,
-			upper: !1
-		}), D = d(null), O = d(0), k = t(() => a.range !== !1), A = t(() => typeof a.range == "object" && a.range.draggableTrack), j = t(() => k.value ? y.value[0] : a.min), M = t(() => k.value ? y.value[1] : y.value);
-		function N(e) {
-			return a.max === a.min ? 0 : (e - a.min) / (a.max - a.min) * 100;
-		}
-		function P(e) {
-			return F(a.min + e / 100 * (a.max - a.min));
-		}
-		function F(e) {
-			if (a.step === null) {
-				if (!a.marks) return I(e);
-				let t = Object.keys(a.marks).map(Number), n = t[0] ?? a.min, r = Math.abs(e - n);
-				for (let i of t) {
-					let t = Math.abs(e - i);
-					t < r && (n = i, r = t);
-				}
-				return I(n);
-			}
-			return I(Math.round((e - a.min) / a.step) * a.step + a.min);
-		}
-		function I(e) {
-			return Math.min(a.max, Math.max(a.min, e));
+		title: {
+			type: [Boolean, Object],
+			default: !0
 		}
-		let L = t(() => N(j.value)), R = t(() => N(M.value)), z = t(() => {
-			let e = k.value ? L.value : 0, t = k.value ? R.value - L.value : R.value;
-			return a.vertical ? a.reverse ? {
-				top: `${100 - e - t}%`,
-				height: `${t}%`
-			} : {
-				bottom: `${100 - e - t}%`,
-				height: `${t}%`
-			} : a.reverse ? {
-				right: `${e}%`,
-				width: `${t}%`
-			} : {
-				left: `${e}%`,
-				width: `${t}%`
-			};
-		}), ie = t(() => {
-			let e = L.value;
-			return a.vertical ? a.reverse ? { top: `${100 - e}%` } : { bottom: `${100 - e}%` } : a.reverse ? { right: `${e}%` } : { left: `${e}%` };
-		}), ae = t(() => {
-			let e = R.value;
-			return a.vertical ? a.reverse ? { top: `${100 - e}%` } : { bottom: `${100 - e}%` } : a.reverse ? { right: `${e}%` } : { left: `${e}%` };
-		}), B = t(() => a.marks ? Object.entries(a.marks).map(([e, t]) => {
-			let n = Number(e);
-			return {
-				value: n,
-				percent: N(n),
-				isActive: a.included && (k.value ? n >= j.value && n <= M.value : n <= M.value),
-				label: typeof t == "string" ? t : t.label,
-				style: typeof t == "object" ? t.style : void 0
-			};
-		}) : []), oe = t(() => {
-			if (!a.dots || a.step === null) return [];
-			let e = [];
-			for (let t = a.min; t <= a.max; t += a.step) {
-				let n = N(t), r = a.included && (k.value ? t >= j.value && t <= M.value : t <= M.value);
-				e.push({
-					value: t,
-					percent: n,
-					isActive: r
-				});
-			}
-			return e;
+	},
+	setup(s) {
+		let g = n(() => s.avatar !== !1 && s.avatar != null), _ = n(() => s.title !== !1 && s.title != null), v = n(() => s.paragraph !== !1 && s.paragraph != null), y = n(() => typeof s.avatar == "object" && s.avatar !== null ? s.avatar : {}), b = n(() => typeof s.title == "object" && s.title !== null ? s.title : {}), x = n(() => typeof s.paragraph == "object" && s.paragraph !== null ? s.paragraph : {}), S = n(() => T(b.value.width)), C = n(() => {
+			let e = x.value.rows;
+			return typeof e == "number" && e > 0 ? Math.floor(e) : 3;
+		}), w = n(() => {
+			let e = x.value.width, t = C.value, n = [];
+			for (let r = 0; r < t; r += 1) if (Array.isArray(e)) {
+				let t = e[r];
+				n.push(T(t) ?? "");
+			} else if (r === t - 1) {
+				let t = T(e);
+				n.push(t ?? "61%");
+			} else n.push("");
+			return n;
 		});
-		function V(e) {
-			return a.tooltip.formatter === null ? null : a.tooltip.formatter ? a.tooltip.formatter(e) : String(e);
-		}
-		let H = t(() => V(j.value)), U = t(() => V(M.value)), se = t(() => a.tooltip.formatter === null ? !1 : a.tooltip.open === void 0 ? E.value.lower || C.value === "lower" || C.value === "track" : a.tooltip.open), ce = t(() => a.tooltip.formatter === null ? !1 : a.tooltip.open === void 0 ? E.value.upper || C.value === "upper" || C.value === "track" : a.tooltip.open);
-		function W(e) {
-			if (!x.value) return 0;
-			let t = x.value.getBoundingClientRect(), n, r;
-			if (n = "touches" in e ? a.vertical ? e.touches[0].clientY : e.touches[0].clientX : a.vertical ? e.clientY : e.clientX, a.vertical) {
-				r = t.height;
-				let e = n - t.top;
-				return a.reverse ? e / r * 100 : (r - e) / r * 100;
-			} else {
-				r = t.width;
-				let e = n - t.left;
-				return a.reverse ? (r - e) / r * 100 : e / r * 100;
-			}
-		}
-		function le(e) {
-			if (!k.value) return "upper";
-			let t = Math.abs(e - L.value), n = Math.abs(e - R.value);
-			return t < n ? "lower" : n < t ? "upper" : e < L.value ? "lower" : "upper";
-		}
-		function G(e, t) {
-			if (k.value) {
-				let n = y.value, r;
-				r = e === "lower" ? [Math.min(t, n[1]), n[1]] : [n[0], Math.max(t, n[0])], y.value = r, b("change", r);
-			} else y.value = t, b("change", t);
-		}
-		function ue(e) {
-			if (a.disabled || e.target.closest(".b-slider__handle")) return;
-			let t = W(e), n = P(t), r = le(t);
-			if (A.value && k.value) {
-				let e = L.value, n = R.value;
-				if (t >= e && t <= n) return;
-			}
-			G(r, n), b("changeComplete", (k.value, y.value));
-		}
-		function K(e, t) {
-			a.disabled || (t.preventDefault(), C.value = e, e === "track" && k.value && (D.value = [...y.value], O.value = W(t)), document.addEventListener("mousemove", q), document.addEventListener("mouseup", J), document.addEventListener("touchmove", q), document.addEventListener("touchend", J));
-		}
-		function q(e) {
-			if (!C.value || a.disabled) return;
-			let t = W(e);
-			if (C.value === "track" && D.value) {
-				let e = t - O.value, n = D.value[0], r = D.value[1], i = N(n) + e, o = N(r) + e, s = P(i), c = P(o);
-				s >= a.min && c <= a.max && (y.value = [s, c], b("change", [s, c]));
-				return;
-			}
-			let n = P(t);
-			G(C.value, n);
-		}
-		function J() {
-			C.value && b("changeComplete", (k.value, y.value)), C.value = null, D.value = null, document.removeEventListener("mousemove", q), document.removeEventListener("mouseup", J), document.removeEventListener("touchmove", q), document.removeEventListener("touchend", J);
-		}
-		function Y(e, t) {
-			if (a.disabled || !a.keyboard) return;
-			let n = a.step ?? 1, r = 0;
-			switch (e.key) {
-				case "ArrowRight":
-				case "ArrowUp":
-					r = n;
-					break;
-				case "ArrowLeft":
-				case "ArrowDown":
-					r = -n;
-					break;
-				case "Home":
-					r = a.min - (t === "lower" ? j.value : M.value);
-					break;
-				case "End":
-					r = a.max - (t === "lower" ? j.value : M.value);
-					break;
-				default: return;
-			}
-			e.preventDefault(), G(t, F((t === "lower" ? j.value : M.value) + r)), b("changeComplete", (k.value, y.value));
-		}
-		function X(e) {
-			T.value = e, E.value[e] = !0;
-		}
-		function Z(e) {
-			T.value = null, E.value[e] = !1;
-		}
-		function Q(e) {
-			E.value[e] = !0;
-		}
-		function $(e) {
-			T.value !== e && C.value !== e && (E.value[e] = !1);
-		}
-		function de() {
-			w.value = !0;
-		}
-		function fe() {
-			w.value = !1;
-		}
-		function pe(e) {
-			a.disabled || !A.value || K("track", e);
-		}
-		function me() {
-			(S.value?.querySelector(".b-slider__handle"))?.focus();
-		}
-		function he() {
-			(S.value?.querySelector(".b-slider__handle:focus"))?.blur();
-		}
-		return o({
-			focus: me,
-			blur: he
-		}), l(() => {
-			document.removeEventListener("mousemove", q), document.removeEventListener("mouseup", J), document.removeEventListener("touchmove", q), document.removeEventListener("touchend", J);
-		}), (t, o) => (u(), r("div", {
-			ref_key: "rootRef",
-			ref: S,
-			class: s(["b-slider", [{
-				"b-slider--vertical": a.vertical,
-				"b-slider--disabled": a.disabled,
-				"b-slider--with-marks": !!a.marks,
-				"b-slider--reverse": a.reverse,
-				"b-slider--hovered": w.value
-			}]]),
-			onMouseenter: de,
-			onMouseleave: fe
-		}, [i("div", {
-			ref_key: "railRef",
-			ref: x,
-			class: "b-slider__rail",
-			onMousedown: ue
-		}, [
-			a.included ? (u(), r("div", {
-				key: 0,
-				class: "b-slider__track",
-				style: c(z.value),
-				onMousedown: te(pe, ["stop"])
-			}, null, 36)) : n("", !0),
-			(u(!0), r(e, null, f(oe.value, (e) => (u(), r("span", {
-				key: `dot-${e.value}`,
-				class: s(["b-slider__dot", { "b-slider__dot--active": e.isActive }]),
-				style: c(a.vertical ? a.reverse ? { top: `${100 - e.percent}%` } : { bottom: `${100 - e.percent}%` } : a.reverse ? { right: `${e.percent}%` } : { left: `${e.percent}%` })
-			}, null, 6))), 128)),
-			(u(!0), r(e, null, f(B.value, (e) => (u(), r("span", {
-				key: `mark-dot-${e.value}`,
-				class: s(["b-slider__dot", { "b-slider__dot--active": e.isActive }]),
-				style: c(a.vertical ? a.reverse ? { top: `${100 - e.percent}%` } : { bottom: `${100 - e.percent}%` } : a.reverse ? { right: `${e.percent}%` } : { left: `${e.percent}%` })
-			}, null, 6))), 128)),
-			k.value ? (u(), r("div", {
-				key: 1,
-				class: s(["b-slider__handle", { "b-slider__handle--active": C.value === "lower" || T.value === "lower" }]),
-				style: c(ie.value),
-				role: "slider",
-				tabindex: a.disabled ? -1 : 0,
-				"aria-valuemin": a.min,
-				"aria-valuemax": M.value,
-				"aria-valuenow": j.value,
-				"aria-disabled": a.disabled || void 0,
-				"aria-orientation": a.vertical ? "vertical" : "horizontal",
-				"aria-label": m(v)["aria-label"] ? `${m(v)["aria-label"]} - minimum` : "Minimum",
-				onMousedown: o[0] ||= (e) => K("lower", e),
-				onTouchstart: o[1] ||= (e) => K("lower", e),
-				onKeydown: o[2] ||= (e) => Y(e, "lower"),
-				onFocus: o[3] ||= (e) => X("lower"),
-				onBlur: o[4] ||= (e) => Z("lower"),
-				onMouseenter: o[5] ||= (e) => Q("lower"),
-				onMouseleave: o[6] ||= (e) => $("lower")
-			}, [H.value === null ? n("", !0) : (u(), r("div", {
-				key: 0,
-				class: s(["b-slider__tooltip", { "b-slider__tooltip--visible": se.value }]),
-				role: "tooltip"
-			}, p(H.value), 3))], 46, ne)) : n("", !0),
-			i("div", {
-				class: s(["b-slider__handle", { "b-slider__handle--active": C.value === "upper" || T.value === "upper" }]),
-				style: c(ae.value),
-				role: "slider",
-				tabindex: a.disabled ? -1 : 0,
-				"aria-valuemin": k.value ? j.value : a.min,
-				"aria-valuemax": a.max,
-				"aria-valuenow": M.value,
-				"aria-disabled": a.disabled || void 0,
-				"aria-orientation": a.vertical ? "vertical" : "horizontal",
-				"aria-label": m(v)["aria-label"] || (k.value ? "Maximum" : "Slider"),
-				onMousedown: o[7] ||= (e) => K("upper", e),
-				onTouchstart: o[8] ||= (e) => K("upper", e),
-				onKeydown: o[9] ||= (e) => Y(e, "upper"),
-				onFocus: o[10] ||= (e) => X("upper"),
-				onBlur: o[11] ||= (e) => Z("upper"),
-				onMouseenter: o[12] ||= (e) => Q("upper"),
-				onMouseleave: o[13] ||= (e) => $("upper")
-			}, [U.value === null ? n("", !0) : (u(), r("div", {
-				key: 0,
-				class: s(["b-slider__tooltip", { "b-slider__tooltip--visible": ce.value }]),
-				role: "tooltip"
-			}, p(U.value), 3))], 46, re)
-		], 544), a.marks ? (u(), r("div", g, [(u(!0), r(e, null, f(B.value, (e) => (u(), r("span", {
-			key: `mark-label-${e.value}`,
-			class: s(["b-slider__mark-text", { "b-slider__mark-text--active": e.isActive }]),
-			style: c({
-				...a.vertical ? a.reverse ? { top: `${100 - e.percent}%` } : { bottom: `${100 - e.percent}%` } : a.reverse ? { right: `${e.percent}%` } : { left: `${e.percent}%` },
-				...e.style
-			})
-		}, p(e.label), 7))), 128))])) : n("", !0)], 34));
+		function T(e) {
+			if (e != null) return typeof e == "number" ? `${e}px` : e;
+		}
+		let E = n(() => ["b-skeleton", {
+			"b-skeleton--active": s.active,
+			"b-skeleton--with-avatar": g.value,
+			"b-skeleton--round": s.round
+		}]);
+		return (n, b) => s.loading ? (u(), i("div", {
+			key: 0,
+			class: c(E.value),
+			role: "status",
+			"aria-live": "polite",
+			"aria-label": "Loading"
+		}, [g.value ? (u(), i("div", p, [o(e, {
+			active: s.active || y.value.active,
+			shape: y.value.shape,
+			size: y.value.size
+		}, null, 8, [
+			"active",
+			"shape",
+			"size"
+		])])) : r("", !0), a("div", m, [_.value ? (u(), i("h3", {
+			key: 0,
+			class: "b-skeleton__title",
+			style: l(S.value ? { width: S.value } : void 0),
+			"aria-hidden": "true"
+		}, null, 4)) : r("", !0), v.value ? (u(), i("ul", h, [(u(!0), i(t, null, d(w.value, (e, t) => (u(), i("li", {
+			key: t,
+			class: "b-skeleton__paragraph-row",
+			style: l(e ? { width: e } : void 0)
+		}, null, 4))), 128))])) : r("", !0)])], 2)) : f(n.$slots, "default", { key: 1 });
 	}
 });
 //#endregion
-export { _ as default };
+export { g as default };
 
 //# sourceMappingURL=design-system201.js.map