@7pmlabs/design-system 1.0.10 → 1.0.11

package/dist/design-system70.js

@@ -0,0 +1,699 @@
+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-system69.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-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-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-date-picker__cell b-date-picker__week-number"
+}, he = [
+	"aria-label",
+	"aria-selected",
+	"aria-disabled",
+	"disabled",
+	"tabindex",
+	"onClick",
+	"onMouseenter"
+], ge = {
+	key: 1,
+	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
+		},
+		allowClear: {
+			type: Boolean,
+			default: !0
+		},
+		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 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;
+			}
+		}
+		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));
+			}
+			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}`;
+		});
+		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) {
+			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 { b as default };
+
+//# sourceMappingURL=design-system70.js.map