@7pmlabs/design-system 2.0.9 → 2.1.0

package/dist/design-system73.js

@@ -1,161 +1,699 @@
-import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, renderList as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, useSlots as h } from "vue";
-//#region src/components/BDescriptions/BDescriptions.vue?vue&type=script&setup=true&lang.ts
-var g = {
+import { useComponentId as e } from "./design-system10.js";
+import { BDatePickerPlacement as t, BDatePickerSize as n, BDatePickerStatus as r, BDatePickerType as i, BDatePickerVariant as a } from "./design-system72.js";
+import { Fragment as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, mergeModels as f, normalizeClass as p, openBlock as m, ref as h, renderList as g, toDisplayString as _, unref as v, useCssVars as ee, useModel as te, watch as y } from "vue";
+//#region src/components/BDatePicker/BDatePicker.vue?vue&type=script&setup=true&lang.ts
+var ne = [
+	"value",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"aria-expanded",
+	"aria-controls"
+], re = ["id", "aria-label"], ie = { class: "b-date-picker__panel-inner" }, ae = {
 	key: 0,
-	class: "b-descriptions__header"
-}, _ = {
+	class: "b-date-picker__presets"
+}, oe = ["onClick"], se = { class: "b-date-picker__panel-main" }, ce = { class: "b-date-picker__header" }, le = ["aria-label"], ue = {
 	key: 0,
-	class: "b-descriptions__title"
-}, v = {
-	key: 1,
-	class: "b-descriptions__extra"
-}, y = { class: "b-descriptions__body" }, b = {
+	class: "b-date-picker__body",
+	role: "grid",
+	"aria-label": "Calendar"
+}, de = {
+	class: "b-date-picker__weekdays",
+	role: "row"
+}, fe = {
+	key: 0,
+	class: "b-date-picker__weekday b-date-picker__week-number-header",
+	role: "columnheader",
+	"aria-label": "Week"
+}, pe = ["aria-label"], me = {
 	key: 0,
-	class: "b-descriptions__table",
-	role: "presentation"
-}, x = ["colspan"], S = { class: "b-descriptions__row" }, C = ["colspan"], w = { class: "b-descriptions__row" }, T = ["colspan"], E = {
+	class: "b-date-picker__cell b-date-picker__week-number"
+}, he = [
+	"aria-label",
+	"aria-selected",
+	"aria-disabled",
+	"disabled",
+	"tabindex",
+	"onClick",
+	"onMouseenter"
+], ge = {
 	key: 1,
-	class: "b-descriptions__table",
-	role: "presentation"
-}, D = ["colspan"], O = { class: "b-descriptions__row" }, k = ["colspan"], A = { class: "b-descriptions__row" }, j = ["colspan"], M = /* @__PURE__ */ s({
-	__name: "BDescriptions",
-	props: {
-		bordered: {
+	class: "b-date-picker__body b-date-picker__grid-3x4",
+	role: "grid",
+	"aria-label": "Month selection"
+}, _e = [
+	"aria-label",
+	"aria-selected",
+	"onClick"
+], ve = {
+	key: 2,
+	class: "b-date-picker__body b-date-picker__grid-3x4",
+	role: "grid",
+	"aria-label": "Year selection"
+}, ye = [
+	"aria-label",
+	"aria-selected",
+	"onClick"
+], be = {
+	key: 3,
+	class: "b-date-picker__body b-date-picker__grid-2x2",
+	role: "grid",
+	"aria-label": "Quarter selection"
+}, xe = ["aria-label", "onClick"], Se = {
+	key: 4,
+	class: "b-date-picker__footer"
+}, b = /* @__PURE__ */ d({
+	__name: "BDatePicker",
+	props: /* @__PURE__ */ f({
+		picker: { default: () => i.Date },
+		size: { default: () => n.Medium },
+		variant: { default: () => a.Outlined },
+		placeholder: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		inputReadOnly: {
 			type: Boolean,
 			default: !1
 		},
-		colon: {
+		allowClear: {
 			type: Boolean,
 			default: !0
 		},
-		column: { default: 3 },
-		layout: { default: "horizontal" },
-		size: { default: "default" },
-		title: {},
-		extra: {},
-		items: {},
-		labelStyle: {},
-		contentStyle: {}
-	},
-	setup(s) {
-		let M = h(), N = t(() => !!(s.title || M.title || s.extra || M.extra)), P = t(() => ["b-descriptions", {
-			"b-descriptions--bordered": s.bordered,
-			"b-descriptions--vertical": s.layout === "vertical",
-			"b-descriptions--horizontal": s.layout === "horizontal",
-			"b-descriptions--middle": s.size === "middle",
-			"b-descriptions--small": s.size === "small",
-			"b-descriptions--colon": s.colon
-		}]), F = t(() => {
-			if (s.items && s.items.length > 0) return s.items.map((e) => ({
-				label: e.label,
-				children: e.children,
-				span: e.span ?? 1,
-				labelStyle: e.labelStyle,
-				contentStyle: e.contentStyle
-			}));
-			let t = M.default?.();
-			if (!t) return [];
-			let n = [];
-			function r(t) {
-				for (let i of t) {
-					if (i.type === e) {
-						Array.isArray(i.children) && r(i.children);
-						continue;
+		showNow: {
+			type: Boolean,
+			default: !0
+		},
+		showWeek: {
+			type: Boolean,
+			default: !1
+		},
+		format: {},
+		locale: {},
+		placement: { default: () => t.BottomLeft },
+		status: {},
+		presets: {},
+		disabledDate: { type: Function },
+		minDate: {},
+		maxDate: {},
+		defaultOpen: {
+			type: Boolean,
+			default: !1
+		},
+		defaultValue: {},
+		defaultPickerValue: {},
+		open: { type: Boolean }
+	}, {
+		modelValue: { default: void 0 },
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ f([
+		"change",
+		"openChange",
+		"panelChange",
+		"ok"
+	], ["update:modelValue"]),
+	setup(t, { expose: n, emit: a }) {
+		ee((e) => ({ v07f2e022: Ce.value }));
+		let d = te(t, "modelValue"), f = a;
+		n({
+			focus: () => x.value?.focus(),
+			blur: () => x.value?.blur()
+		});
+		let { componentUID: b } = e(), Ce = s(() => `--b-date-picker-${b.value}`), x = h(null), S = h(null), C = h(t.defaultOpen), w = h(t.defaultValue ?? null), T = h(t.defaultPickerValue ?? t.defaultValue ?? /* @__PURE__ */ new Date()), E = h(t.picker), D = h(null), O = s({
+			get: () => d.value ?? w.value,
+			set: (e) => {
+				w.value = e, d.value = e;
+			}
+		}), k = h(t.open === void 0 ? t.defaultOpen : !!t.open), A = s(() => {
+			let e = t.locale || navigator?.language || "en-US";
+			try {
+				return Intl.DateTimeFormat(e), e;
+			} catch {
+				return "en-US";
+			}
+		}), we = {
+			date: "YYYY-MM-DD",
+			week: "YYYY-[W]wo",
+			month: "YYYY-MM",
+			quarter: "YYYY-[Q]Q",
+			year: "YYYY"
+		}, j = s(() => t.format ?? we[t.picker] ?? "YYYY-MM-DD");
+		function Te(e, t = 2) {
+			return String(e).padStart(t, "0");
+		}
+		function M(e) {
+			let t = new Date(Date.UTC(e.getFullYear(), e.getMonth(), e.getDate()));
+			t.setUTCDate(t.getUTCDate() + 4 - (t.getUTCDay() || 7));
+			let n = new Date(Date.UTC(t.getUTCFullYear(), 0, 1));
+			return Math.ceil(((t.getTime() - n.getTime()) / 864e5 + 1) / 7);
+		}
+		function N(e) {
+			if (!e) return "";
+			let t = e.getFullYear(), n = e.getMonth() + 1, r = e.getDate(), i = j.value, a = [];
+			return i = i.replace(/\[([^\]]*)\]/g, (e, t) => (a.push(t), `￰${a.length - 1}￰`)), i = i.replace("YYYY", String(t)), i = i.replace("YY", String(t).slice(-2)), i = i.replace("MM", Te(n)), i = i.replace("M", String(n)), i = i.replace("DD", Te(r)), i = i.replace("D", String(r)), i = i.replace("wo", String(M(e))), i = i.replace("Q", String(Math.ceil(n / 3))), i = i.replace(RegExp("￰(\\d+)￰", "g"), (e, t) => a[Number(t)]), i;
+		}
+		function Ee(e) {
+			if (!e) return null;
+			let t = j.value, n = De(e, t);
+			if (n) return n;
+			let r = e.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
+			if (r) {
+				let e = new Date(Number(r[1]), Number(r[2]) - 1, Number(r[3]));
+				if (!isNaN(e.getTime())) return e;
+			}
+			let i = new Date(e);
+			return isNaN(i.getTime()) ? null : i;
+		}
+		function De(e, t) {
+			let n = t.replace(/\[([^\]]*)\]/g, (e, t) => Oe(t)), r = [];
+			for (let [e, t] of [
+				["YYYY", "(\\d{4})"],
+				["YY", "(\\d{2})"],
+				["MM", "(\\d{2})"],
+				["M", "(\\d{1,2})"],
+				["DD", "(\\d{2})"],
+				["D", "(\\d{1,2})"]
+			]) {
+				let i = n.indexOf(e);
+				i !== -1 && (n = n.replace(e, t), r.push({
+					token: e,
+					pos: i
+				}));
+			}
+			r.sort((e, t) => e.pos - t.pos), n = n.replace("wo", "\\d{1,2}"), n = n.replace("Q", "\\d");
+			try {
+				let t = e.match(RegExp(`^${n}$`));
+				if (!t) return null;
+				let i = (/* @__PURE__ */ new Date()).getFullYear(), a = 1, o = 1;
+				r.forEach(({ token: e }, n) => {
+					let r = Number(t[n + 1]);
+					switch (e) {
+						case "YYYY":
+							i = r;
+							break;
+						case "YY":
+							i = 2e3 + r;
+							break;
+						case "MM":
+						case "M":
+							a = r;
+							break;
+						case "DD":
+						case "D":
+							o = r;
+							break;
 					}
-					let t = i.props || {}, a = i.children, o = a?.label?.(), s = a?.default?.();
-					n.push({
-						label: t.label,
-						span: t.span ?? 1,
-						labelStyle: t.labelStyle,
-						contentStyle: t.contentStyle,
-						labelSlot: o ? Array.isArray(o) ? o : [o] : void 0,
-						contentSlot: s ? Array.isArray(s) ? s : [s] : void 0
-					});
-				}
+				});
+				let s = new Date(i, a - 1, o);
+				return isNaN(s.getTime()) || s.getFullYear() !== i || s.getMonth() !== a - 1 || s.getDate() !== o ? null : s;
+			} catch {
+				return null;
 			}
-			return r(t), n;
-		}), I = t(() => {
-			let e = [], t = { items: [] }, n = 0;
-			for (let r = 0; r < F.value.length; r++) {
-				let i = F.value[r], a = r === F.value.length - 1, o = Math.min(i.span, s.column);
-				if (n + o > s.column && t.items.length > 0) {
-					let r = t.items[t.items.length - 1];
-					r.effectiveSpan += s.column - n, e.push(t), t = { items: [] }, n = 0;
-				}
-				a && (o = s.column - n), t.items.push({
-					...i,
-					effectiveSpan: o
-				}), n += o, n >= s.column && (e.push(t), t = { items: [] }, n = 0);
+		}
+		function Oe(e) {
+			return e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+		}
+		let ke = s(() => N(O.value)), Ae = s(() => {
+			let e = A.value, t = [];
+			for (let n = 0; n < 7; n++) {
+				let r = new Date(2024, 0, 7 + n);
+				t.push(r.toLocaleDateString(e, { weekday: "short" }).slice(0, 2));
 			}
-			if (t.items.length > 0) {
-				let r = t.items[t.items.length - 1];
-				r.effectiveSpan += s.column - n, e.push(t);
+			return t;
+		}), P = s(() => {
+			let e = A.value;
+			return Array.from({ length: 12 }, (t, n) => new Date(2024, n, 1).toLocaleDateString(e, { month: "short" }));
+		}), je = s(() => {
+			let e = A.value;
+			try {
+				let t = new Intl.RelativeTimeFormat(e, { numeric: "auto" }).formatToParts(0, "day").find((e) => e.type === "literal")?.value;
+				if (t && t.trim()) return t.trim().charAt(0).toUpperCase() + t.trim().slice(1);
+			} catch {}
+			return "Today";
+		}), F = s(() => {
+			let e = T.value.getFullYear(), t = T.value.getMonth(), n = new Date(e, t, 1).getDay(), r = [];
+			for (let i = n - 1; i >= 0; i--) r.push({
+				date: new Date(e, t, -i),
+				current: !1
+			});
+			let i = new Date(e, t + 1, 0).getDate();
+			for (let n = 1; n <= i; n++) r.push({
+				date: new Date(e, t, n),
+				current: !0
+			});
+			let a = 42 - r.length;
+			for (let n = 1; n <= a; n++) r.push({
+				date: new Date(e, t + 1, n),
+				current: !1
+			});
+			return r;
+		}), Me = s(() => P.value.map((e, t) => ({
+			label: e,
+			month: t,
+			year: T.value.getFullYear()
+		}))), Ne = s(() => {
+			let e = T.value.getFullYear(), t = Math.floor(e / 10) * 10, n = [];
+			for (let e = t - 1; e <= t + 10; e++) n.push({
+				year: e,
+				current: e >= t && e < t + 10
+			});
+			return n;
+		}), Pe = s(() => {
+			let e = T.value.getFullYear();
+			return [
+				1,
+				2,
+				3,
+				4
+			].map((t) => ({
+				quarter: t,
+				year: e,
+				label: `Q${t}`
+			}));
+		}), I = s(() => {
+			let e = T.value.getFullYear(), t = T.value.getMonth();
+			if (E.value === "date" || E.value === "week") return `${P.value[t]} ${e}`;
+			if (E.value === "month" || E.value === "quarter") return `${e}`;
+			if (E.value === "year") {
+				let t = Math.floor(e / 10) * 10;
+				return `${t} - ${t + 9}`;
 			}
-			return e;
+			return `${e}`;
 		});
-		function L(e) {
-			if (!(!s.labelStyle && !e.labelStyle)) return {
-				...s.labelStyle,
-				...e.labelStyle
-			};
+		function L(e, t) {
+			return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
+		}
+		function Fe(e) {
+			return L(e, /* @__PURE__ */ new Date());
 		}
 		function R(e) {
-			if (!(!s.contentStyle && !e.contentStyle)) return {
-				...s.contentStyle,
-				...e.contentStyle
-			};
-		}
-		return (t, h) => (u(), i("div", { class: c(P.value) }, [N.value ? (u(), i("div", g, [s.title || t.$slots.title ? (u(), i("div", _, [f(t.$slots, "title", {}, () => [o(m(s.title), 1)])])) : r("", !0), s.extra || t.$slots.extra ? (u(), i("div", v, [f(t.$slots, "extra", {}, () => [o(m(s.extra), 1)])])) : r("", !0)])) : r("", !0), a("div", y, [s.bordered ? (u(), i("table", b, [a("tbody", null, [s.layout === "horizontal" ? (u(!0), i(e, { key: 0 }, d(I.value, (t, r) => (u(), i("tr", {
-			key: r,
-			class: "b-descriptions__row"
-		}, [(u(!0), i(e, null, d(t.items, (t, r) => (u(), i(e, { key: r }, [a("th", {
-			class: "b-descriptions__item-label b-descriptions__item-label--bordered",
-			style: l(L(t))
-		}, [t.labelSlot && t.labelSlot.length ? (u(), n(p(() => t.labelSlot), { key: 0 })) : (u(), i(e, { key: 1 }, [o(m(t.label), 1)], 64))], 4), a("td", {
-			class: "b-descriptions__item-content b-descriptions__item-content--bordered",
-			colspan: t.effectiveSpan * 2 - 1,
-			style: l(R(t))
-		}, [t.contentSlot && t.contentSlot.length ? (u(), n(p(() => t.contentSlot), { key: 0 })) : (u(), i(e, { key: 1 }, [o(m(t.children), 1)], 64))], 12, x)], 64))), 128))]))), 128)) : (u(!0), i(e, { key: 1 }, d(I.value, (t, r) => (u(), i(e, { key: r }, [a("tr", S, [(u(!0), i(e, null, d(t.items, (t, r) => (u(), i("th", {
-			key: "label-" + r,
-			class: "b-descriptions__item-label b-descriptions__item-label--bordered",
-			colspan: t.effectiveSpan,
-			style: l(L(t))
-		}, [t.labelSlot && t.labelSlot.length ? (u(), n(p(() => t.labelSlot), { key: 0 })) : (u(), i(e, { key: 1 }, [o(m(t.label), 1)], 64))], 12, C))), 128))]), a("tr", w, [(u(!0), i(e, null, d(t.items, (t, r) => (u(), i("td", {
-			key: "content-" + r,
-			class: "b-descriptions__item-content b-descriptions__item-content--bordered",
-			colspan: t.effectiveSpan,
-			style: l(R(t))
-		}, [t.contentSlot && t.contentSlot.length ? (u(), n(p(() => t.contentSlot), { key: 0 })) : (u(), i(e, { key: 1 }, [o(m(t.children), 1)], 64))], 12, T))), 128))])], 64))), 128))])])) : (u(), i("table", E, [a("tbody", null, [s.layout === "horizontal" ? (u(!0), i(e, { key: 0 }, d(I.value, (t, r) => (u(), i("tr", {
-			key: r,
-			class: "b-descriptions__row"
-		}, [(u(!0), i(e, null, d(t.items, (t, r) => (u(), i("td", {
-			key: r,
-			class: "b-descriptions__item",
-			colspan: t.effectiveSpan
-		}, [a("span", {
-			class: "b-descriptions__item-label",
-			style: l(L(t))
-		}, [t.labelSlot && t.labelSlot.length ? (u(), n(p(() => t.labelSlot), { key: 0 })) : (u(), i(e, { key: 1 }, [o(m(t.label), 1)], 64))], 4), a("span", {
-			class: "b-descriptions__item-content",
-			style: l(R(t))
-		}, [t.contentSlot && t.contentSlot.length ? (u(), n(p(() => t.contentSlot), { key: 0 })) : (u(), i(e, { key: 1 }, [o(m(t.children), 1)], 64))], 4)], 8, D))), 128))]))), 128)) : (u(!0), i(e, { key: 1 }, d(I.value, (t, r) => (u(), i(e, { key: r }, [a("tr", O, [(u(!0), i(e, null, d(t.items, (t, r) => (u(), i("td", {
-			key: "label-" + r,
-			class: "b-descriptions__item",
-			colspan: t.effectiveSpan
-		}, [a("span", {
-			class: "b-descriptions__item-label",
-			style: l(L(t))
-		}, [t.labelSlot && t.labelSlot.length ? (u(), n(p(() => t.labelSlot), { key: 0 })) : (u(), i(e, { key: 1 }, [o(m(t.label), 1)], 64))], 4)], 8, k))), 128))]), a("tr", A, [(u(!0), i(e, null, d(t.items, (t, r) => (u(), i("td", {
-			key: "content-" + r,
-			class: "b-descriptions__item",
-			colspan: t.effectiveSpan
-		}, [a("span", {
-			class: "b-descriptions__item-content",
-			style: l(R(t))
-		}, [t.contentSlot && t.contentSlot.length ? (u(), n(p(() => t.contentSlot), { key: 0 })) : (u(), i(e, { key: 1 }, [o(m(t.children), 1)], 64))], 4)], 8, j))), 128))])], 64))), 128))])]))])], 2));
+			return O.value ? L(e, O.value) : !1;
+		}
+		function z(e) {
+			return t.minDate && e < new Date(t.minDate.getFullYear(), t.minDate.getMonth(), t.minDate.getDate()) || t.maxDate && e > new Date(t.maxDate.getFullYear(), t.maxDate.getMonth(), t.maxDate.getDate()) ? !0 : t.disabledDate ? t.disabledDate(e, { type: t.picker }) : !1;
+		}
+		function B() {
+			t.disabled || (C.value = !0, k.value = !0, f("openChange", !0), S.value?.showPopover?.(), x.value?.focus());
+		}
+		function V() {
+			C.value = !1, k.value = !1, f("openChange", !1), S.value?.hidePopover?.(), x.value?.focus();
+		}
+		function Ie() {
+			k.value ? V() : B();
+		}
+		function Le(e) {
+			let t = e.newState === "open";
+			C.value = t, k.value = t, t || f("openChange", !1);
+		}
+		function H(e) {
+			z(e) || (O.value = e, T.value = new Date(e), f("change", e, N(e)), V());
+		}
+		function U(e) {
+			if (t.picker === i.Month) {
+				let t = new Date(T.value.getFullYear(), e, 1);
+				O.value = t, f("change", t, N(t)), V();
+			} else T.value = new Date(T.value.getFullYear(), e, 1), E.value = "date", f("panelChange", T.value, "date");
+		}
+		function W(e) {
+			if (t.picker === i.Year) {
+				let t = new Date(e, 0, 1);
+				O.value = t, f("change", t, N(t)), V();
+			} else T.value = new Date(e, T.value.getMonth(), 1), E.value = t.picker === i.Month ? "month" : "date", f("panelChange", T.value, E.value);
+		}
+		function Re(e) {
+			let t = new Date(T.value.getFullYear(), (e - 1) * 3, 1);
+			O.value = t, f("change", t, N(t)), V();
+		}
+		function ze() {
+			let e = /* @__PURE__ */ new Date();
+			e.setHours(0, 0, 0, 0), H(e);
+		}
+		function Be(e) {
+			H(typeof e.value == "function" ? e.value() : e.value);
+		}
+		function Ve(e) {
+			e.stopPropagation(), O.value = null, f("change", null, "");
+		}
+		function G() {
+			T.value = new Date(T.value.getFullYear(), T.value.getMonth() - 1, 1);
+		}
+		function K() {
+			T.value = new Date(T.value.getFullYear(), T.value.getMonth() + 1, 1);
+		}
+		function q() {
+			T.value = new Date(T.value.getFullYear() - 1, T.value.getMonth(), 1);
+		}
+		function J() {
+			T.value = new Date(T.value.getFullYear() + 1, T.value.getMonth(), 1);
+		}
+		function He() {
+			T.value = new Date(T.value.getFullYear() - 10, T.value.getMonth(), 1);
+		}
+		function Ue() {
+			T.value = new Date(T.value.getFullYear() + 10, T.value.getMonth(), 1);
+		}
+		function We(e) {
+			E.value = e, f("panelChange", T.value, e);
+		}
+		let Y = h("");
+		function Ge(e) {
+			Y.value = e.target.value;
+		}
+		function Ke() {
+			if (Y.value) {
+				let e = Ee(Y.value);
+				e && !z(e) && (O.value = e, T.value = new Date(e), f("change", e, N(e)));
+			}
+			Y.value = "";
+		}
+		function qe(e) {
+			e.key === "Enter" ? k.value ? (Ke(), V()) : B() : e.key === "Escape" ? V() : e.key === "ArrowDown" && !k.value && B();
+		}
+		function Je(e) {
+			if (e.key === "Escape") {
+				V();
+				return;
+			}
+			E.value === "date" || E.value === "week" ? Ye(e) : E.value === "month" ? Xe(e) : E.value === "year" && Ze(e);
+		}
+		function Ye(e) {
+			let t = new Date(T.value), n = !1;
+			switch (e.key) {
+				case "ArrowLeft":
+					t.setDate(t.getDate() - 1), n = !0;
+					break;
+				case "ArrowRight":
+					t.setDate(t.getDate() + 1), n = !0;
+					break;
+				case "ArrowUp":
+					t.setDate(t.getDate() - 7), n = !0;
+					break;
+				case "ArrowDown":
+					t.setDate(t.getDate() + 7), n = !0;
+					break;
+				case "Enter":
+				case " ":
+					e.preventDefault(), H(T.value);
+					return;
+				case "PageUp":
+					e.shiftKey ? q() : G(), e.preventDefault();
+					return;
+				case "PageDown":
+					e.shiftKey ? J() : K(), e.preventDefault();
+					return;
+			}
+			n && (e.preventDefault(), T.value = t);
+		}
+		function Xe(e) {
+			let t = T.value.getMonth(), n = t;
+			switch (e.key) {
+				case "ArrowLeft":
+					n = t - 1;
+					break;
+				case "ArrowRight":
+					n = t + 1;
+					break;
+				case "ArrowUp":
+					n = t - 3;
+					break;
+				case "ArrowDown":
+					n = t + 3;
+					break;
+				case "Enter":
+				case " ":
+					e.preventDefault(), U(t);
+					return;
+				default: return;
+			}
+			e.preventDefault(), n < 0 ? T.value = new Date(T.value.getFullYear() - 1, 12 + n, 1) : n > 11 ? T.value = new Date(T.value.getFullYear() + 1, n - 12, 1) : T.value = new Date(T.value.getFullYear(), n, 1);
+		}
+		function Ze(e) {
+			let t = T.value.getFullYear(), n = t;
+			switch (e.key) {
+				case "ArrowLeft":
+					n = t - 1;
+					break;
+				case "ArrowRight":
+					n = t + 1;
+					break;
+				case "ArrowUp":
+					n = t - 3;
+					break;
+				case "ArrowDown":
+					n = t + 3;
+					break;
+				case "Enter":
+				case " ":
+					e.preventDefault(), W(t);
+					return;
+				default: return;
+			}
+			e.preventDefault(), T.value = new Date(n, T.value.getMonth(), 1);
+		}
+		let X = s(() => E.value === "date" || E.value === "week"), Z = s(() => E.value === "month"), Q = s(() => E.value === "year"), $ = s(() => E.value === "quarter"), Qe = s(() => t.placeholder ? t.placeholder : {
+			date: "Select date",
+			week: "Select week",
+			month: "Select month",
+			quarter: "Select quarter",
+			year: "Select year"
+		}[t.picker] ?? "Select date");
+		return y(() => t.open, (e) => {
+			e !== void 0 && (k.value = e, C.value = e, e ? S.value?.showPopover?.() : S.value?.hidePopover?.());
+		}), y(k, (e) => {
+			e && (E.value = t.picker, O.value && (T.value = new Date(O.value)));
+		}), (e, n) => (m(), l("div", { class: p(["b-date-picker", [
+			`b-date-picker--${t.size}`,
+			`b-date-picker--${t.variant}`,
+			{
+				"b-date-picker--disabled": t.disabled,
+				"b-date-picker--focused": k.value,
+				"b-date-picker--clearable": t.allowClear && !!O.value && !t.disabled,
+				"b-date-picker--error": t.status === v(r).Error,
+				"b-date-picker--warning": t.status === v(r).Warning
+			}
+		]]) }, [u("div", {
+			class: "b-date-picker__input-wrap",
+			onClick: Ie
+		}, [
+			u("input", {
+				ref_key: "inputEl",
+				ref: x,
+				class: "b-date-picker__input",
+				type: "text",
+				value: Y.value || ke.value,
+				placeholder: Qe.value,
+				disabled: t.disabled,
+				readonly: t.inputReadOnly,
+				"aria-expanded": k.value,
+				"aria-haspopup": "dialog",
+				"aria-controls": k.value ? `b-date-picker-panel-${v(b)}` : void 0,
+				role: "combobox",
+				autocomplete: "off",
+				onInput: Ge,
+				onBlur: Ke,
+				onKeydown: qe
+			}, null, 40, ne),
+			t.allowClear && O.value && !t.disabled ? (m(), l("button", {
+				key: 0,
+				class: "b-date-picker__clear",
+				type: "button",
+				"aria-label": "Clear date",
+				tabindex: "-1",
+				onClick: Ve
+			}, [...n[2] ||= [u("svg", {
+				viewBox: "0 0 16 16",
+				fill: "currentColor",
+				"aria-hidden": "true"
+			}, [u("path", { d: "M8 1a7 7 0 110 14A7 7 0 018 1zm2.828 4.172a.5.5 0 00-.707 0L8 7.293 5.879 5.172a.5.5 0 10-.707.707L7.293 8l-2.121 2.121a.5.5 0 10.707.707L8 8.707l2.121 2.121a.5.5 0 10.707-.707L8.707 8l2.121-2.121a.5.5 0 000-.707z" })], -1)]])) : c("", !0),
+			n[3] ||= u("span", {
+				class: "b-date-picker__suffix",
+				"aria-hidden": "true"
+			}, [u("svg", {
+				viewBox: "0 0 16 16",
+				fill: "currentColor"
+			}, [u("path", { d: "M4.5 1a.5.5 0 01.5.5V2h6v-.5a.5.5 0 011 0V2h1.5A1.5 1.5 0 0115 3.5v10a1.5 1.5 0 01-1.5 1.5h-11A1.5 1.5 0 011 13.5v-10A1.5 1.5 0 012.5 2H4v-.5a.5.5 0 01.5-.5zM14 6H2v7.5a.5.5 0 00.5.5h11a.5.5 0 00.5-.5V6zm-1.5-3H12v.5a.5.5 0 01-1 0V3H5v.5a.5.5 0 01-1 0V3H2.5a.5.5 0 00-.5.5V5h12V3.5a.5.5 0 00-.5-.5z" })])], -1)
+		]), u("div", {
+			id: `b-date-picker-panel-${v(b)}`,
+			ref_key: "panelEl",
+			ref: S,
+			class: "b-date-picker__panel",
+			popover: "",
+			role: "dialog",
+			"aria-label": `${t.picker} picker`,
+			"aria-modal": !0,
+			onToggle: Le,
+			onKeydown: Je
+		}, [u("div", ie, [t.presets && t.presets.length ? (m(), l("div", ae, [(m(!0), l(o, null, g(t.presets, (e) => (m(), l("button", {
+			key: e.label,
+			class: "b-date-picker__preset-btn",
+			type: "button",
+			onClick: (t) => Be(e)
+		}, _(e.label), 9, oe))), 128))])) : c("", !0), u("div", se, [
+			u("div", ce, [
+				X.value ? (m(), l("button", {
+					key: 0,
+					class: "b-date-picker__nav-btn",
+					type: "button",
+					"aria-label": "Previous year",
+					onClick: q
+				}, [...n[4] ||= [u("svg", {
+					viewBox: "0 0 16 16",
+					fill: "currentColor",
+					"aria-hidden": "true"
+				}, [u("path", { d: "M9.354 3.354a.5.5 0 00-.708-.708l-5 5a.5.5 0 000 .708l5 5a.5.5 0 00.708-.708L4.707 8l4.647-4.646z" }), u("path", { d: "M12.354 3.354a.5.5 0 00-.708-.708l-5 5a.5.5 0 000 .708l5 5a.5.5 0 00.708-.708L7.707 8l4.647-4.646z" })], -1)]])) : c("", !0),
+				Q.value ? (m(), l("button", {
+					key: 1,
+					class: "b-date-picker__nav-btn",
+					type: "button",
+					"aria-label": "Previous decade",
+					onClick: He
+				}, [...n[5] ||= [u("svg", {
+					viewBox: "0 0 16 16",
+					fill: "currentColor",
+					"aria-hidden": "true"
+				}, [u("path", { d: "M9.354 3.354a.5.5 0 00-.708-.708l-5 5a.5.5 0 000 .708l5 5a.5.5 0 00.708-.708L4.707 8l4.647-4.646z" }), u("path", { d: "M12.354 3.354a.5.5 0 00-.708-.708l-5 5a.5.5 0 000 .708l5 5a.5.5 0 00.708-.708L7.707 8l4.647-4.646z" })], -1)]])) : c("", !0),
+				X.value ? (m(), l("button", {
+					key: 2,
+					class: "b-date-picker__nav-btn",
+					type: "button",
+					"aria-label": "Previous month",
+					onClick: G
+				}, [...n[6] ||= [u("svg", {
+					viewBox: "0 0 16 16",
+					fill: "currentColor",
+					"aria-hidden": "true"
+				}, [u("path", { d: "M10.354 3.354a.5.5 0 00-.708-.708l-5 5a.5.5 0 000 .708l5 5a.5.5 0 00.708-.708L5.707 8l4.647-4.646z" })], -1)]])) : c("", !0),
+				Z.value || $.value ? (m(), l("button", {
+					key: 3,
+					class: "b-date-picker__nav-btn",
+					type: "button",
+					"aria-label": "Previous year",
+					onClick: q
+				}, [...n[7] ||= [u("svg", {
+					viewBox: "0 0 16 16",
+					fill: "currentColor",
+					"aria-hidden": "true"
+				}, [u("path", { d: "M10.354 3.354a.5.5 0 00-.708-.708l-5 5a.5.5 0 000 .708l5 5a.5.5 0 00.708-.708L5.707 8l4.647-4.646z" })], -1)]])) : c("", !0),
+				u("button", {
+					class: "b-date-picker__heading",
+					type: "button",
+					"aria-label": `Current view: ${I.value}`,
+					onClick: n[0] ||= (e) => We(E.value === "date" || E.value === "week" ? "month" : (E.value === "month" || E.value, "year"))
+				}, _(I.value), 9, le),
+				X.value ? (m(), l("button", {
+					key: 4,
+					class: "b-date-picker__nav-btn",
+					type: "button",
+					"aria-label": "Next month",
+					onClick: K
+				}, [...n[8] ||= [u("svg", {
+					viewBox: "0 0 16 16",
+					fill: "currentColor",
+					"aria-hidden": "true"
+				}, [u("path", { d: "M5.646 3.354a.5.5 0 01.708-.708l5 5a.5.5 0 010 .708l-5 5a.5.5 0 01-.708-.708L10.293 8 5.646 3.354z" })], -1)]])) : c("", !0),
+				Z.value || $.value ? (m(), l("button", {
+					key: 5,
+					class: "b-date-picker__nav-btn",
+					type: "button",
+					"aria-label": "Next year",
+					onClick: J
+				}, [...n[9] ||= [u("svg", {
+					viewBox: "0 0 16 16",
+					fill: "currentColor",
+					"aria-hidden": "true"
+				}, [u("path", { d: "M5.646 3.354a.5.5 0 01.708-.708l5 5a.5.5 0 010 .708l-5 5a.5.5 0 01-.708-.708L10.293 8 5.646 3.354z" })], -1)]])) : c("", !0),
+				X.value ? (m(), l("button", {
+					key: 6,
+					class: "b-date-picker__nav-btn",
+					type: "button",
+					"aria-label": "Next year",
+					onClick: J
+				}, [...n[10] ||= [u("svg", {
+					viewBox: "0 0 16 16",
+					fill: "currentColor",
+					"aria-hidden": "true"
+				}, [u("path", { d: "M5.646 3.354a.5.5 0 01.708-.708l5 5a.5.5 0 010 .708l-5 5a.5.5 0 01-.708-.708L10.293 8 5.646 3.354z" }), u("path", { d: "M2.646 3.354a.5.5 0 01.708-.708l5 5a.5.5 0 010 .708l-5 5a.5.5 0 01-.708-.708L7.293 8 2.646 3.354z" })], -1)]])) : c("", !0),
+				Q.value ? (m(), l("button", {
+					key: 7,
+					class: "b-date-picker__nav-btn",
+					type: "button",
+					"aria-label": "Next decade",
+					onClick: Ue
+				}, [...n[11] ||= [u("svg", {
+					viewBox: "0 0 16 16",
+					fill: "currentColor",
+					"aria-hidden": "true"
+				}, [u("path", { d: "M5.646 3.354a.5.5 0 01.708-.708l5 5a.5.5 0 010 .708l-5 5a.5.5 0 01-.708-.708L10.293 8 5.646 3.354z" }), u("path", { d: "M2.646 3.354a.5.5 0 01.708-.708l5 5a.5.5 0 010 .708l-5 5a.5.5 0 01-.708-.708L7.293 8 2.646 3.354z" })], -1)]])) : c("", !0)
+			]),
+			X.value ? (m(), l("div", ue, [u("div", de, [t.showWeek ? (m(), l("div", fe, " # ")) : c("", !0), (m(!0), l(o, null, g(Ae.value, (e) => (m(), l("div", {
+				key: e,
+				class: "b-date-picker__weekday",
+				role: "columnheader",
+				"aria-label": e
+			}, _(e), 9, pe))), 128))]), (m(), l(o, null, g(6, (e, r) => u("div", {
+				key: r,
+				class: "b-date-picker__row",
+				role: "row"
+			}, [t.showWeek ? (m(), l("div", me, _(M(F.value[r * 7].date)), 1)) : c("", !0), (m(!0), l(o, null, g(F.value.slice(r * 7, r * 7 + 7), (e, t) => (m(), l("button", {
+				key: t,
+				class: p(["b-date-picker__cell", {
+					"b-date-picker__cell--other": !e.current,
+					"b-date-picker__cell--today": Fe(e.date),
+					"b-date-picker__cell--selected": R(e.date),
+					"b-date-picker__cell--disabled": z(e.date),
+					"b-date-picker__cell--hovered": D.value && L(e.date, D.value)
+				}]),
+				type: "button",
+				"aria-label": `${e.date.getFullYear()}-${String(e.date.getMonth() + 1).padStart(2, "0")}-${String(e.date.getDate()).padStart(2, "0")}`,
+				"aria-selected": R(e.date),
+				"aria-disabled": z(e.date),
+				disabled: z(e.date),
+				tabindex: L(e.date, T.value) ? 0 : -1,
+				onClick: (t) => H(e.date),
+				onMouseenter: (t) => D.value = e.date,
+				onMouseleave: n[1] ||= (e) => D.value = null
+			}, _(e.date.getDate()), 43, he))), 128))])), 64))])) : c("", !0),
+			Z.value ? (m(), l("div", ge, [(m(!0), l(o, null, g(Me.value, (e) => (m(), l("button", {
+				key: e.month,
+				class: p(["b-date-picker__cell b-date-picker__cell--large", {
+					"b-date-picker__cell--selected": O.value && O.value.getFullYear() === e.year && O.value.getMonth() === e.month,
+					"b-date-picker__cell--current": (/* @__PURE__ */ new Date()).getMonth() === e.month && (/* @__PURE__ */ new Date()).getFullYear() === e.year
+				}]),
+				type: "button",
+				"aria-label": e.label,
+				"aria-selected": O.value?.getMonth() === e.month && O.value?.getFullYear() === e.year,
+				onClick: (t) => U(e.month)
+			}, _(e.label), 11, _e))), 128))])) : c("", !0),
+			Q.value ? (m(), l("div", ve, [(m(!0), l(o, null, g(Ne.value, (e) => (m(), l("button", {
+				key: e.year,
+				class: p(["b-date-picker__cell b-date-picker__cell--large", {
+					"b-date-picker__cell--other": !e.current,
+					"b-date-picker__cell--selected": O.value && O.value.getFullYear() === e.year,
+					"b-date-picker__cell--current": (/* @__PURE__ */ new Date()).getFullYear() === e.year
+				}]),
+				type: "button",
+				"aria-label": String(e.year),
+				"aria-selected": O.value?.getFullYear() === e.year,
+				onClick: (t) => W(e.year)
+			}, _(e.year), 11, ye))), 128))])) : c("", !0),
+			$.value ? (m(), l("div", be, [(m(!0), l(o, null, g(Pe.value, (e) => (m(), l("button", {
+				key: e.quarter,
+				class: p(["b-date-picker__cell b-date-picker__cell--large", { "b-date-picker__cell--selected": O.value && Math.ceil((O.value.getMonth() + 1) / 3) === e.quarter && O.value.getFullYear() === e.year }]),
+				type: "button",
+				"aria-label": `Quarter ${e.quarter}`,
+				onClick: (t) => Re(e.quarter)
+			}, _(e.label), 11, xe))), 128))])) : c("", !0),
+			t.showNow && (E.value === "date" || E.value === "week") ? (m(), l("div", Se, [u("button", {
+				class: "b-date-picker__today-btn",
+				type: "button",
+				onClick: ze
+			}, _(je.value), 1)])) : c("", !0)
+		])])], 40, re)], 2));
 	}
 });
 //#endregion
-export { M as default };
+export { b as default };
 
 //# sourceMappingURL=design-system73.js.map