@questpie/admin 1.1.1 → 3.0.0

package/dist/client/components/primitives/checkbox-input.mjs

@@ -0,0 +1,59 @@
+"use client";
+
+import { cn } from "../../lib/utils.mjs";
+import { Checkbox } from "../ui/checkbox.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/primitives/checkbox-input.tsx
+/**
+* Checkbox Input Primitive
+*
+* A single checkbox with value/onChange pattern.
+*
+* @example
+* ```tsx
+* <CheckboxInput
+*   value={isAccepted}
+*   onChange={setIsAccepted}
+* />
+* ```
+*/
+function CheckboxInput(t0) {
+	const $ = c(11);
+	const { value, onChange, disabled, className, id, "aria-invalid": ariaInvalid } = t0;
+	let t1;
+	if ($[0] !== onChange) {
+		t1 = (checked) => onChange(checked === true);
+		$[0] = onChange;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== className) {
+		t2 = cn("qa-checkbox-input", className);
+		$[2] = className;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== ariaInvalid || $[5] !== disabled || $[6] !== id || $[7] !== t1 || $[8] !== t2 || $[9] !== value) {
+		t3 = /* @__PURE__ */ jsx(Checkbox, {
+			id,
+			checked: value,
+			onCheckedChange: t1,
+			disabled,
+			"aria-invalid": ariaInvalid,
+			className: t2
+		});
+		$[4] = ariaInvalid;
+		$[5] = disabled;
+		$[6] = id;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = value;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
+}
+
+//#endregion
+export { CheckboxInput };

package/dist/client/components/primitives/date-input.mjs

@@ -0,0 +1,461 @@
+"use client";
+
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { format } from "date-fns";
+import { DayPicker } from "react-day-picker";
+
+//#region src/client/components/primitives/date-input.tsx
+/**
+* Date Input Primitive
+*
+* A date picker with popover calendar.
+* Uses react-day-picker under the hood.
+*
+* @example
+* ```tsx
+* <DateInput
+*   value={selectedDate}
+*   onChange={setSelectedDate}
+*   placeholder="Select date"
+* />
+* ```
+*/
+function DateInput(t0) {
+	const $ = c(40);
+	const { value, onChange, minDate, maxDate, format: t1, placeholder: t2, disabled, className, id, "aria-invalid": ariaInvalid } = t0;
+	const dateFormat = t1 === void 0 ? "PP" : t1;
+	const placeholder = t2 === void 0 ? "Select date" : t2;
+	const resolveText = useResolveText();
+	const [open, setOpen] = useState(false);
+	let t3;
+	if ($[0] !== onChange) {
+		t3 = (date) => {
+			onChange(date ?? null);
+			setOpen(false);
+		};
+		$[0] = onChange;
+		$[1] = t3;
+	} else t3 = $[1];
+	const handleSelect = t3;
+	let t4;
+	if ($[2] !== onChange) {
+		t4 = (e) => {
+			e.stopPropagation();
+			onChange(null);
+		};
+		$[2] = onChange;
+		$[3] = t4;
+	} else t4 = $[3];
+	const handleClear = t4;
+	const t5 = !value && "text-muted-foreground";
+	let t6;
+	if ($[4] !== className || $[5] !== t5) {
+		t6 = cn("qa-date-input border-input bg-transparent font-mono flex h-9 w-full items-center justify-start gap-2 border px-3 py-2 text-sm", "hover:bg-accent hover:text-accent-foreground", "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none", "disabled:cursor-not-allowed disabled:opacity-50", t5, className);
+		$[4] = className;
+		$[5] = t5;
+		$[6] = t6;
+	} else t6 = $[6];
+	let t7;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(Icon, {
+			icon: "ph:calendar-blank",
+			className: "size-4"
+		});
+		$[7] = t7;
+	} else t7 = $[7];
+	let t8;
+	if ($[8] !== dateFormat || $[9] !== placeholder || $[10] !== resolveText || $[11] !== value) {
+		t8 = value ? format(value, dateFormat) : resolveText(placeholder);
+		$[8] = dateFormat;
+		$[9] = placeholder;
+		$[10] = resolveText;
+		$[11] = value;
+		$[12] = t8;
+	} else t8 = $[12];
+	let t9;
+	if ($[13] !== t8) {
+		t9 = /* @__PURE__ */ jsx("span", {
+			className: "flex-1 text-left",
+			children: t8
+		});
+		$[13] = t8;
+		$[14] = t9;
+	} else t9 = $[14];
+	let t10;
+	if ($[15] !== disabled || $[16] !== handleClear || $[17] !== value) {
+		t10 = value && !disabled && /* @__PURE__ */ jsx(Icon, {
+			icon: "ph:x",
+			className: "size-4 opacity-50 hover:opacity-100",
+			onClick: handleClear
+		});
+		$[15] = disabled;
+		$[16] = handleClear;
+		$[17] = value;
+		$[18] = t10;
+	} else t10 = $[18];
+	let t11;
+	if ($[19] !== ariaInvalid || $[20] !== disabled || $[21] !== id || $[22] !== t10 || $[23] !== t6 || $[24] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(PopoverTrigger, {
+			id,
+			disabled,
+			"aria-invalid": ariaInvalid,
+			className: t6,
+			children: [
+				t7,
+				t9,
+				t10
+			]
+		});
+		$[19] = ariaInvalid;
+		$[20] = disabled;
+		$[21] = id;
+		$[22] = t10;
+		$[23] = t6;
+		$[24] = t9;
+		$[25] = t11;
+	} else t11 = $[25];
+	const t12 = value ?? void 0;
+	let t13;
+	if ($[26] !== maxDate || $[27] !== minDate) {
+		t13 = (date_0) => {
+			if (minDate && date_0 < minDate) return true;
+			if (maxDate && date_0 > maxDate) return true;
+			return false;
+		};
+		$[26] = maxDate;
+		$[27] = minDate;
+		$[28] = t13;
+	} else t13 = $[28];
+	let t14;
+	let t15;
+	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = cn("flex size-8 items-center justify-center", "hover:bg-accent bg-transparent p-0 opacity-50 hover:opacity-100");
+		t15 = cn("flex size-8 items-center justify-center", "hover:bg-accent bg-transparent p-0 opacity-50 hover:opacity-100");
+		$[29] = t14;
+		$[30] = t15;
+	} else {
+		t14 = $[29];
+		t15 = $[30];
+	}
+	let t16;
+	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = {
+			months: "flex flex-col sm:flex-row gap-2",
+			month: "flex flex-col gap-4",
+			month_caption: "flex justify-center pt-1 relative items-center h-9",
+			caption_label: "text-sm font-medium",
+			nav: "absolute inset-x-0 top-0 flex items-center justify-between px-1",
+			button_previous: t14,
+			button_next: t15,
+			month_grid: "w-full border-collapse",
+			weekdays: "flex",
+			weekday: "text-muted-foreground w-9 font-normal text-[0.8rem] text-center",
+			week: "flex w-full mt-2",
+			day: "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent",
+			day_button: cn("size-9 p-0 font-normal", "hover:bg-accent hover:text-accent-foreground", "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2"),
+			selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+			today: "bg-accent text-accent-foreground",
+			outside: "text-muted-foreground opacity-50",
+			disabled: "text-muted-foreground opacity-50",
+			hidden: "invisible"
+		};
+		$[31] = t16;
+	} else t16 = $[31];
+	let t17;
+	if ($[32] !== handleSelect || $[33] !== t12 || $[34] !== t13) {
+		t17 = /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-auto p-0",
+			align: "start",
+			children: /* @__PURE__ */ jsx(DayPicker, {
+				mode: "single",
+				selected: t12,
+				onSelect: handleSelect,
+				disabled: t13,
+				className: "p-3",
+				classNames: t16
+			})
+		});
+		$[32] = handleSelect;
+		$[33] = t12;
+		$[34] = t13;
+		$[35] = t17;
+	} else t17 = $[35];
+	let t18;
+	if ($[36] !== open || $[37] !== t11 || $[38] !== t17) {
+		t18 = /* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: setOpen,
+			children: [t11, t17]
+		});
+		$[36] = open;
+		$[37] = t11;
+		$[38] = t17;
+		$[39] = t18;
+	} else t18 = $[39];
+	return t18;
+}
+/**
+* DateTime Input Primitive
+*
+* A date and time picker.
+*
+* @example
+* ```tsx
+* <DateTimeInput
+*   value={scheduledAt}
+*   onChange={setScheduledAt}
+*   precision="minute"
+* />
+* ```
+*/
+function DateTimeInput(t0) {
+	const $ = c(55);
+	const { value, onChange, minDate, maxDate, format: t1, precision: t2, placeholder: t3, disabled, className, id, "aria-invalid": ariaInvalid } = t0;
+	const dateFormat = t1 === void 0 ? "PPp" : t1;
+	const precision = t2 === void 0 ? "minute" : t2;
+	const placeholder = t3 === void 0 ? "Select date and time" : t3;
+	const resolveText = useResolveText();
+	const [open, setOpen] = useState(false);
+	let t4;
+	if ($[0] !== precision || $[1] !== value) {
+		t4 = () => {
+			if (!value) return "";
+			return precision === "second" ? format(value, "HH:mm:ss") : format(value, "HH:mm");
+		};
+		$[0] = precision;
+		$[1] = value;
+		$[2] = t4;
+	} else t4 = $[2];
+	const [timeValue, setTimeValue] = useState(t4);
+	let t5;
+	if ($[3] !== onChange || $[4] !== timeValue) {
+		t5 = (date) => {
+			if (!date) {
+				onChange(null);
+				return;
+			}
+			if (timeValue) {
+				const [hours, minutes, seconds] = timeValue.split(":").map(Number);
+				date.setHours(hours || 0, minutes || 0, seconds || 0);
+			}
+			onChange(date);
+		};
+		$[3] = onChange;
+		$[4] = timeValue;
+		$[5] = t5;
+	} else t5 = $[5];
+	const handleDateSelect = t5;
+	let t6;
+	if ($[6] !== onChange || $[7] !== value) {
+		t6 = (e) => {
+			const time = e.target.value;
+			setTimeValue(time);
+			if (value && time) {
+				const [hours_0, minutes_0, seconds_0] = time.split(":").map(Number);
+				const newDate = new Date(value);
+				newDate.setHours(hours_0 || 0, minutes_0 || 0, seconds_0 || 0);
+				onChange(newDate);
+			}
+		};
+		$[6] = onChange;
+		$[7] = value;
+		$[8] = t6;
+	} else t6 = $[8];
+	const handleTimeChange = t6;
+	let t7;
+	if ($[9] !== onChange) {
+		t7 = (e_0) => {
+			e_0.stopPropagation();
+			onChange(null);
+			setTimeValue("");
+		};
+		$[9] = onChange;
+		$[10] = t7;
+	} else t7 = $[10];
+	const handleClear = t7;
+	const t8 = !value && "text-muted-foreground";
+	let t9;
+	if ($[11] !== className || $[12] !== t8) {
+		t9 = cn("qa-datetime-input border-input bg-transparent font-mono flex h-9 w-full items-center justify-start gap-2 border px-3 py-2 text-sm", "hover:bg-accent hover:text-accent-foreground", "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none", "disabled:cursor-not-allowed disabled:opacity-50", t8, className);
+		$[11] = className;
+		$[12] = t8;
+		$[13] = t9;
+	} else t9 = $[13];
+	let t10;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(Icon, {
+			icon: "ph:calendar-blank",
+			className: "size-4"
+		});
+		$[14] = t10;
+	} else t10 = $[14];
+	let t11;
+	if ($[15] !== dateFormat || $[16] !== placeholder || $[17] !== resolveText || $[18] !== value) {
+		t11 = value ? format(value, dateFormat) : resolveText(placeholder);
+		$[15] = dateFormat;
+		$[16] = placeholder;
+		$[17] = resolveText;
+		$[18] = value;
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
+	if ($[20] !== t11) {
+		t12 = /* @__PURE__ */ jsx("span", {
+			className: "flex-1 text-left",
+			children: t11
+		});
+		$[20] = t11;
+		$[21] = t12;
+	} else t12 = $[21];
+	let t13;
+	if ($[22] !== disabled || $[23] !== handleClear || $[24] !== value) {
+		t13 = value && !disabled && /* @__PURE__ */ jsx(Icon, {
+			icon: "ph:x",
+			className: "size-4 opacity-50 hover:opacity-100",
+			onClick: handleClear
+		});
+		$[22] = disabled;
+		$[23] = handleClear;
+		$[24] = value;
+		$[25] = t13;
+	} else t13 = $[25];
+	let t14;
+	if ($[26] !== ariaInvalid || $[27] !== disabled || $[28] !== id || $[29] !== t12 || $[30] !== t13 || $[31] !== t9) {
+		t14 = /* @__PURE__ */ jsxs(PopoverTrigger, {
+			id,
+			disabled,
+			"aria-invalid": ariaInvalid,
+			className: t9,
+			children: [
+				t10,
+				t12,
+				t13
+			]
+		});
+		$[26] = ariaInvalid;
+		$[27] = disabled;
+		$[28] = id;
+		$[29] = t12;
+		$[30] = t13;
+		$[31] = t9;
+		$[32] = t14;
+	} else t14 = $[32];
+	const t15 = value ?? void 0;
+	let t16;
+	if ($[33] !== maxDate || $[34] !== minDate) {
+		t16 = (date_0) => {
+			if (minDate && date_0 < minDate) return true;
+			if (maxDate && date_0 > maxDate) return true;
+			return false;
+		};
+		$[33] = maxDate;
+		$[34] = minDate;
+		$[35] = t16;
+	} else t16 = $[35];
+	let t17;
+	let t18;
+	if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = cn("flex size-8 items-center justify-center", "hover:bg-accent bg-transparent p-0 opacity-50 hover:opacity-100");
+		t18 = cn("flex size-8 items-center justify-center", "hover:bg-accent bg-transparent p-0 opacity-50 hover:opacity-100");
+		$[36] = t17;
+		$[37] = t18;
+	} else {
+		t17 = $[36];
+		t18 = $[37];
+	}
+	let t19;
+	if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = {
+			months: "flex flex-col sm:flex-row gap-2",
+			month: "flex flex-col gap-4",
+			month_caption: "flex justify-center pt-1 relative items-center h-9",
+			caption_label: "text-sm font-medium",
+			nav: "absolute inset-x-0 top-0 flex items-center justify-between px-1",
+			button_previous: t17,
+			button_next: t18,
+			month_grid: "w-full border-collapse",
+			weekdays: "flex",
+			weekday: "text-muted-foreground w-9 font-normal text-[0.8rem] text-center",
+			week: "flex w-full mt-2",
+			day: "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent",
+			day_button: cn("size-9 p-0 font-normal", "hover:bg-accent hover:text-accent-foreground", "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2"),
+			selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+			today: "bg-accent text-accent-foreground",
+			outside: "text-muted-foreground opacity-50",
+			disabled: "text-muted-foreground opacity-50",
+			hidden: "invisible"
+		};
+		$[38] = t19;
+	} else t19 = $[38];
+	let t20;
+	if ($[39] !== handleDateSelect || $[40] !== t15 || $[41] !== t16) {
+		t20 = /* @__PURE__ */ jsx(DayPicker, {
+			mode: "single",
+			selected: t15,
+			onSelect: handleDateSelect,
+			disabled: t16,
+			className: "p-3",
+			classNames: t19
+		});
+		$[39] = handleDateSelect;
+		$[40] = t15;
+		$[41] = t16;
+		$[42] = t20;
+	} else t20 = $[42];
+	const t21 = precision === "second" ? 1 : 60;
+	let t22;
+	if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
+		t22 = cn("border-input bg-transparent font-mono flex h-9 w-full border px-3 py-2 text-sm", "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none");
+		$[43] = t22;
+	} else t22 = $[43];
+	let t23;
+	if ($[44] !== handleTimeChange || $[45] !== t21 || $[46] !== timeValue) {
+		t23 = /* @__PURE__ */ jsx("div", {
+			className: "border-border border-t p-3",
+			children: /* @__PURE__ */ jsx("input", {
+				type: "time",
+				step: t21,
+				value: timeValue,
+				onChange: handleTimeChange,
+				className: t22
+			})
+		});
+		$[44] = handleTimeChange;
+		$[45] = t21;
+		$[46] = timeValue;
+		$[47] = t23;
+	} else t23 = $[47];
+	let t24;
+	if ($[48] !== t20 || $[49] !== t23) {
+		t24 = /* @__PURE__ */ jsxs(PopoverContent, {
+			className: "w-auto p-0",
+			align: "start",
+			children: [t20, t23]
+		});
+		$[48] = t20;
+		$[49] = t23;
+		$[50] = t24;
+	} else t24 = $[50];
+	let t25;
+	if ($[51] !== open || $[52] !== t14 || $[53] !== t24) {
+		t25 = /* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: setOpen,
+			children: [t14, t24]
+		});
+		$[51] = open;
+		$[52] = t14;
+		$[53] = t24;
+		$[54] = t25;
+	} else t25 = $[54];
+	return t25;
+}
+
+//#endregion
+export { DateInput, DateTimeInput };