castlecraftstudios-ui 1.0.0

package/dist/index.js

@@ -0,0 +1,898 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { createContext as n, useContext as r, useEffect as i, useId as a, useRef as o, useState as s } from "react";
+import { createPortal as c } from "react-dom";
+//#region src/components/Button/Button.tsx
+function l({ variant: t = "primary", size: n = "md", className: r, children: i, ...a }) {
+	return /* @__PURE__ */ e("button", {
+		className: [
+			"button",
+			`button--${t}`,
+			`button--${n}`,
+			r
+		].filter(Boolean).join(" "),
+		...a,
+		children: i
+	});
+}
+//#endregion
+//#region src/components/Card/Card.tsx
+function u({ variant: n = "default", header: r, footer: i, className: a, children: o, ...s }) {
+	return /* @__PURE__ */ t("div", {
+		className: [
+			"card",
+			`card--${n}`,
+			a
+		].filter(Boolean).join(" "),
+		...s,
+		children: [
+			r && /* @__PURE__ */ e("div", {
+				className: "card__header",
+				children: r
+			}),
+			o && /* @__PURE__ */ e("div", {
+				className: "card__body",
+				children: o
+			}),
+			i && /* @__PURE__ */ e("div", {
+				className: "card__footer",
+				children: i
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/Input/Input.tsx
+function d({ label: n, helperText: r, error: i, size: o = "md", className: s, id: c, ...l }) {
+	let u = a(), d = c ?? u;
+	return /* @__PURE__ */ t("div", {
+		className: [
+			"input-field",
+			`input-field--${o}`,
+			i && "input-field--error",
+			s
+		].filter(Boolean).join(" "),
+		children: [
+			n && /* @__PURE__ */ e("label", {
+				htmlFor: d,
+				children: n
+			}),
+			/* @__PURE__ */ e("input", {
+				id: d,
+				...l
+			}),
+			(i || r) && /* @__PURE__ */ e("span", {
+				className: "input-field__hint",
+				children: i ?? r
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/Textarea/Textarea.tsx
+function f({ label: n, helperText: r, error: i, className: o, id: s, rows: c = 4, ...l }) {
+	let u = a(), d = s ?? u;
+	return /* @__PURE__ */ t("div", {
+		className: [
+			"textarea-field",
+			i && "textarea-field--error",
+			o
+		].filter(Boolean).join(" "),
+		children: [
+			n && /* @__PURE__ */ e("label", {
+				htmlFor: d,
+				children: n
+			}),
+			/* @__PURE__ */ e("textarea", {
+				id: d,
+				rows: c,
+				...l
+			}),
+			(i || r) && /* @__PURE__ */ e("span", {
+				className: "textarea-field__hint",
+				children: i ?? r
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/Select/Select.tsx
+function p({ label: n, helperText: r, error: i, size: o = "md", className: s, id: c, children: l, ...u }) {
+	let d = a(), f = c ?? d;
+	return /* @__PURE__ */ t("div", {
+		className: [
+			"select-field",
+			`select-field--${o}`,
+			i && "select-field--error",
+			s
+		].filter(Boolean).join(" "),
+		children: [
+			n && /* @__PURE__ */ e("label", {
+				htmlFor: f,
+				children: n
+			}),
+			/* @__PURE__ */ e("div", {
+				className: "select-field__wrapper",
+				children: /* @__PURE__ */ e("select", {
+					id: f,
+					...u,
+					children: l
+				})
+			}),
+			(i || r) && /* @__PURE__ */ e("span", {
+				className: "select-field__hint",
+				children: i ?? r
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/Toggle/Toggle.tsx
+function m({ label: n, size: r = "md", className: i, ...a }) {
+	return /* @__PURE__ */ t("label", {
+		className: [
+			"toggle",
+			`toggle--${r}`,
+			i
+		].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ e("input", {
+				type: "checkbox",
+				role: "switch",
+				...a
+			}),
+			/* @__PURE__ */ e("span", {
+				className: "toggle__track",
+				children: /* @__PURE__ */ e("span", { className: "toggle__thumb" })
+			}),
+			n && /* @__PURE__ */ e("span", {
+				className: "toggle__label",
+				children: n
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/Checkbox/Checkbox.tsx
+function h({ label: n, className: r, ...i }) {
+	return /* @__PURE__ */ t("label", {
+		className: ["checkbox", r].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ e("input", {
+				type: "checkbox",
+				...i
+			}),
+			/* @__PURE__ */ e("span", { className: "checkbox__box" }),
+			n && /* @__PURE__ */ e("span", {
+				className: "checkbox__label",
+				children: n
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/Radio/Radio.tsx
+function g({ label: n, className: r, ...i }) {
+	return /* @__PURE__ */ t("label", {
+		className: ["radio", r].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ e("input", {
+				type: "radio",
+				...i
+			}),
+			/* @__PURE__ */ e("span", { className: "radio__dot" }),
+			n && /* @__PURE__ */ e("span", {
+				className: "radio__label",
+				children: n
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/Modal/Modal.tsx
+function _({ open: n, onClose: r, title: a, footer: o, size: s = "md", children: l }) {
+	return i(() => {
+		if (!n) return;
+		let e = window.innerWidth - document.documentElement.clientWidth;
+		document.body.style.overflow = "hidden", document.body.style.paddingRight = `${e}px`;
+		let t = (e) => {
+			e.key === "Escape" && r();
+		};
+		return document.addEventListener("keydown", t), () => {
+			document.body.style.overflow = "", document.body.style.paddingRight = "", document.removeEventListener("keydown", t);
+		};
+	}, [n, r]), n ? c(/* @__PURE__ */ e("div", {
+		className: "modal-backdrop",
+		onClick: r,
+		children: /* @__PURE__ */ t("div", {
+			className: ["modal", `modal--${s}`].join(" "),
+			role: "dialog",
+			"aria-modal": "true",
+			onClick: (e) => e.stopPropagation(),
+			children: [
+				a && /* @__PURE__ */ t("div", {
+					className: "modal__header",
+					children: [/* @__PURE__ */ e("h2", { children: a }), /* @__PURE__ */ e("button", {
+						className: "modal__close",
+						onClick: r,
+						"aria-label": "Close",
+						children: /* @__PURE__ */ e("svg", {
+							width: "14",
+							height: "14",
+							viewBox: "0 0 14 14",
+							fill: "none",
+							children: /* @__PURE__ */ e("path", {
+								d: "M1 1l12 12M13 1L1 13",
+								stroke: "currentColor",
+								strokeWidth: "2",
+								strokeLinecap: "round"
+							})
+						})
+					})]
+				}),
+				/* @__PURE__ */ e("div", {
+					className: "modal__body",
+					children: l
+				}),
+				o && /* @__PURE__ */ e("div", {
+					className: "modal__footer",
+					children: o
+				})
+			]
+		})
+	}), document.body) : null;
+}
+//#endregion
+//#region src/components/Tooltip/Tooltip.tsx
+function v({ content: n, position: r = "top", children: i }) {
+	let [a, o] = s(!1);
+	return /* @__PURE__ */ t("span", {
+		className: "tooltip-wrapper",
+		onMouseEnter: () => o(!0),
+		onMouseLeave: () => o(!1),
+		onFocus: () => o(!0),
+		onBlur: () => o(!1),
+		children: [i, /* @__PURE__ */ e("span", {
+			className: [
+				"tooltip",
+				`tooltip--${r}`,
+				a && "tooltip--visible"
+			].filter(Boolean).join(" "),
+			role: "tooltip",
+			children: n
+		})]
+	});
+}
+//#endregion
+//#region src/components/Badge/Badge.tsx
+function y({ variant: n = "default", dot: r = !1, className: i, children: a, ...o }) {
+	return /* @__PURE__ */ t("span", {
+		className: [
+			"badge",
+			`badge--${n}`,
+			i
+		].filter(Boolean).join(" "),
+		...o,
+		children: [r && /* @__PURE__ */ e("span", { className: "badge__dot" }), a]
+	});
+}
+//#endregion
+//#region src/components/Alert/Alert.tsx
+var b = {
+	success: /* @__PURE__ */ t("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		children: [/* @__PURE__ */ e("circle", {
+			cx: "8",
+			cy: "8",
+			r: "7",
+			stroke: "currentColor",
+			strokeWidth: "1.5"
+		}), /* @__PURE__ */ e("path", {
+			d: "M5 8l2 2 4-4",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})]
+	}),
+	warning: /* @__PURE__ */ t("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		children: [
+			/* @__PURE__ */ e("path", {
+				d: "M8 2.5L14 13.5H2L8 2.5z",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ e("path", {
+				d: "M8 6.5v3",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ e("circle", {
+				cx: "8",
+				cy: "11.5",
+				r: "0.75",
+				fill: "currentColor"
+			})
+		]
+	}),
+	error: /* @__PURE__ */ t("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		children: [/* @__PURE__ */ e("circle", {
+			cx: "8",
+			cy: "8",
+			r: "7",
+			stroke: "currentColor",
+			strokeWidth: "1.5"
+		}), /* @__PURE__ */ e("path", {
+			d: "M5.5 5.5l5 5M10.5 5.5l-5 5",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round"
+		})]
+	}),
+	info: /* @__PURE__ */ t("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		children: [
+			/* @__PURE__ */ e("circle", {
+				cx: "8",
+				cy: "8",
+				r: "7",
+				stroke: "currentColor",
+				strokeWidth: "1.5"
+			}),
+			/* @__PURE__ */ e("path", {
+				d: "M8 7.5V11",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ e("circle", {
+				cx: "8",
+				cy: "5",
+				r: "0.75",
+				fill: "currentColor"
+			})
+		]
+	})
+};
+function x({ variant: n = "info", title: r, onDismiss: i, children: a, className: o }) {
+	return /* @__PURE__ */ t("div", {
+		className: [
+			"alert",
+			`alert--${n}`,
+			o
+		].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ e("span", {
+				className: "alert__icon",
+				children: b[n]
+			}),
+			/* @__PURE__ */ t("div", {
+				className: "alert__content",
+				children: [r && /* @__PURE__ */ e("div", {
+					className: "alert__title",
+					children: r
+				}), /* @__PURE__ */ e("div", {
+					className: "alert__body",
+					children: a
+				})]
+			}),
+			i && /* @__PURE__ */ e("button", {
+				className: "alert__dismiss",
+				onClick: i,
+				"aria-label": "Dismiss",
+				children: /* @__PURE__ */ e("svg", {
+					width: "12",
+					height: "12",
+					viewBox: "0 0 12 12",
+					fill: "none",
+					children: /* @__PURE__ */ e("path", {
+						d: "M1 1l10 10M11 1L1 11",
+						stroke: "currentColor",
+						strokeWidth: "1.5",
+						strokeLinecap: "round"
+					})
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/Toast/Toast.tsx
+var S = {
+	success: /* @__PURE__ */ t("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		children: [/* @__PURE__ */ e("circle", {
+			cx: "8",
+			cy: "8",
+			r: "7",
+			stroke: "currentColor",
+			strokeWidth: "1.5"
+		}), /* @__PURE__ */ e("path", {
+			d: "M5 8l2 2 4-4",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})]
+	}),
+	warning: /* @__PURE__ */ t("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		children: [
+			/* @__PURE__ */ e("path", {
+				d: "M8 2.5L14 13.5H2L8 2.5z",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ e("path", {
+				d: "M8 6.5v3",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ e("circle", {
+				cx: "8",
+				cy: "11.5",
+				r: "0.75",
+				fill: "currentColor"
+			})
+		]
+	}),
+	error: /* @__PURE__ */ t("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		children: [/* @__PURE__ */ e("circle", {
+			cx: "8",
+			cy: "8",
+			r: "7",
+			stroke: "currentColor",
+			strokeWidth: "1.5"
+		}), /* @__PURE__ */ e("path", {
+			d: "M5.5 5.5l5 5M10.5 5.5l-5 5",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round"
+		})]
+	}),
+	info: /* @__PURE__ */ t("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		children: [
+			/* @__PURE__ */ e("circle", {
+				cx: "8",
+				cy: "8",
+				r: "7",
+				stroke: "currentColor",
+				strokeWidth: "1.5"
+			}),
+			/* @__PURE__ */ e("path", {
+				d: "M8 7.5V11",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ e("circle", {
+				cx: "8",
+				cy: "5",
+				r: "0.75",
+				fill: "currentColor"
+			})
+		]
+	})
+};
+function C({ open: n, variant: r = "info", title: a, onDismiss: o, children: l }) {
+	let [u, d] = s(!1), [f, p] = s(!1);
+	return i(() => {
+		if (n) {
+			d(!0);
+			let e = requestAnimationFrame(() => requestAnimationFrame(() => p(!0)));
+			return () => cancelAnimationFrame(e);
+		} else {
+			p(!1);
+			let e = setTimeout(() => d(!1), 250);
+			return () => clearTimeout(e);
+		}
+	}, [n]), u ? c(/* @__PURE__ */ t("div", {
+		className: [
+			"toast",
+			`toast--${r}`,
+			f && "toast--visible"
+		].filter(Boolean).join(" "),
+		role: "status",
+		children: [
+			/* @__PURE__ */ e("span", {
+				className: "toast__icon",
+				children: S[r]
+			}),
+			/* @__PURE__ */ t("div", {
+				className: "toast__content",
+				children: [a && /* @__PURE__ */ e("div", {
+					className: "toast__title",
+					children: a
+				}), /* @__PURE__ */ e("div", {
+					className: "toast__body",
+					children: l
+				})]
+			}),
+			o && /* @__PURE__ */ e("button", {
+				className: "toast__dismiss",
+				onClick: o,
+				"aria-label": "Dismiss",
+				children: /* @__PURE__ */ e("svg", {
+					width: "12",
+					height: "12",
+					viewBox: "0 0 12 12",
+					fill: "none",
+					children: /* @__PURE__ */ e("path", {
+						d: "M1 1l10 10M11 1L1 11",
+						stroke: "currentColor",
+						strokeWidth: "1.5",
+						strokeLinecap: "round"
+					})
+				})
+			})
+		]
+	}), document.body) : null;
+}
+//#endregion
+//#region src/components/Spinner/Spinner.tsx
+function w({ size: t = "md", className: n }) {
+	return /* @__PURE__ */ e("svg", {
+		className: [
+			"spinner",
+			`spinner--${t}`,
+			n
+		].filter(Boolean).join(" "),
+		viewBox: "0 0 24 24",
+		fill: "none",
+		"aria-label": "Loading",
+		children: /* @__PURE__ */ e("circle", {
+			cx: "12",
+			cy: "12",
+			r: "10",
+			stroke: "currentColor",
+			strokeWidth: "2.5",
+			strokeLinecap: "round",
+			strokeDasharray: "47 16"
+		})
+	});
+}
+//#endregion
+//#region src/components/Tabs/Tabs.tsx
+var T = n(null);
+function E() {
+	let e = r(T);
+	if (!e) throw Error("Tab components must be used inside <Tabs>");
+	return e;
+}
+function D({ defaultValue: t, value: n, onChange: r, children: i, className: o }) {
+	let [c, l] = s(t), u = a(), d = n ?? c;
+	function f(e) {
+		n || l(e), r?.(e);
+	}
+	return /* @__PURE__ */ e(T.Provider, {
+		value: {
+			activeValue: d,
+			setActiveValue: f,
+			baseId: u
+		},
+		children: /* @__PURE__ */ e("div", {
+			className: ["tabs", o].filter(Boolean).join(" "),
+			children: i
+		})
+	});
+}
+function O({ children: t, className: n }) {
+	let r = o(null);
+	function i(e) {
+		let t = r.current?.querySelectorAll("[role=\"tab\"]:not([disabled])");
+		if (!t) return;
+		let n = Array.from(t), i = document.activeElement, a = n.indexOf(i);
+		a !== -1 && (e.key === "ArrowRight" ? (e.preventDefault(), n[(a + 1) % n.length].focus()) : e.key === "ArrowLeft" ? (e.preventDefault(), n[(a - 1 + n.length) % n.length].focus()) : e.key === "Home" ? (e.preventDefault(), n[0].focus()) : e.key === "End" && (e.preventDefault(), n[n.length - 1].focus()));
+	}
+	return /* @__PURE__ */ e("div", {
+		ref: r,
+		role: "tablist",
+		className: ["tabs__list", n].filter(Boolean).join(" "),
+		onKeyDown: i,
+		children: t
+	});
+}
+function k({ value: t, disabled: n, children: r, className: i }) {
+	let { activeValue: a, setActiveValue: o, baseId: s } = E(), c = a === t;
+	return /* @__PURE__ */ e("button", {
+		role: "tab",
+		"aria-selected": c,
+		"aria-controls": `${s}-panel-${t}`,
+		id: `${s}-tab-${t}`,
+		tabIndex: c ? 0 : -1,
+		disabled: n,
+		className: [
+			"tabs__tab",
+			c && "tabs__tab--active",
+			i
+		].filter(Boolean).join(" "),
+		onClick: () => !n && o(t),
+		children: r
+	});
+}
+function A({ value: t, children: n, className: r }) {
+	let { activeValue: i, baseId: a } = E();
+	return i === t ? /* @__PURE__ */ e("div", {
+		role: "tabpanel",
+		id: `${a}-panel-${t}`,
+		"aria-labelledby": `${a}-tab-${t}`,
+		className: ["tabs__panel", r].filter(Boolean).join(" "),
+		children: n
+	}) : null;
+}
+//#endregion
+//#region src/components/DatePicker/DatePicker.tsx
+var j = [
+	"Su",
+	"Mo",
+	"Tu",
+	"We",
+	"Th",
+	"Fr",
+	"Sa"
+], M = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December"
+];
+function N(e, t) {
+	return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
+}
+function P(e) {
+	return new Date(e.getFullYear(), e.getMonth(), e.getDate());
+}
+function F(e) {
+	return e ? e.toLocaleDateString("en-GB", {
+		day: "2-digit",
+		month: "short",
+		year: "numeric"
+	}) : "";
+}
+function I(e, t) {
+	return new Date(e, t + 1, 0).getDate();
+}
+function L(e, t) {
+	return new Date(e, t, 1).getDay();
+}
+function R({ label: n, value: r, onChange: c, min: l, max: u, placeholder: d = "Select date", disabled: f, className: p }) {
+	let m = a(), [h, g] = s(!1), [_, v] = s(() => {
+		let e = r ?? /* @__PURE__ */ new Date();
+		return {
+			year: e.getFullYear(),
+			month: e.getMonth()
+		};
+	}), y = o(null);
+	i(() => {
+		if (!h) return;
+		function e(e) {
+			y.current?.contains(e.target) || g(!1);
+		}
+		return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
+	}, [h]), i(() => {
+		if (!h) return;
+		function e(e) {
+			e.key === "Escape" && g(!1);
+		}
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [h]);
+	function b() {
+		v((e) => {
+			let t = e.month === 0 ? 11 : e.month - 1;
+			return {
+				year: e.month === 0 ? e.year - 1 : e.year,
+				month: t
+			};
+		});
+	}
+	function x() {
+		v((e) => {
+			let t = e.month === 11 ? 0 : e.month + 1;
+			return {
+				year: e.month === 11 ? e.year + 1 : e.year,
+				month: t
+			};
+		});
+	}
+	function S(e) {
+		let t = new Date(_.year, _.month, e);
+		c?.(t), g(!1);
+	}
+	function C(e) {
+		let t = P(new Date(_.year, _.month, e));
+		return !!(l && t < P(l) || u && t > P(u));
+	}
+	let w = I(_.year, _.month), T = L(_.year, _.month), E = [...Array(T).fill(null), ...Array.from({ length: w }, (e, t) => t + 1)];
+	for (; E.length % 7 != 0;) E.push(null);
+	return /* @__PURE__ */ t("div", {
+		ref: y,
+		className: [
+			"date-picker",
+			f && "date-picker--disabled",
+			p
+		].filter(Boolean).join(" "),
+		children: [
+			n && /* @__PURE__ */ e("label", {
+				className: "date-picker__label",
+				htmlFor: m,
+				children: n
+			}),
+			/* @__PURE__ */ t("button", {
+				id: m,
+				type: "button",
+				className: ["date-picker__trigger", h && "date-picker__trigger--open"].filter(Boolean).join(" "),
+				disabled: f,
+				"aria-haspopup": "dialog",
+				"aria-expanded": h,
+				onClick: () => g((e) => !e),
+				children: [/* @__PURE__ */ e("span", {
+					className: r ? "" : "date-picker__placeholder",
+					children: r ? F(r) : d
+				}), /* @__PURE__ */ t("svg", {
+					className: "date-picker__icon",
+					width: "16",
+					height: "16",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					"aria-hidden": "true",
+					children: [
+						/* @__PURE__ */ e("rect", {
+							x: "3",
+							y: "4",
+							width: "18",
+							height: "18",
+							rx: "2",
+							ry: "2"
+						}),
+						/* @__PURE__ */ e("line", {
+							x1: "16",
+							y1: "2",
+							x2: "16",
+							y2: "6"
+						}),
+						/* @__PURE__ */ e("line", {
+							x1: "8",
+							y1: "2",
+							x2: "8",
+							y2: "6"
+						}),
+						/* @__PURE__ */ e("line", {
+							x1: "3",
+							y1: "10",
+							x2: "21",
+							y2: "10"
+						})
+					]
+				})]
+			}),
+			h && /* @__PURE__ */ t("div", {
+				className: "date-picker__popover",
+				role: "dialog",
+				"aria-label": "Date picker",
+				children: [/* @__PURE__ */ t("div", {
+					className: "date-picker__header",
+					children: [
+						/* @__PURE__ */ e("button", {
+							type: "button",
+							className: "date-picker__nav",
+							onClick: b,
+							"aria-label": "Previous month",
+							children: /* @__PURE__ */ e("svg", {
+								width: "16",
+								height: "16",
+								viewBox: "0 0 24 24",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "2",
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ e("polyline", { points: "15 18 9 12 15 6" })
+							})
+						}),
+						/* @__PURE__ */ t("span", {
+							className: "date-picker__month-label",
+							children: [
+								M[_.month],
+								" ",
+								_.year
+							]
+						}),
+						/* @__PURE__ */ e("button", {
+							type: "button",
+							className: "date-picker__nav",
+							onClick: x,
+							"aria-label": "Next month",
+							children: /* @__PURE__ */ e("svg", {
+								width: "16",
+								height: "16",
+								viewBox: "0 0 24 24",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "2",
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ e("polyline", { points: "9 18 15 12 9 6" })
+							})
+						})
+					]
+				}), /* @__PURE__ */ t("div", {
+					className: "date-picker__grid",
+					children: [j.map((t) => /* @__PURE__ */ e("span", {
+						className: "date-picker__day-name",
+						children: t
+					}, t)), E.map((t, n) => {
+						if (!t) return /* @__PURE__ */ e("span", {}, `empty-${n}`);
+						let i = new Date(_.year, _.month, t), a = r ? N(i, r) : !1, o = N(i, /* @__PURE__ */ new Date()), s = C(t);
+						return /* @__PURE__ */ e("button", {
+							type: "button",
+							disabled: s,
+							"aria-pressed": a,
+							"aria-label": i.toLocaleDateString("en-GB", {
+								day: "numeric",
+								month: "long",
+								year: "numeric"
+							}),
+							className: [
+								"date-picker__day",
+								a && "date-picker__day--selected",
+								o && !a && "date-picker__day--today",
+								s && "date-picker__day--disabled"
+							].filter(Boolean).join(" "),
+							onClick: () => !s && S(t),
+							children: t
+						}, t);
+					})]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { x as Alert, y as Badge, l as Button, u as Card, h as Checkbox, R as DatePicker, d as Input, _ as Modal, g as Radio, p as Select, w as Spinner, k as Tab, O as TabList, A as TabPanel, D as Tabs, f as Textarea, C as Toast, m as Toggle, v as Tooltip };
+
+//# sourceMappingURL=index.js.map