@7pmlabs/design-system 1.0.9 → 1.0.11

package/dist/design-system192.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system192.js","names":[],"sources":["../src/components/BTimePicker/types.ts"],"sourcesContent":["export enum BTimePickerSize {\n  Small = 'sm',\n  Medium = 'md',\n  Large = 'lg',\n}\n\nexport enum BTimePickerVariant {\n  Outlined = 'outlined',\n  Filled = 'filled',\n  Borderless = 'borderless',\n  Underlined = 'underlined',\n}\n\nexport enum BTimePickerStatus {\n  Error = 'error',\n  Warning = 'warning',\n}\n\nexport enum BTimePickerPlacement {\n  BottomLeft = 'bottom-left',\n  BottomRight = 'bottom-right',\n  TopLeft = 'top-left',\n  TopRight = 'top-right',\n}\n\nexport interface BTimePickerDisabledTime {\n  disabledHours?: () => number[];\n  disabledMinutes?: (hour: number) => number[];\n  disabledSeconds?: (hour: number, minute: number) => number[];\n}\n"],"mappings":";AAAA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,MACA,EAAA,SAAA,MACA,EAAA,QAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,WAAA,YACA,EAAA,SAAA,UACA,EAAA,aAAA,cACA,EAAA,aAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,UAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,aAAA,eACA,EAAA,cAAA,gBACA,EAAA,UAAA,YACA,EAAA,WAAA;KACD"}
+{"version":3,"file":"design-system192.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonImage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nconst { active = false } = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n}>();\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-image',\n  { 'b-skeleton-element--active': active },\n]);\n</script>\n\n<template>\n  <div :class=\"classes\" role=\"presentation\" aria-hidden=\"true\">\n    <svg\n      class=\"b-skeleton-image__svg\"\n      viewBox=\"0 0 1098 1024\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <path\n        d=\"M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z\"\n      />\n    </svg>\n  </div>\n</template>\n\n<style>\n.b-skeleton-image {\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}\n\n.b-skeleton-image__svg {\n  width: 48px;\n  height: 48px;\n  fill: oklch(75% 0 0);\n}\n\n[data-prefers-color='dark'] .b-skeleton-image__svg {\n  fill: oklch(50% 0 0);\n}\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-skeleton-image__svg {\n    fill: oklch(50% 0 0);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;EAQA,IAAM,IAAU,QAAe;GAC7B;GACA;GACA,EAAE,8BAA8B,EAAA,QAAQ;GACzC,CAAC;yBAIA,EAYM,OAAA;GAZA,OAAK,EAAE,EAAA,MAAO;GAAE,MAAK;GAAe,eAAY;mBACpD,EAUM,OAAA;GATJ,OAAM;GACN,SAAQ;GACR,OAAM;GACN,eAAY;GACZ,WAAU;MAEV,EAEE,QAAA,EADA,GAAE,m3BAAi3B,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,EAAA,EAAA"}

package/dist/design-system194.js

@@ -0,0 +1,8 @@
+import e from "./design-system192.js";
+/* empty css                 */
+//#region src/components/BSkeleton/BSkeletonImage.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=design-system194.js.map

package/dist/design-system194.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system194.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonImage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nconst { active = false } = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n}>();\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-image',\n  { 'b-skeleton-element--active': active },\n]);\n</script>\n\n<template>\n  <div :class=\"classes\" role=\"presentation\" aria-hidden=\"true\">\n    <svg\n      class=\"b-skeleton-image__svg\"\n      viewBox=\"0 0 1098 1024\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <path\n        d=\"M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z\"\n      />\n    </svg>\n  </div>\n</template>\n\n<style>\n.b-skeleton-image {\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}\n\n.b-skeleton-image__svg {\n  width: 48px;\n  height: 48px;\n  fill: oklch(75% 0 0);\n}\n\n[data-prefers-color='dark'] .b-skeleton-image__svg {\n  fill: oklch(50% 0 0);\n}\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-skeleton-image__svg {\n    fill: oklch(50% 0 0);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system195.js

@@ -1,8 +1,36 @@
-import e from "./design-system193.js";
-/* empty css                 */
-//#region src/components/BTimePicker/BTimePicker.vue
-var t = e;
+import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, openBlock as i } from "vue";
+//#region src/components/BSkeleton/BSkeletonInput.vue?vue&type=script&setup=true&lang.ts
+var a = /* @__PURE__ */ n({
+	__name: "BSkeletonInput",
+	props: {
+		active: {
+			type: Boolean,
+			default: !1
+		},
+		block: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "default" }
+	},
+	setup(n) {
+		let a = e(() => [
+			"b-skeleton-element",
+			"b-skeleton-input",
+			`b-skeleton-input--${n.size}`,
+			{
+				"b-skeleton-input--block": n.block,
+				"b-skeleton-element--active": n.active
+			}
+		]);
+		return (e, n) => (i(), t("span", {
+			class: r(a.value),
+			role: "presentation",
+			"aria-hidden": "true"
+		}, null, 2));
+	}
+});
 //#endregion
-export { t as default };
+export { a as default };
 
 //# sourceMappingURL=design-system195.js.map

package/dist/design-system195.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system195.js","names":[],"sources":["../src/components/BTimePicker/BTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';\n\nimport {\n  BTimePickerPlacement,\n  BTimePickerSize,\n  BTimePickerStatus,\n  BTimePickerVariant,\n  type BTimePickerDisabledTime,\n} from './types';\n\nconst {\n  size = BTimePickerSize.Medium,\n  variant = BTimePickerVariant.Outlined,\n  placeholder = 'Select time',\n  disabled = false,\n  inputReadOnly = false,\n  allowClear = true,\n  showNow = true,\n  use12Hours = false,\n  hourStep = 1,\n  minuteStep = 1,\n  secondStep = 1,\n  format,\n  placement: _placement = BTimePickerPlacement.BottomLeft,\n  status,\n  hideDisabledOptions = false,\n  needConfirm = true,\n  changeOnScroll = false,\n  showHour = true,\n  showMinute = true,\n  showSecond = true,\n  defaultOpen = false,\n  defaultValue,\n  open,\n  disabledTime,\n} = defineProps<{\n  /** Size of the input */\n  size?: `${BTimePickerSize}`;\n  /** Visual variant */\n  variant?: `${BTimePickerVariant}`;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Disable the picker */\n  disabled?: boolean;\n  /** Make input read-only (useful for touch devices) */\n  inputReadOnly?: boolean;\n  /** Show clear button */\n  allowClear?: boolean;\n  /** Show \"Now\" button in footer */\n  showNow?: boolean;\n  /** Use 12-hour format with AM/PM */\n  use12Hours?: boolean;\n  /** Hour selection step */\n  hourStep?: number;\n  /** Minute selection step */\n  minuteStep?: number;\n  /** Second selection step */\n  secondStep?: number;\n  /** Time format string (e.g. 'HH:mm:ss', 'hh:mm a') */\n  format?: string;\n  /** Popup placement */\n  placement?: `${BTimePickerPlacement}`;\n  /** Validation status */\n  status?: `${BTimePickerStatus}`;\n  /** Hide disabled time options from columns */\n  hideDisabledOptions?: boolean;\n  /** Require OK button confirmation before applying value */\n  needConfirm?: boolean;\n  /** Update value on scroll instead of click */\n  changeOnScroll?: boolean;\n  /** Show hour column */\n  showHour?: boolean;\n  /** Show minute column */\n  showMinute?: boolean;\n  /** Show second column */\n  showSecond?: boolean;\n  /** Default open state */\n  defaultOpen?: boolean;\n  /** Default value (uncontrolled) */\n  defaultValue?: Date;\n  /** Controlled open state */\n  open?: boolean;\n  /** Function returning disabled hours/minutes/seconds */\n  disabledTime?: () => BTimePickerDisabledTime;\n}>();\n\nconst model = defineModel<Date | null>({ default: undefined });\n\nconst emit = defineEmits<{\n  change: [time: Date | null, timeString: string];\n  openChange: [open: boolean];\n}>();\n\nconst inputEl = ref<HTMLInputElement | null>(null);\nconst panelEl = ref<HTMLElement | null>(null);\nconst hourColEl = ref<HTMLElement | null>(null);\nconst minuteColEl = ref<HTMLElement | null>(null);\nconst secondColEl = ref<HTMLElement | null>(null);\nconst ampmColEl = ref<HTMLElement | null>(null);\n\ndefineExpose({\n  focus: () => inputEl.value?.focus(),\n  blur: () => inputEl.value?.blur(),\n});\n\nconst { componentUID } = useComponentId();\nconst anchorName = computed(() => `--b-time-picker-${componentUID.value}`);\n\n// ─────────────────────────────────────────────\n// State\n// ─────────────────────────────────────────────\nconst isOpen = ref(defaultOpen);\nconst isPanelOpen = ref(open !== undefined ? !!open : defaultOpen);\nconst internalValue = ref<Date | null>(defaultValue ?? null);\nconst pendingHour = ref<number | null>(null);\nconst pendingMinute = ref<number | null>(null);\nconst pendingSecond = ref<number | null>(null);\nconst pendingAmpm = ref<'AM' | 'PM' | null>(null);\nconst inputText = ref('');\nconst focusedColumn = ref<'hour' | 'minute' | 'second' | 'ampm'>('hour');\n\nconst selectedTime = computed({\n  get: () => model.value ?? internalValue.value,\n  set: (val) => {\n    internalValue.value = val;\n    model.value = val;\n  },\n});\n\n// ─────────────────────────────────────────────\n// Format\n// ─────────────────────────────────────────────\nconst activeFormat = computed(() => {\n  if (format) return format;\n  const parts: string[] = [];\n  if (showHour) parts.push(use12Hours ? 'hh' : 'HH');\n  if (showMinute) parts.push('mm');\n  if (showSecond) parts.push('ss');\n  const base = parts.join(':');\n  return use12Hours ? `${base} A` : base;\n});\n\nfunction pad(n: number): string {\n  return String(n).padStart(2, '0');\n}\n\nfunction formatTime(d: Date | null): string {\n  if (!d) return '';\n  const h = d.getHours();\n  const m = d.getMinutes();\n  const s = d.getSeconds();\n  const ampm = h >= 12 ? 'PM' : 'AM';\n\n  let result = activeFormat.value;\n  if (use12Hours) {\n    const h12 = h % 12 || 12;\n    result = result.replace('hh', pad(h12));\n    result = result.replace('h', String(h12));\n    result = result.replace('A', ampm);\n    result = result.replace('a', ampm.toLowerCase());\n  } else {\n    result = result.replace('HH', pad(h));\n    result = result.replace('H', String(h));\n  }\n  result = result.replace('mm', pad(m));\n  result = result.replace('ss', pad(s));\n  return result;\n}\n\nfunction parseTimeString(str: string): Date | null {\n  if (!str.trim()) return null;\n  const timeRegex12 = /(\\d{1,2}):(\\d{2})(?::(\\d{2}))?\\s*(AM|PM|am|pm)?/;\n  const match = str.match(timeRegex12);\n  if (!match) return null;\n\n  let h = parseInt(match[1], 10);\n  const m = parseInt(match[2], 10);\n  const s = match[3] ? parseInt(match[3], 10) : 0;\n  const period = match[4]?.toUpperCase();\n\n  if (use12Hours && period) {\n    if (period === 'PM' && h < 12) h += 12;\n    if (period === 'AM' && h === 12) h = 0;\n  }\n\n  if (h < 0 || h > 23 || m < 0 || m > 59 || s < 0 || s > 59) return null;\n\n  const d = new Date();\n  d.setHours(h, m, s, 0);\n  return d;\n}\n\n// ─────────────────────────────────────────────\n// Disabled time logic\n// ─────────────────────────────────────────────\nconst disabledHours = computed<number[]>(() => {\n  if (!disabledTime) return [];\n  const dt = disabledTime();\n  return dt.disabledHours?.() ?? [];\n});\n\nconst disabledMinutes = computed<number[]>(() => {\n  if (!disabledTime) return [];\n  const dt = disabledTime();\n  const h = pendingHour.value ?? selectedTime.value?.getHours() ?? 0;\n  return dt.disabledMinutes?.(h) ?? [];\n});\n\nconst disabledSeconds = computed<number[]>(() => {\n  if (!disabledTime) return [];\n  const dt = disabledTime();\n  const h = pendingHour.value ?? selectedTime.value?.getHours() ?? 0;\n  const m = pendingMinute.value ?? selectedTime.value?.getMinutes() ?? 0;\n  return dt.disabledSeconds?.(h, m) ?? [];\n});\n\n// ─────────────────────────────────────────────\n// Column data\n// ─────────────────────────────────────────────\nconst hours = computed(() => {\n  const list: number[] = [];\n  if (use12Hours) {\n    for (let i = 1; i <= 12; i += hourStep) list.push(i);\n  } else {\n    for (let i = 0; i < 24; i += hourStep) list.push(i);\n  }\n  if (hideDisabledOptions) {\n    return list.filter((h) => !disabledHours.value.includes(use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h));\n  }\n  return list;\n});\n\nconst minutes = computed(() => {\n  const list: number[] = [];\n  for (let i = 0; i < 60; i += minuteStep) list.push(i);\n  if (hideDisabledOptions) {\n    return list.filter((m) => !disabledMinutes.value.includes(m));\n  }\n  return list;\n});\n\nconst seconds = computed(() => {\n  const list: number[] = [];\n  for (let i = 0; i < 60; i += secondStep) list.push(i);\n  if (hideDisabledOptions) {\n    return list.filter((s) => !disabledSeconds.value.includes(s));\n  }\n  return list;\n});\n\nfunction to24Hour(h12: number, period: 'AM' | 'PM'): number {\n  if (period === 'AM') return h12 === 12 ? 0 : h12;\n  return h12 === 12 ? 12 : h12 + 12;\n}\n\nfunction to12Hour(h24: number): { hour: number; period: 'AM' | 'PM' } {\n  const period: 'AM' | 'PM' = h24 >= 12 ? 'PM' : 'AM';\n  const hour = h24 % 12 || 12;\n  return { hour, period };\n}\n\n// ─────────────────────────────────────────────\n// Panel open/close\n// ─────────────────────────────────────────────\nfunction openPanel() {\n  if (disabled) return;\n  isOpen.value = true;\n  isPanelOpen.value = true;\n  emit('openChange', true);\n  panelEl.value?.showPopover?.();\n  syncPendingFromValue();\n  nextTick(() => scrollToSelected());\n}\n\nfunction closePanel() {\n  isOpen.value = false;\n  isPanelOpen.value = false;\n  emit('openChange', false);\n  panelEl.value?.hidePopover?.();\n  inputEl.value?.focus();\n}\n\nfunction togglePanel() {\n  if (isPanelOpen.value) closePanel();\n  else openPanel();\n}\n\nfunction handlePopoverToggle(e: Event) {\n  const toggleEvent = e as ToggleEvent;\n  const nowOpen = toggleEvent.newState === 'open';\n  isOpen.value = nowOpen;\n  isPanelOpen.value = nowOpen;\n  if (!nowOpen) emit('openChange', false);\n}\n\n// ─────────────────────────────────────────────\n// Sync pending state\n// ─────────────────────────────────────────────\nfunction syncPendingFromValue() {\n  const t = selectedTime.value;\n  if (t) {\n    if (use12Hours) {\n      const { hour, period } = to12Hour(t.getHours());\n      pendingHour.value = hour;\n      pendingAmpm.value = period;\n    } else {\n      pendingHour.value = t.getHours();\n    }\n    pendingMinute.value = t.getMinutes();\n    pendingSecond.value = t.getSeconds();\n  } else {\n    pendingHour.value = null;\n    pendingMinute.value = null;\n    pendingSecond.value = null;\n    pendingAmpm.value = null;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Selection\n// ─────────────────────────────────────────────\nfunction selectHour(h: number) {\n  const h24 = use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h;\n  if (disabledHours.value.includes(h24)) return;\n  pendingHour.value = h;\n  if (!needConfirm && !changeOnScroll) applyPendingIfComplete();\n  else if (changeOnScroll) applyPending();\n}\n\nfunction selectMinute(m: number) {\n  if (disabledMinutes.value.includes(m)) return;\n  pendingMinute.value = m;\n  if (!needConfirm && !changeOnScroll) applyPendingIfComplete();\n  else if (changeOnScroll) applyPending();\n}\n\nfunction selectSecond(s: number) {\n  if (disabledSeconds.value.includes(s)) return;\n  pendingSecond.value = s;\n  if (!needConfirm && !changeOnScroll) applyPendingIfComplete();\n  else if (changeOnScroll) applyPending();\n}\n\nfunction selectAmpm(val: 'AM' | 'PM') {\n  pendingAmpm.value = val;\n  if (!needConfirm && !changeOnScroll) applyPendingIfComplete();\n  else if (changeOnScroll) applyPending();\n}\n\nfunction applyPendingIfComplete() {\n  if (pendingHour.value !== null && pendingMinute.value !== null) {\n    if (showSecond && pendingSecond.value === null) return;\n    if (use12Hours && pendingAmpm.value === null) return;\n    applyPending();\n    closePanel();\n  }\n}\n\nfunction applyPending() {\n  const h = pendingHour.value ?? 0;\n  const m = pendingMinute.value ?? 0;\n  const s = pendingSecond.value ?? 0;\n  const h24 = use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h;\n\n  const d = new Date();\n  d.setHours(h24, m, s, 0);\n  selectedTime.value = d;\n  inputText.value = formatTime(d);\n  emit('change', d, formatTime(d));\n}\n\nfunction handleOk() {\n  applyPending();\n  closePanel();\n}\n\nfunction handleNow() {\n  const now = new Date();\n  if (use12Hours) {\n    const { hour, period } = to12Hour(now.getHours());\n    pendingHour.value = hour;\n    pendingAmpm.value = period;\n  } else {\n    pendingHour.value = now.getHours();\n  }\n  pendingMinute.value = now.getMinutes();\n  pendingSecond.value = now.getSeconds();\n  nextTick(() => scrollToSelected());\n  if (!needConfirm) {\n    applyPending();\n    closePanel();\n  }\n}\n\nfunction handleClear(e: Event) {\n  e.stopPropagation();\n  selectedTime.value = null;\n  inputText.value = '';\n  pendingHour.value = null;\n  pendingMinute.value = null;\n  pendingSecond.value = null;\n  pendingAmpm.value = null;\n  emit('change', null, '');\n}\n\n// ─────────────────────────────────────────────\n// Input handling\n// ─────────────────────────────────────────────\nfunction handleInputChange(e: Event) {\n  const val = (e.target as HTMLInputElement).value;\n  inputText.value = val;\n}\n\nfunction handleInputBlur() {\n  if (!isPanelOpen.value) {\n    const parsed = parseTimeString(inputText.value);\n    if (parsed) {\n      selectedTime.value = parsed;\n      inputText.value = formatTime(parsed);\n      emit('change', parsed, formatTime(parsed));\n    } else if (inputText.value === '') {\n      selectedTime.value = null;\n      emit('change', null, '');\n    } else {\n      inputText.value = formatTime(selectedTime.value);\n    }\n  }\n}\n\nfunction handleInputKeydown(e: KeyboardEvent) {\n  if (e.key === 'Enter' || e.key === ' ') {\n    if (!isPanelOpen.value) {\n      e.preventDefault();\n      openPanel();\n    } else if (e.key === 'Enter') {\n      e.preventDefault();\n      const parsed = parseTimeString(inputText.value);\n      if (parsed) {\n        selectedTime.value = parsed;\n        inputText.value = formatTime(parsed);\n        emit('change', parsed, formatTime(parsed));\n      }\n      closePanel();\n    }\n  } else if (e.key === 'Escape') {\n    if (isPanelOpen.value) {\n      e.preventDefault();\n      closePanel();\n    }\n  }\n}\n\n// ─────────────────────────────────────────────\n// Panel keyboard navigation\n// ─────────────────────────────────────────────\nfunction handlePanelKeydown(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    e.preventDefault();\n    closePanel();\n    return;\n  }\n\n  if (e.key === 'Tab') {\n    const columns: ('hour' | 'minute' | 'second' | 'ampm')[] = [];\n    if (showHour) columns.push('hour');\n    if (showMinute) columns.push('minute');\n    if (showSecond) columns.push('second');\n    if (use12Hours) columns.push('ampm');\n\n    const idx = columns.indexOf(focusedColumn.value);\n    if (e.shiftKey) {\n      if (idx > 0) {\n        e.preventDefault();\n        focusedColumn.value = columns[idx - 1];\n      }\n    } else {\n      if (idx < columns.length - 1) {\n        e.preventDefault();\n        focusedColumn.value = columns[idx + 1];\n      }\n    }\n    return;\n  }\n\n  if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n    e.preventDefault();\n    const delta = e.key === 'ArrowUp' ? -1 : 1;\n    adjustFocusedColumn(delta);\n    return;\n  }\n\n  if (e.key === 'Enter') {\n    e.preventDefault();\n    handleOk();\n  }\n}\n\nfunction adjustFocusedColumn(delta: number) {\n  if (focusedColumn.value === 'hour') {\n    const list = hours.value;\n    const current = pendingHour.value ?? list[0];\n    const idx = list.indexOf(current);\n    const next = list[Math.max(0, Math.min(list.length - 1, idx + delta))];\n    selectHour(next);\n    scrollColumnTo(hourColEl.value, list.indexOf(next));\n  } else if (focusedColumn.value === 'minute') {\n    const list = minutes.value;\n    const current = pendingMinute.value ?? list[0];\n    const idx = list.indexOf(current);\n    const next = list[Math.max(0, Math.min(list.length - 1, idx + delta))];\n    selectMinute(next);\n    scrollColumnTo(minuteColEl.value, list.indexOf(next));\n  } else if (focusedColumn.value === 'second') {\n    const list = seconds.value;\n    const current = pendingSecond.value ?? list[0];\n    const idx = list.indexOf(current);\n    const next = list[Math.max(0, Math.min(list.length - 1, idx + delta))];\n    selectSecond(next);\n    scrollColumnTo(secondColEl.value, list.indexOf(next));\n  } else if (focusedColumn.value === 'ampm') {\n    const val = pendingAmpm.value === 'AM' ? 'PM' : 'AM';\n    selectAmpm(val);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Scroll helpers\n// ─────────────────────────────────────────────\nfunction scrollColumnTo(col: HTMLElement | null, idx: number) {\n  if (!col || !col.scrollTo) return;\n  const cellHeight = 28;\n  col.scrollTo({ top: idx * cellHeight, behavior: 'smooth' });\n}\n\nfunction scrollToSelected() {\n  if (pendingHour.value !== null) {\n    const idx = hours.value.indexOf(pendingHour.value);\n    if (idx >= 0) scrollColumnTo(hourColEl.value, idx);\n  }\n  if (pendingMinute.value !== null) {\n    const idx = minutes.value.indexOf(pendingMinute.value);\n    if (idx >= 0) scrollColumnTo(minuteColEl.value, idx);\n  }\n  if (pendingSecond.value !== null && showSecond) {\n    const idx = seconds.value.indexOf(pendingSecond.value);\n    if (idx >= 0) scrollColumnTo(secondColEl.value, idx);\n  }\n  if (pendingAmpm.value && use12Hours) {\n    const idx = pendingAmpm.value === 'AM' ? 0 : 1;\n    scrollColumnTo(ampmColEl.value, idx);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Click outside\n// ─────────────────────────────────────────────\nfunction handleClickOutside(e: MouseEvent) {\n  if (!isPanelOpen.value) return;\n  const target = e.target as Node;\n  if (panelEl.value?.contains(target)) return;\n  if (inputEl.value?.parentElement?.contains(target)) return;\n  closePanel();\n}\n\nonMounted(() => {\n  document.addEventListener('mousedown', handleClickOutside);\n});\nonBeforeUnmount(() => {\n  document.removeEventListener('mousedown', handleClickOutside);\n});\n\n// ─────────────────────────────────────────────\n// Watchers\n// ─────────────────────────────────────────────\nwatch(\n  () => open,\n  (val) => {\n    if (val !== undefined) {\n      if (val) openPanel();\n      else closePanel();\n    }\n  },\n);\n\nwatch(selectedTime, (val) => {\n  inputText.value = formatTime(val);\n});\n\n// Init display\ninputText.value = formatTime(selectedTime.value);\n\n// ─────────────────────────────────────────────\n// Computed classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-time-picker',\n  `b-time-picker--${size}`,\n  `b-time-picker--${variant}`,\n  {\n    'b-time-picker--disabled': disabled,\n    'b-time-picker--open': isPanelOpen.value,\n    [`b-time-picker--${status}`]: !!status,\n  },\n]);\n\nconst isHourDisabled = (h: number) => {\n  const h24 = use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h;\n  return disabledHours.value.includes(h24);\n};\nconst isMinuteDisabled = (m: number) => disabledMinutes.value.includes(m);\nconst isSecondDisabled = (s: number) => disabledSeconds.value.includes(s);\n</script>\n\n<template>\n  <div :class=\"rootClasses\">\n    <div\n      class=\"b-time-picker__input-wrap\"\n      :style=\"{ anchorName }\"\n      @click=\"togglePanel\"\n    >\n      <input\n        :id=\"`b-time-picker-input-${componentUID}`\"\n        ref=\"inputEl\"\n        class=\"b-time-picker__input\"\n        type=\"text\"\n        role=\"combobox\"\n        :aria-expanded=\"isPanelOpen\"\n        aria-haspopup=\"dialog\"\n        :aria-controls=\"isPanelOpen ? `b-time-picker-panel-${componentUID}` : undefined\"\n        :aria-describedby=\"status ? `b-time-picker-status-${componentUID}` : undefined\"\n        :aria-label=\"placeholder\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :readonly=\"inputReadOnly\"\n        :value=\"inputText\"\n        autocomplete=\"off\"\n        @input=\"handleInputChange\"\n        @blur=\"handleInputBlur\"\n        @keydown=\"handleInputKeydown\"\n      />\n      <span class=\"b-time-picker__suffix\">\n        <svg\n          v-if=\"!allowClear || !selectedTime\"\n          class=\"b-time-picker__icon\"\n          aria-hidden=\"true\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <polyline points=\"12 6 12 12 16 14\" />\n        </svg>\n        <button\n          v-else\n          class=\"b-time-picker__clear\"\n          type=\"button\"\n          aria-label=\"Clear time\"\n          tabindex=\"-1\"\n          @click=\"handleClear\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\" />\n            <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\" />\n            <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\" />\n          </svg>\n        </button>\n      </span>\n      <span\n        v-if=\"status\"\n        :id=\"`b-time-picker-status-${componentUID}`\"\n        class=\"b-time-picker__status-text\"\n        aria-live=\"polite\"\n      >\n        {{ status }}\n      </span>\n    </div>\n\n    <div\n      :id=\"`b-time-picker-panel-${componentUID}`\"\n      ref=\"panelEl\"\n      class=\"b-time-picker__panel\"\n      popover\n      role=\"dialog\"\n      :aria-label=\"'Time picker'\"\n      :aria-modal=\"true\"\n      :style=\"{ positionAnchor: anchorName }\"\n      @toggle=\"handlePopoverToggle\"\n      @keydown=\"handlePanelKeydown\"\n    >\n      <div class=\"b-time-picker__columns\" role=\"group\" aria-label=\"Time selection columns\">\n        <!-- Hour Column -->\n        <div\n          v-if=\"showHour\"\n          ref=\"hourColEl\"\n          class=\"b-time-picker__column\"\n          role=\"listbox\"\n          :aria-label=\"'Hours'\"\n          :aria-activedescendant=\"pendingHour !== null ? `b-time-picker-hour-${pendingHour}-${componentUID}` : undefined\"\n        >\n          <div\n            v-for=\"h in hours\"\n            :id=\"`b-time-picker-hour-${h}-${componentUID}`\"\n            :key=\"h\"\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingHour === h,\n              'b-time-picker__cell--disabled': isHourDisabled(h),\n              'b-time-picker__cell--focused': focusedColumn === 'hour' && pendingHour === h,\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingHour === h\"\n            :aria-disabled=\"isHourDisabled(h)\"\n            @click=\"selectHour(h)\"\n          >\n            {{ pad(h) }}\n          </div>\n        </div>\n\n        <!-- Minute Column -->\n        <div\n          v-if=\"showMinute\"\n          ref=\"minuteColEl\"\n          class=\"b-time-picker__column\"\n          role=\"listbox\"\n          :aria-label=\"'Minutes'\"\n          :aria-activedescendant=\"pendingMinute !== null ? `b-time-picker-minute-${pendingMinute}-${componentUID}` : undefined\"\n        >\n          <div\n            v-for=\"m in minutes\"\n            :id=\"`b-time-picker-minute-${m}-${componentUID}`\"\n            :key=\"m\"\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingMinute === m,\n              'b-time-picker__cell--disabled': isMinuteDisabled(m),\n              'b-time-picker__cell--focused': focusedColumn === 'minute' && pendingMinute === m,\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingMinute === m\"\n            :aria-disabled=\"isMinuteDisabled(m)\"\n            @click=\"selectMinute(m)\"\n          >\n            {{ pad(m) }}\n          </div>\n        </div>\n\n        <!-- Second Column -->\n        <div\n          v-if=\"showSecond\"\n          ref=\"secondColEl\"\n          class=\"b-time-picker__column\"\n          role=\"listbox\"\n          :aria-label=\"'Seconds'\"\n          :aria-activedescendant=\"pendingSecond !== null ? `b-time-picker-second-${pendingSecond}-${componentUID}` : undefined\"\n        >\n          <div\n            v-for=\"s in seconds\"\n            :id=\"`b-time-picker-second-${s}-${componentUID}`\"\n            :key=\"s\"\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingSecond === s,\n              'b-time-picker__cell--disabled': isSecondDisabled(s),\n              'b-time-picker__cell--focused': focusedColumn === 'second' && pendingSecond === s,\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingSecond === s\"\n            :aria-disabled=\"isSecondDisabled(s)\"\n            @click=\"selectSecond(s)\"\n          >\n            {{ pad(s) }}\n          </div>\n        </div>\n\n        <!-- AM/PM Column -->\n        <div\n          v-if=\"use12Hours\"\n          ref=\"ampmColEl\"\n          class=\"b-time-picker__column b-time-picker__column--ampm\"\n          role=\"listbox\"\n          aria-label=\"AM/PM\"\n        >\n          <div\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingAmpm === 'AM',\n              'b-time-picker__cell--focused': focusedColumn === 'ampm' && pendingAmpm === 'AM',\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingAmpm === 'AM'\"\n            @click=\"selectAmpm('AM')\"\n          >\n            AM\n          </div>\n          <div\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingAmpm === 'PM',\n              'b-time-picker__cell--focused': focusedColumn === 'ampm' && pendingAmpm === 'PM',\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingAmpm === 'PM'\"\n            @click=\"selectAmpm('PM')\"\n          >\n            PM\n          </div>\n        </div>\n      </div>\n\n      <div v-if=\"needConfirm || showNow\" class=\"b-time-picker__footer\">\n        <button\n          v-if=\"showNow\"\n          class=\"b-time-picker__now-btn\"\n          type=\"button\"\n          @click=\"handleNow\"\n        >\n          Now\n        </button>\n        <button\n          v-if=\"needConfirm\"\n          class=\"b-time-picker__ok-btn\"\n          type=\"button\"\n          @click=\"handleOk\"\n        >\n          OK\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n.b-time-picker {\n  --b-time-picker-input-font-size: 14px;\n  --b-time-picker-input-font-size-lg: 16px;\n  --b-time-picker-input-font-size-sm: 14px;\n  --b-time-picker-padding-block: 4px;\n  --b-time-picker-padding-block-lg: 7px;\n  --b-time-picker-padding-block-sm: 0px;\n  --b-time-picker-padding-inline: 11px;\n  --b-time-picker-padding-inline-lg: 11px;\n  --b-time-picker-padding-inline-sm: 7px;\n  --b-time-picker-border-color: #d9d9d9;\n  --b-time-picker-hover-border-color: #4096ff;\n  --b-time-picker-active-border-color: #1677ff;\n  --b-time-picker-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  --b-time-picker-error-active-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);\n  --b-time-picker-warning-active-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);\n  --b-time-picker-bg: #ffffff;\n  --b-time-picker-hover-bg: #ffffff;\n  --b-time-picker-active-bg: #ffffff;\n  --b-time-picker-text-color: rgba(0, 0, 0, 0.88);\n  --b-time-picker-placeholder-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-icon-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-clear-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-clear-hover-color: rgba(0, 0, 0, 0.45);\n  --b-time-picker-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-time-picker-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-panel-bg: #ffffff;\n  --b-time-picker-panel-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);\n  --b-time-picker-cell-height: 28px;\n  --b-time-picker-cell-width: 56px;\n  --b-time-picker-cell-hover-bg: rgba(0, 0, 0, 0.04);\n  --b-time-picker-cell-selected-bg: #e6f4ff;\n  --b-time-picker-cell-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-time-picker-cell-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-column-height: 224px;\n  --b-time-picker-column-width: 56px;\n  --b-time-picker-footer-bg: #ffffff;\n  --b-time-picker-border-radius: 6px;\n  --b-time-picker-panel-border-radius: 8px;\n  --b-time-picker-transition-duration: 0.2s;\n  --b-time-picker-z-index-popup: 1050;\n\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n  max-width: 200px;\n}\n\n/* ──── Input Wrap ──── */\n.b-time-picker__input-wrap {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  background: var(--b-time-picker-bg);\n  border: 1px solid var(--b-time-picker-border-color);\n  border-radius: var(--b-time-picker-border-radius);\n  padding: var(--b-time-picker-padding-block) var(--b-time-picker-padding-inline);\n  cursor: pointer;\n  transition:\n    border-color var(--b-time-picker-transition-duration),\n    box-shadow var(--b-time-picker-transition-duration),\n    background var(--b-time-picker-transition-duration);\n}\n\n.b-time-picker__input-wrap:hover {\n  border-color: var(--b-time-picker-hover-border-color);\n  background: var(--b-time-picker-hover-bg);\n}\n\n.b-time-picker--open .b-time-picker__input-wrap {\n  border-color: var(--b-time-picker-active-border-color);\n  box-shadow: var(--b-time-picker-active-shadow);\n  background: var(--b-time-picker-active-bg);\n}\n\n/* ──── Size Variants ──── */\n.b-time-picker--sm .b-time-picker__input-wrap {\n  padding: var(--b-time-picker-padding-block-sm) var(--b-time-picker-padding-inline-sm);\n}\n\n.b-time-picker--sm .b-time-picker__input {\n  font-size: var(--b-time-picker-input-font-size-sm);\n}\n\n.b-time-picker--lg .b-time-picker__input-wrap {\n  padding: var(--b-time-picker-padding-block-lg) var(--b-time-picker-padding-inline-lg);\n}\n\n.b-time-picker--lg .b-time-picker__input {\n  font-size: var(--b-time-picker-input-font-size-lg);\n}\n\n/* ──── Variant Styles ──── */\n.b-time-picker--filled .b-time-picker__input-wrap {\n  background: rgba(0, 0, 0, 0.04);\n  border-color: transparent;\n}\n\n.b-time-picker--filled .b-time-picker__input-wrap:hover {\n  background: rgba(0, 0, 0, 0.06);\n}\n\n.b-time-picker--borderless .b-time-picker__input-wrap {\n  border-color: transparent;\n  background: transparent;\n  box-shadow: none;\n}\n\n.b-time-picker--underlined .b-time-picker__input-wrap {\n  border-radius: 0;\n  border: none;\n  border-bottom: 1px solid var(--b-time-picker-border-color);\n}\n\n.b-time-picker--underlined .b-time-picker__input-wrap:hover {\n  border-bottom-color: var(--b-time-picker-hover-border-color);\n}\n\n.b-time-picker--underlined.b-time-picker--open .b-time-picker__input-wrap {\n  border-bottom-color: var(--b-time-picker-active-border-color);\n  box-shadow: none;\n}\n\n/* ──── Status ──── */\n.b-time-picker--error .b-time-picker__input-wrap {\n  border-color: #ff4d4f;\n}\n\n.b-time-picker--error.b-time-picker--open .b-time-picker__input-wrap {\n  box-shadow: var(--b-time-picker-error-active-shadow);\n}\n\n.b-time-picker--warning .b-time-picker__input-wrap {\n  border-color: #faad14;\n}\n\n.b-time-picker--warning.b-time-picker--open .b-time-picker__input-wrap {\n  box-shadow: var(--b-time-picker-warning-active-shadow);\n}\n\n/* ──── Disabled ──── */\n.b-time-picker--disabled .b-time-picker__input-wrap {\n  background: var(--b-time-picker-disabled-bg);\n  border-color: var(--b-time-picker-border-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.b-time-picker--disabled .b-time-picker__input {\n  color: var(--b-time-picker-disabled-color);\n  cursor: not-allowed;\n}\n\n/* ──── Input ──── */\n.b-time-picker__input {\n  flex: 1;\n  border: none;\n  outline: none;\n  background: transparent;\n  font-size: var(--b-time-picker-input-font-size);\n  color: var(--b-time-picker-text-color);\n  line-height: 1.5;\n  padding: 0;\n  min-width: 0;\n}\n\n.b-time-picker__input::placeholder {\n  color: var(--b-time-picker-placeholder-color);\n}\n\n/* ──── Suffix / Icons ──── */\n.b-time-picker__suffix {\n  display: flex;\n  align-items: center;\n  margin-left: 4px;\n  flex-shrink: 0;\n}\n\n.b-time-picker__icon {\n  width: 14px;\n  height: 14px;\n  color: var(--b-time-picker-icon-color);\n}\n\n.b-time-picker__clear {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  color: var(--b-time-picker-clear-color);\n  transition: color var(--b-time-picker-transition-duration);\n}\n\n.b-time-picker__clear:hover {\n  color: var(--b-time-picker-clear-hover-color);\n}\n\n.b-time-picker__clear svg {\n  width: 14px;\n  height: 14px;\n}\n\n.b-time-picker__status-text {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n}\n\n/* ──── Panel ──── */\n.b-time-picker__panel {\n  position: absolute;\n  position-anchor: var(--b-time-picker-anchor);\n  inset: unset;\n  top: anchor(bottom);\n  left: anchor(left);\n  margin: 0;\n  margin-top: 4px;\n  padding: 0;\n  border: none;\n  border-radius: var(--b-time-picker-panel-border-radius);\n  background: var(--b-time-picker-panel-bg);\n  box-shadow: var(--b-time-picker-panel-shadow);\n  z-index: var(--b-time-picker-z-index-popup);\n  overflow: hidden;\n  opacity: 0;\n  transform: translateY(-4px);\n  transition:\n    opacity var(--b-time-picker-transition-duration) ease,\n    transform var(--b-time-picker-transition-duration) ease;\n}\n\n.b-time-picker__panel:popover-open {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n@starting-style {\n  .b-time-picker__panel:popover-open {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n/* ──── Columns ──── */\n.b-time-picker__columns {\n  display: flex;\n  border-bottom: 1px solid #f0f0f0;\n}\n\n.b-time-picker__column {\n  width: var(--b-time-picker-column-width);\n  height: var(--b-time-picker-column-height);\n  overflow-y: auto;\n  overflow-x: hidden;\n  border-right: 1px solid #f0f0f0;\n  scroll-behavior: smooth;\n  scrollbar-width: thin;\n}\n\n.b-time-picker__column:last-child {\n  border-right: none;\n}\n\n/* ──── Cells ──── */\n.b-time-picker__cell {\n  height: var(--b-time-picker-cell-height);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--b-time-picker-text-color);\n  transition: background var(--b-time-picker-transition-duration);\n  user-select: none;\n}\n\n.b-time-picker__cell:hover {\n  background: var(--b-time-picker-cell-hover-bg);\n}\n\n.b-time-picker__cell--selected {\n  background: var(--b-time-picker-cell-selected-bg);\n  font-weight: 600;\n}\n\n.b-time-picker__cell--focused {\n  outline: 2px solid var(--b-time-picker-active-border-color);\n  outline-offset: -2px;\n}\n\n.b-time-picker__cell--disabled {\n  color: var(--b-time-picker-cell-disabled-color);\n  background: var(--b-time-picker-cell-disabled-bg);\n  cursor: not-allowed;\n}\n\n.b-time-picker__cell--disabled:hover {\n  background: var(--b-time-picker-cell-disabled-bg);\n}\n\n/* ──── Footer ──── */\n.b-time-picker__footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 8px;\n  background: var(--b-time-picker-footer-bg);\n}\n\n.b-time-picker__now-btn {\n  border: none;\n  background: none;\n  color: var(--b-time-picker-active-border-color);\n  cursor: pointer;\n  font-size: 14px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: background var(--b-time-picker-transition-duration);\n}\n\n.b-time-picker__now-btn:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n.b-time-picker__ok-btn {\n  border: none;\n  background: var(--b-time-picker-active-border-color);\n  color: #fff;\n  cursor: pointer;\n  font-size: 14px;\n  padding: 2px 12px;\n  border-radius: 4px;\n  font-weight: 500;\n  line-height: 1.5;\n  transition:\n    background var(--b-time-picker-transition-duration),\n    opacity var(--b-time-picker-transition-duration);\n}\n\n.b-time-picker__ok-btn:hover {\n  opacity: 0.85;\n}\n\n/* ──── Placement ──── */\n.b-time-picker--bottom-right .b-time-picker__panel {\n  left: unset;\n  right: anchor(right);\n}\n\n.b-time-picker--top-left .b-time-picker__panel {\n  top: unset;\n  bottom: anchor(top);\n  margin-top: 0;\n  margin-bottom: 4px;\n}\n\n.b-time-picker--top-right .b-time-picker__panel {\n  top: unset;\n  bottom: anchor(top);\n  left: unset;\n  right: anchor(right);\n  margin-top: 0;\n  margin-bottom: 4px;\n}\n\n/* ──── Dark Mode ──── */\n[data-prefers-color='dark'] .b-time-picker {\n  --b-time-picker-bg: #141414;\n  --b-time-picker-hover-bg: #141414;\n  --b-time-picker-active-bg: #141414;\n  --b-time-picker-border-color: #424242;\n  --b-time-picker-hover-border-color: #165dff;\n  --b-time-picker-active-border-color: #1668dc;\n  --b-time-picker-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n  --b-time-picker-text-color: rgba(255, 255, 255, 0.85);\n  --b-time-picker-placeholder-color: rgba(255, 255, 255, 0.25);\n  --b-time-picker-icon-color: rgba(255, 255, 255, 0.3);\n  --b-time-picker-clear-color: rgba(255, 255, 255, 0.3);\n  --b-time-picker-clear-hover-color: rgba(255, 255, 255, 0.55);\n  --b-time-picker-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-time-picker-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-time-picker-panel-bg: #1f1f1f;\n  --b-time-picker-panel-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  --b-time-picker-cell-hover-bg: rgba(255, 255, 255, 0.08);\n  --b-time-picker-cell-selected-bg: #111a2c;\n  --b-time-picker-cell-disabled-bg: rgba(255, 255, 255, 0.04);\n  --b-time-picker-cell-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-time-picker-footer-bg: #1f1f1f;\n  --b-time-picker-error-active-shadow: 0 0 0 2px rgba(220, 56, 72, 0.15);\n  --b-time-picker-warning-active-shadow: 0 0 0 2px rgba(217, 146, 0, 0.15);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-time-picker {\n    --b-time-picker-bg: #141414;\n    --b-time-picker-hover-bg: #141414;\n    --b-time-picker-active-bg: #141414;\n    --b-time-picker-border-color: #424242;\n    --b-time-picker-hover-border-color: #165dff;\n    --b-time-picker-active-border-color: #1668dc;\n    --b-time-picker-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n    --b-time-picker-text-color: rgba(255, 255, 255, 0.85);\n    --b-time-picker-placeholder-color: rgba(255, 255, 255, 0.25);\n    --b-time-picker-icon-color: rgba(255, 255, 255, 0.3);\n    --b-time-picker-clear-color: rgba(255, 255, 255, 0.3);\n    --b-time-picker-clear-hover-color: rgba(255, 255, 255, 0.55);\n    --b-time-picker-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-time-picker-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-time-picker-panel-bg: #1f1f1f;\n    --b-time-picker-panel-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 9px 28px 8px rgba(0, 0, 0, 0.2);\n    --b-time-picker-cell-hover-bg: rgba(255, 255, 255, 0.08);\n    --b-time-picker-cell-selected-bg: #111a2c;\n    --b-time-picker-cell-disabled-bg: rgba(255, 255, 255, 0.04);\n    --b-time-picker-cell-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-time-picker-footer-bg: #1f1f1f;\n    --b-time-picker-error-active-shadow: 0 0 0 2px rgba(220, 56, 72, 0.15);\n    --b-time-picker-warning-active-shadow: 0 0 0 2px rgba(217, 146, 0, 0.15);\n  }\n}\n\n/* ──── Reduced Motion ──── */\n@media (prefers-reduced-motion: reduce) {\n  .b-time-picker,\n  .b-time-picker * {\n    --b-time-picker-transition-duration: 0ms;\n    transition-duration: 0ms !important;\n    animation-duration: 0ms !important;\n  }\n\n  .b-time-picker__column {\n    scroll-behavior: auto;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system195.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":";;;;;;;;;;;;;;;;EAiBA,IAAM,IAAU,QAAe;GAC7B;GACA;GACA,qBAAqB,EAAA;GACrB;IACE,2BAA2B,EAAA;IAC3B,8BAA8B,EAAA;IAC/B;GACF,CAAC;yBAIA,EAAgE,QAAA;GAAzD,OAAK,EAAE,EAAA,MAAO;GAAE,MAAK;GAAe,eAAY"}

package/dist/design-system197.js

@@ -1,49 +1,8 @@
-import { BTabsContextKey as e } from "./design-system196.js";
-import { createCommentVNode as t, defineComponent as n, inject as r, onBeforeUnmount as i, onMounted as a, useSlots as o, watch as s } from "vue";
-//#region src/components/BTabs/BTabPane.vue?vue&type=script&setup=true&lang.ts
-var c = /* @__PURE__ */ n({
-	__name: "BTabPane",
-	props: {
-		tabKey: {},
-		tab: {},
-		disabled: { type: Boolean },
-		closable: { type: Boolean },
-		destroyOnHidden: { type: Boolean },
-		forceRender: { type: Boolean },
-		keepAlive: { type: Boolean }
-	},
-	setup(n) {
-		let c = n, l = o(), u = r(e, null);
-		function d() {
-			return {
-				key: c.tabKey,
-				label: c.tab,
-				disabled: c.disabled,
-				closable: c.closable,
-				destroyOnHidden: c.destroyOnHidden,
-				forceRender: c.forceRender,
-				keepAlive: c.keepAlive,
-				renderContent: () => l.default?.() ?? [],
-				renderLabel: l.tab ? () => l.tab() : void 0
-			};
-		}
-		return a(() => {
-			u?.register(d());
-		}), i(() => {
-			u?.unregister(c.tabKey);
-		}), s(() => [
-			c.tab,
-			c.disabled,
-			c.closable,
-			c.destroyOnHidden,
-			c.forceRender,
-			c.keepAlive
-		], () => {
-			u?.update(c.tabKey, d());
-		}), (e, n) => t("", !0);
-	}
-});
+import e from "./design-system195.js";
+/* empty css                 */
+//#region src/components/BSkeleton/BSkeletonInput.vue
+var t = e;
 //#endregion
-export { c as default };
+export { t as default };
 
 //# sourceMappingURL=design-system197.js.map

package/dist/design-system197.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system197.js","names":[],"sources":["../src/components/BTabs/BTabPane.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderSlot as _renderSlot, createCommentVNode as _createCommentVNode } from \"vue\"\n\nimport type { VNode } from 'vue';\nimport { inject, onBeforeUnmount, onMounted, useSlots, watch } from 'vue';\n\nimport { BTabsContextKey } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BTabPane',\n  props: {\n    tabKey: {},\n    tab: {},\n    disabled: { type: Boolean },\n    closable: { type: Boolean },\n    destroyOnHidden: { type: Boolean },\n    forceRender: { type: Boolean },\n    keepAlive: { type: Boolean }\n  },\n  setup(__props: any) {\n\nconst props = __props;\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\n\n\nconst slots = useSlots();\n\n// ─────────────────────────────────────────────\n// Inject parent context\n// ─────────────────────────────────────────────\nconst tabsContext = inject(BTabsContextKey, null);\n\n// ─────────────────────────────────────────────\n// Registration helpers\n// ─────────────────────────────────────────────\nfunction buildRegistration() {\n  return {\n    key: props.tabKey,\n    label: props.tab,\n    disabled: props.disabled,\n    closable: props.closable,\n    destroyOnHidden: props.destroyOnHidden,\n    forceRender: props.forceRender,\n    keepAlive: props.keepAlive,\n    renderContent: () => (slots.default?.() ?? []) as VNode[],\n    renderLabel: slots.tab ? () => slots.tab!() as VNode[] : undefined,\n  };\n}\n\nonMounted(() => {\n  tabsContext?.register(buildRegistration());\n});\n\nonBeforeUnmount(() => {\n  tabsContext?.unregister(props.tabKey);\n});\n\nwatch(\n  () => [\n    props.tab,\n    props.disabled,\n    props.closable,\n    props.destroyOnHidden,\n    props.forceRender,\n    props.keepAlive,\n  ],\n  () => {\n    tabsContext?.update(props.tabKey, buildRegistration());\n  },\n);\n\nreturn (_ctx: any,_cache: any) => {\n  return false\n    ? _renderSlot(_ctx.$slots, \"default\", { key: 0 })\n    : _createCommentVNode(\"\", true)\n}\n}\n\n})"],"mappings":";;;AAYA,IAAA,IAA4B,kBAAiB;CAC3C,QAAQ;CACR,OAAO;EACL,QAAQ,EAAE;EACV,KAAK,EAAE;EACP,UAAU,EAAE,MAAM,SAAS;EAC3B,UAAU,EAAE,MAAM,SAAS;EAC3B,iBAAiB,EAAE,MAAM,SAAS;EAClC,aAAa,EAAE,MAAM,SAAS;EAC9B,WAAW,EAAE,MAAM,SAAS;EAC7B;CACD,MAAM,GAAc;EAEtB,IAAM,IAAQ,GAOR,IAAQ,GAAU,EAKlB,IAAc,EAAO,GAAiB,KAAK;EAKjD,SAAS,IAAoB;AAC3B,UAAO;IACL,KAAK,EAAM;IACX,OAAO,EAAM;IACb,UAAU,EAAM;IAChB,UAAU,EAAM;IAChB,iBAAiB,EAAM;IACvB,aAAa,EAAM;IACnB,WAAW,EAAM;IACjB,qBAAsB,EAAM,WAAW,IAAI,EAAE;IAC7C,aAAa,EAAM,YAAY,EAAM,KAAM,GAAc,KAAA;IAC1D;;AAyBH,SAtBA,QAAgB;AACd,MAAa,SAAS,GAAmB,CAAC;IAC1C,EAEF,QAAsB;AACpB,MAAa,WAAW,EAAM,OAAO;IACrC,EAEF,QACQ;GACJ,EAAM;GACN,EAAM;GACN,EAAM;GACN,EAAM;GACN,EAAM;GACN,EAAM;GACP,QACK;AACJ,MAAa,OAAO,EAAM,QAAQ,GAAmB,CAAC;IAEzD,GAEO,GAAU,MAGZ,EAAoB,IAAI,GAAK;;CAIlC,CAAA"}
+{"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":""}

package/dist/design-system198.js

@@ -1,7 +1,34 @@
-import e from "./design-system197.js";
-//#region src/components/BTabs/BTabPane.vue
-var t = e;
+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
+var o = /* @__PURE__ */ n({
+	__name: "BSkeletonNode",
+	props: {
+		active: {
+			type: Boolean,
+			default: !1
+		},
+		fullSize: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(n) {
+		let o = e(() => [
+			"b-skeleton-element",
+			"b-skeleton-node",
+			{
+				"b-skeleton-node--full-size": n.fullSize,
+				"b-skeleton-element--active": n.active
+			}
+		]);
+		return (e, n) => (i(), t("div", {
+			class: r(o.value),
+			role: "presentation",
+			"aria-hidden": "true"
+		}, [a(e.$slots, "default")], 2));
+	}
+});
 //#endregion
-export { t as default };
+export { o as default };
 
 //# sourceMappingURL=design-system198.js.map

package/dist/design-system198.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system198.js","names":[],"sources":["../src/components/BTabs/BTabPane.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VNode } from 'vue';\nimport { inject, onBeforeUnmount, onMounted, useSlots, watch } from 'vue';\n\nimport { BTabsContextKey } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = defineProps<{\n  /** Unique key identifying this tab pane. */\n  tabKey: string;\n  /** Tab header label text. Use the `tab` slot for rich labels. */\n  tab?: string;\n  /** Whether this tab is disabled. @default false */\n  disabled?: boolean;\n  /** Show close button in editable-card mode. @default true */\n  closable?: boolean;\n  /** Destroy content when tab is hidden. @default false */\n  destroyOnHidden?: boolean;\n  /** Force render content even when inactive. @default false */\n  forceRender?: boolean;\n  /** Keep component state alive when switching away. Overrides global setting. */\n  keepAlive?: boolean;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Tab pane content. */\n  default?: () => unknown;\n  /** Custom tab label content. */\n  tab?: () => unknown;\n}>();\n\nconst slots = useSlots();\n\n// ─────────────────────────────────────────────\n// Inject parent context\n// ─────────────────────────────────────────────\nconst tabsContext = inject(BTabsContextKey, null);\n\n// ─────────────────────────────────────────────\n// Registration helpers\n// ─────────────────────────────────────────────\nfunction buildRegistration() {\n  return {\n    key: props.tabKey,\n    label: props.tab,\n    disabled: props.disabled,\n    closable: props.closable,\n    destroyOnHidden: props.destroyOnHidden,\n    forceRender: props.forceRender,\n    keepAlive: props.keepAlive,\n    renderContent: () => (slots.default?.() ?? []) as VNode[],\n    renderLabel: slots.tab ? () => slots.tab!() as VNode[] : undefined,\n  };\n}\n\nonMounted(() => {\n  tabsContext?.register(buildRegistration());\n});\n\nonBeforeUnmount(() => {\n  tabsContext?.unregister(props.tabKey);\n});\n\nwatch(\n  () => [\n    props.tab,\n    props.disabled,\n    props.closable,\n    props.destroyOnHidden,\n    props.forceRender,\n    props.keepAlive,\n  ],\n  () => {\n    tabsContext?.update(props.tabKey, buildRegistration());\n  },\n);\n</script>\n\n<template>\n  <!-- BTabPane is a registration-only component. All rendering is handled by BTabs. -->\n  <slot v-if=\"false\" />\n</template>\n"],"mappings":""}
+{"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"}

package/dist/design-system200.js

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

package/dist/design-system200.js.map

@@ -0,0 +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":""}