@plastic-js/tsumiki 0.1.22 → 0.1.24

package/dist/components/DateInput.js

@@ -1,7 +1,439 @@
-import { DateInput } from "@plastic-js/ark";
+import Icon from "./Icon.js";
+import { expandCircular, makeWheel } from "./DateWheel.js";
+import { Fragment, insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
+import { createEffect, createSignal, splitProps } from "@plastic-js/plastic";
 //#region src/components/DateInput.jsx
-var DateInput_default = DateInput;
+var _tmpl4 = template("<div></div>");
+var _tmpl3 = template("<div><div role=\"presentation\" aria-hidden=\"true\"></div><div role=\"dialog\" aria-label=\"Date picker\"><div><button type=\"button\">Cancel</button><span>Select Date</span><button type=\"button\">Done</button></div><div><div><div><span>Year</span><div><div></div><div></div></div></div><div><span>Month</span><div><div></div><div></div></div></div><div><span>Day</span><div><div></div><div></div></div></div></div></div></div></div>");
+var _tmpl2 = template("<span></span>");
+var _tmpl = template("<button type=\"button\"><!><span></span></button>");
+var MONTH_NAMES_SHORT = [
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep",
+	"Oct",
+	"Nov",
+	"Dec"
+];
+var daysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
+var YEARS = Array.from({ length: 200 }, (_, i) => 1900 + i);
+var MONTHS = Array.from({ length: 12 }, (_, i) => i);
+var getDays = (year, month) => {
+	const count = daysInMonth(year, month);
+	return Array.from({ length: count }, (_, i) => i + 1);
+};
+var toDate = (year, month, day) => new Date(year, month, day);
+var formatDateLabel = (date) => {
+	if (!date) return "";
+	return `${MONTH_NAMES_SHORT[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
+};
+var parseDate = (v) => {
+	if (!v) return null;
+	if (v instanceof Date) return isNaN(v.getTime()) ? null : v;
+	if (typeof v === "string") {
+		const d = /* @__PURE__ */ new Date(v + "T00:00:00");
+		return isNaN(d.getTime()) ? null : d;
+	}
+	return null;
+};
+var calendarSvg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/></svg>";
+var triggerWrapperClass = css({
+	position: "relative",
+	width: "100%",
+	background: "none",
+	border: "none",
+	padding: 0,
+	font: "inherit",
+	cursor: "pointer",
+	color: "inherit",
+	outline: "none",
+	borderRadius: "10px",
+	WebkitTapHighlightColor: "transparent",
+	"&:focus-visible": { boxShadow: "0 0 0 2px var(--tsu-accent-9)" },
+	"&:disabled, &[aria-disabled=\"true\"]": {
+		opacity: .4,
+		cursor: "not-allowed",
+		boxShadow: "none"
+	}
+});
+var triggerDisabledClass = css({
+	opacity: .4,
+	cursor: "not-allowed"
+});
+var triggerClass = css({
+	width: "100%",
+	height: "var(--tsu-comp-height-md)",
+	padding: "0 36px 0 var(--tsu-comp-padding-x-md)",
+	background: "var(--tsu-bg)",
+	border: "1px solid var(--tsu-accent-8)",
+	borderRadius: "var(--tsu-radius-l1-md)",
+	color: "var(--tsu-fg)",
+	fontSize: "var(--tsu-comp-font-size-md)",
+	fontFamily: "inherit",
+	outline: "none",
+	boxSizing: "border-box",
+	display: "flex",
+	alignItems: "center",
+	cursor: "pointer",
+	transition: "border-color var(--tsu-transition-fast), background-color var(--tsu-transition-fast)",
+	"&:hover:not(:disabled)": { borderColor: "var(--tsu-focus-border)" }
+});
+var triggerPlaceholderClass = css({ color: "var(--tsu-neutral-11)" });
+var triggerValueClass = css({ color: "var(--tsu-fg)" });
+var calendarIconClass = css({
+	position: "absolute",
+	right: "10px",
+	top: "50%",
+	transform: "translateY(-50%)",
+	width: "18px",
+	height: "18px",
+	color: "var(--tsu-neutral-11)",
+	pointerEvents: "none"
+});
+var overlayClass = css({
+	position: "fixed",
+	inset: 0,
+	zIndex: 1e3,
+	display: "flex",
+	flexDirection: "column",
+	justifyContent: "flex-end",
+	pointerEvents: "none"
+});
+var backdropClass = css({
+	position: "absolute",
+	inset: 0,
+	background: "rgba(0,0,0,0.5)",
+	opacity: 0,
+	transition: "opacity 240ms ease"
+});
+var sheetClass = css({
+	position: "relative",
+	width: "100%",
+	display: "flex",
+	flexDirection: "column",
+	background: "var(--tsu-bg)",
+	borderTop: "1px solid var(--tsu-neutral-7)",
+	borderRadius: "18px 18px 0 0",
+	boxShadow: "0 -8px 32px rgba(0,0,0,0.4)",
+	paddingBottom: "env(safe-area-inset-bottom, 0px)",
+	transform: "translateY(100%)",
+	transition: "transform 280ms cubic-bezier(0.32, 0.72, 0, 1)"
+});
+var openClass = css({
+	pointerEvents: "auto",
+	[`& .${backdropClass}`]: { opacity: 1 },
+	[`& .${sheetClass}`]: { transform: "translateY(0)" }
+});
+var toolbarClass = css({
+	display: "flex",
+	justifyContent: "space-between",
+	alignItems: "center",
+	padding: "12px 16px",
+	borderBottom: "1px solid var(--tsu-neutral-7)",
+	flexShrink: 0
+});
+var toolbarBtnClass = css({
+	background: "none",
+	border: "none",
+	padding: "6px 0",
+	color: "var(--tsu-accent-9)",
+	fontSize: "16px",
+	fontFamily: "inherit",
+	cursor: "pointer",
+	WebkitTapHighlightColor: "transparent"
+});
+var toolbarTitleClass = css({
+	fontSize: "15px",
+	fontWeight: 600,
+	color: "var(--tsu-fg)"
+});
+var wheelAreaClass = css({
+	display: "flex",
+	justifyContent: "center",
+	alignItems: "stretch",
+	padding: "12px 0 20px",
+	position: "relative"
+});
+var columnWrapperClass = css({
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center",
+	overflow: "hidden",
+	position: "relative"
+});
+var columnLabelClass = css({
+	fontSize: "11px",
+	color: "var(--tsu-neutral-11)",
+	textTransform: "uppercase",
+	letterSpacing: "0.5px",
+	marginBottom: "6px",
+	fontWeight: 500
+});
+var columnViewportClass = css({
+	width: "100%",
+	height: `180px`,
+	overflow: "hidden",
+	position: "relative",
+	touchAction: "none",
+	"&::before, &::after": {
+		content: "\"\"",
+		position: "absolute",
+		left: 0,
+		right: 0,
+		height: `72px`,
+		pointerEvents: "none",
+		zIndex: 2
+	},
+	"&::before": {
+		top: 0,
+		background: "linear-gradient(to bottom, var(--tsu-bg) 0%, transparent 100%)"
+	},
+	"&::after": {
+		bottom: 0,
+		background: "linear-gradient(to top, var(--tsu-bg) 0%, transparent 100%)"
+	}
+});
+var columnListClass = css({ willChange: "transform" });
+var highlightBarClass = css({
+	position: "absolute",
+	top: `72px`,
+	left: "10%",
+	right: "10%",
+	height: `36px`,
+	borderRadius: "8px",
+	background: "rgba(255,255,255,0.06)",
+	pointerEvents: "none",
+	zIndex: 1
+});
+var itemBaseClass = css({
+	height: `36px`,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	fontSize: "20px",
+	color: "var(--tsu-neutral-11)",
+	userSelect: "none",
+	whiteSpace: "nowrap",
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	padding: "0 4px",
+	boxSizing: "border-box"
+});
+var selectedItemClass = css({
+	color: "var(--tsu-fg)",
+	fontWeight: 600,
+	fontSize: "22px"
+});
+var mountWheel = (el, wheel) => {
+	if (el._wheel && el._wheel !== wheel) el._wheel.destroy();
+	el._wheel = wheel;
+	wheel.mount(el);
+};
+var DateInput = (props = {}) => {
+	const [local] = splitProps(props, [
+		"value",
+		"onValueChange",
+		"placeholder",
+		"disabled",
+		"className"
+	]);
+	const open = createSignal(false);
+	const resolveValue = () => {
+		return parseDate(typeof local.value === "function" ? local.value() : local.value);
+	};
+	const isDisabled = () => {
+		return !!(typeof local.disabled === "function" ? local.disabled() : local.disabled);
+	};
+	const tempYear = createSignal(2e3);
+	const tempMonth = createSignal(0);
+	const tempDay = createSignal(1);
+	const selectedValue = createSignal(null);
+	createEffect(() => {
+		if (!open()) return;
+		const onKey = (e) => {
+			if (e.key === "Escape") cancel();
+		};
+		document.addEventListener("keydown", onKey);
+		return () => {
+			document.removeEventListener("keydown", onKey);
+		};
+	});
+	const closeSheet = () => {
+		document.body.style.overflow = "";
+		open(false);
+	};
+	const openSheet = () => {
+		if (isDisabled()) return;
+		const d = resolveValue() || selectedValue() || /* @__PURE__ */ new Date();
+		tempYear(d.getFullYear());
+		tempMonth(d.getMonth());
+		tempDay(Math.min(d.getDate(), daysInMonth(d.getFullYear(), d.getMonth())));
+		document.body.style.overflow = "hidden";
+		open(true);
+	};
+	const confirm = () => {
+		const date = toDate(tempYear(), tempMonth(), tempDay());
+		selectedValue(date);
+		local.onValueChange?.(date);
+		closeSheet();
+	};
+	const cancel = () => {
+		closeSheet();
+	};
+	const dayItems = () => getDays(tempYear(), tempMonth());
+	return jsx(Fragment, { children: [() => {
+		const _el0 = _tmpl.cloneNode(true);
+		const _el1 = _el0.firstChild;
+		const _el2 = _el0.firstChild.nextSibling;
+		insert(_el0, () => {
+			const displayDate = resolveValue() || selectedValue();
+			return () => {
+				const _el0 = _tmpl2.cloneNode(true);
+				insert(_el0, () => displayDate ? formatDateLabel(displayDate) : local.placeholder || "Select date");
+				setProp(_el0, "className", () => `${triggerClass} ${displayDate ? triggerValueClass : triggerPlaceholderClass}`);
+				return _el0;
+			};
+		}, _el1);
+		insert(_el2, () => jsx(Icon, mergeProps({
+			svg: calendarSvg,
+			size: 18,
+			strokeWidth: 1.5
+		})));
+		setProp(_el2, "className", () => calendarIconClass);
+		setProp(_el0, "className", () => `${triggerWrapperClass} ${isDisabled() ? triggerDisabledClass : ""} ${local.className || ""}`);
+		setProp(_el0, "onClick", () => openSheet);
+		setProp(_el0, "aria-disabled", () => isDisabled());
+		return _el0;
+	}, () => {
+		if (!open()) return null;
+		const y = tempYear();
+		const m = tempMonth();
+		const days = dayItems();
+		const selDay = tempDay();
+		const yearWheel = makeWheel(YEARS, YEARS.indexOf(y), false);
+		const [monthItems, monthStartIdx] = expandCircular(MONTHS, m);
+		const monthWheel = makeWheel(monthItems, monthStartIdx, true);
+		const [dayItemsArr, dayStartIdx] = expandCircular(days, selDay - 1);
+		const dayWheel = makeWheel(dayItemsArr, dayStartIdx, true);
+		return () => {
+			const _el0 = _tmpl3.cloneNode(true);
+			const _el1 = _el0.firstChild;
+			const _el2 = _el0.firstChild.nextSibling;
+			const _el3 = _el2.firstChild;
+			const _el4 = _el3.firstChild;
+			const _el5 = _el3.firstChild.nextSibling;
+			const _el6 = _el3.firstChild.nextSibling.nextSibling;
+			const _el7 = _el2.firstChild.nextSibling;
+			const _el8 = _el7.firstChild;
+			const _el9 = _el8.firstChild;
+			const _el10 = _el9.firstChild;
+			const _el11 = _el9.firstChild.nextSibling;
+			const _el12 = _el11.firstChild;
+			const _el13 = _el11.firstChild.nextSibling;
+			const _el14 = _el8.firstChild.nextSibling;
+			const _el15 = _el14.firstChild;
+			const _el16 = _el14.firstChild.nextSibling;
+			const _el17 = _el16.firstChild;
+			const _el18 = _el16.firstChild.nextSibling;
+			const _el19 = _el8.firstChild.nextSibling.nextSibling;
+			const _el20 = _el19.firstChild;
+			const _el21 = _el19.firstChild.nextSibling;
+			const _el22 = _el21.firstChild;
+			const _el23 = _el21.firstChild.nextSibling;
+			setProp(_el1, "className", () => backdropClass);
+			setProp(_el1, "onClick", () => cancel);
+			setProp(_el4, "className", () => toolbarBtnClass);
+			setProp(_el4, "onClick", () => cancel);
+			setProp(_el5, "className", () => toolbarTitleClass);
+			setProp(_el6, "className", () => toolbarBtnClass);
+			setProp(_el6, "onClick", () => confirm);
+			setProp(_el3, "className", () => toolbarClass);
+			setProp(_el10, "className", () => columnLabelClass);
+			setProp(_el12, "className", () => highlightBarClass);
+			insert(_el13, () => YEARS.map((item, i) => () => {
+				const _el0 = _tmpl4.cloneNode(true);
+				insert(_el0, () => String(item));
+				setProp(_el0, "className", () => `${itemBaseClass} ${i === YEARS.indexOf(y) ? selectedItemClass : ""}`);
+				setProp(_el0, "key", () => i);
+				return _el0;
+			}));
+			setProp(_el13, "ref", (el) => {
+				if (el) mountWheel(el, yearWheel);
+			});
+			setProp(_el13, "className", () => columnListClass);
+			setProp(_el13, "onPointerDown", (e) => yearWheel.handlePointerDown(e));
+			setProp(_el13, "onPointerMove", (e) => yearWheel.handlePointerMove(e, e.currentTarget));
+			setProp(_el13, "onPointerUp", (e) => yearWheel.handlePointerUp(e, e.currentTarget, (idx) => {
+				const newYear = YEARS[idx];
+				tempYear(newYear);
+				const maxDay = daysInMonth(newYear, tempMonth());
+				if (tempDay() > maxDay) tempDay(maxDay);
+			}));
+			setProp(_el13, "onPointerCancel", (e) => yearWheel.handlePointerCancel(e, e.currentTarget));
+			setProp(_el11, "className", () => columnViewportClass);
+			setProp(_el9, "className", () => columnWrapperClass);
+			setProp(_el9, "style", () => ({ flex: 5 }));
+			setProp(_el15, "className", () => columnLabelClass);
+			setProp(_el17, "className", () => highlightBarClass);
+			insert(_el18, () => monthItems.map((item, i) => () => {
+				const _el0 = _tmpl4.cloneNode(true);
+				insert(_el0, () => MONTH_NAMES_SHORT[item]);
+				setProp(_el0, "className", () => `${itemBaseClass} ${i === monthStartIdx ? selectedItemClass : ""}`);
+				setProp(_el0, "key", () => i);
+				return _el0;
+			}));
+			setProp(_el18, "ref", (el) => {
+				if (el) mountWheel(el, monthWheel);
+			});
+			setProp(_el18, "className", () => columnListClass);
+			setProp(_el18, "onPointerDown", (e) => monthWheel.handlePointerDown(e));
+			setProp(_el18, "onPointerMove", (e) => monthWheel.handlePointerMove(e, e.currentTarget));
+			setProp(_el18, "onPointerUp", (e) => monthWheel.handlePointerUp(e, e.currentTarget, (idx) => {
+				tempMonth(idx);
+				const maxDay = daysInMonth(tempYear(), idx);
+				if (tempDay() > maxDay) tempDay(maxDay);
+			}));
+			setProp(_el18, "onPointerCancel", (e) => monthWheel.handlePointerCancel(e, e.currentTarget));
+			setProp(_el16, "className", () => columnViewportClass);
+			setProp(_el14, "className", () => columnWrapperClass);
+			setProp(_el14, "style", () => ({ flex: 6 }));
+			setProp(_el20, "className", () => columnLabelClass);
+			setProp(_el22, "className", () => highlightBarClass);
+			insert(_el23, () => dayItemsArr.map((item, i) => () => {
+				const _el0 = _tmpl4.cloneNode(true);
+				insert(_el0, () => String(item));
+				setProp(_el0, "className", () => `${itemBaseClass} ${i === dayStartIdx ? selectedItemClass : ""}`);
+				setProp(_el0, "key", () => i);
+				return _el0;
+			}));
+			setProp(_el23, "ref", (el) => {
+				if (el) mountWheel(el, dayWheel);
+			});
+			setProp(_el23, "className", () => columnListClass);
+			setProp(_el23, "onPointerDown", (e) => dayWheel.handlePointerDown(e));
+			setProp(_el23, "onPointerMove", (e) => dayWheel.handlePointerMove(e, e.currentTarget));
+			setProp(_el23, "onPointerUp", (e) => dayWheel.handlePointerUp(e, e.currentTarget, (idx) => tempDay(idx + 1)));
+			setProp(_el23, "onPointerCancel", (e) => dayWheel.handlePointerCancel(e, e.currentTarget));
+			setProp(_el21, "className", () => columnViewportClass);
+			setProp(_el19, "className", () => columnWrapperClass);
+			setProp(_el19, "style", () => ({ flex: 6 }));
+			setProp(_el8, "style", () => ({
+				display: "flex",
+				width: "100%"
+			}));
+			setProp(_el7, "className", () => wheelAreaClass);
+			setProp(_el2, "className", () => sheetClass);
+			setProp(_el0, "className", () => `${overlayClass} ${openClass}`);
+			return _el0;
+		};
+	}] });
+};
 //#endregion
-export { DateInput_default as default };
-
-//# sourceMappingURL=DateInput.js.map
+export { DateInput as default };

package/dist/components/{DatePickerMobile/wheel.js → DateWheel.js}

@@ -1,4 +1,4 @@
-import { inertia } from "../../node_modules/popmotion/dist/es/animations/inertia.js";
+import { inertia } from "popmotion";
 function expandCircular(items, index) {
 	const len = items.length;
 	if (len === 0) return [items, index];
@@ -111,5 +111,3 @@ function makeWheel(displayItems, displayIndex, circular) {
 }
 //#endregion
 export { expandCircular, makeWheel };
-
-//# sourceMappingURL=wheel.js.map