@questpie/admin 1.1.0 → 2.0.0

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

@@ -0,0 +1,218 @@
+"use client";
+
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.mjs";
+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({ value, onChange, minDate, maxDate, format: dateFormat = "PP", placeholder = "Select date", disabled, className, id, "aria-invalid": ariaInvalid }) {
+	const resolveText = useResolveText();
+	const [open, setOpen] = useState(false);
+	const handleSelect = (date) => {
+		onChange(date ?? null);
+		setOpen(false);
+	};
+	const handleClear = (e) => {
+		e.stopPropagation();
+		onChange(null);
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			id,
+			disabled,
+			"aria-invalid": ariaInvalid,
+			className: cn("flex h-9 w-full items-center justify-start gap-2 border border-input/80 bg-input/20 backdrop-blur-sm px-3 py-2 text-sm", "hover:bg-accent hover:text-accent-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-50", !value && "text-muted-foreground", className),
+			children: [
+				/* @__PURE__ */ jsx(Icon, {
+					icon: "ph:calendar-blank",
+					className: "size-4"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "flex-1 text-left",
+					children: value ? format(value, dateFormat) : resolveText(placeholder)
+				}),
+				value && !disabled && /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:x",
+					className: "size-4 opacity-50 hover:opacity-100",
+					onClick: handleClear
+				})
+			]
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-auto p-0",
+			align: "start",
+			children: /* @__PURE__ */ jsx(DayPicker, {
+				mode: "single",
+				selected: value ?? void 0,
+				onSelect: handleSelect,
+				disabled: (date) => {
+					if (minDate && date < minDate) return true;
+					if (maxDate && date > maxDate) return true;
+					return false;
+				},
+				className: "p-3",
+				classNames: {
+					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: cn("size-8 flex items-center justify-center rounded-md", "bg-transparent p-0 opacity-50 hover:opacity-100 hover:bg-accent"),
+					button_next: cn("size-8 flex items-center justify-center rounded-md", "bg-transparent p-0 opacity-50 hover:opacity-100 hover:bg-accent"),
+					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/50",
+					day_button: cn("size-9 p-0 font-normal rounded-md", "hover:bg-accent hover:text-accent-foreground", "focus-visible:ring-2 focus-visible:ring-ring 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 rounded-md",
+					today: "bg-accent text-accent-foreground",
+					outside: "text-muted-foreground opacity-50",
+					disabled: "text-muted-foreground opacity-50",
+					hidden: "invisible"
+				}
+			})
+		})]
+	});
+}
+/**
+* DateTime Input Primitive
+*
+* A date and time picker.
+*
+* @example
+* ```tsx
+* <DateTimeInput
+*   value={scheduledAt}
+*   onChange={setScheduledAt}
+*   precision="minute"
+* />
+* ```
+*/
+function DateTimeInput({ value, onChange, minDate, maxDate, format: dateFormat = "PPp", precision = "minute", placeholder = "Select date and time", disabled, className, id, "aria-invalid": ariaInvalid }) {
+	const resolveText = useResolveText();
+	const [open, setOpen] = useState(false);
+	const [timeValue, setTimeValue] = useState(() => {
+		if (!value) return "";
+		return precision === "second" ? format(value, "HH:mm:ss") : format(value, "HH:mm");
+	});
+	const handleDateSelect = (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);
+	};
+	const handleTimeChange = (e) => {
+		const time = e.target.value;
+		setTimeValue(time);
+		if (value && time) {
+			const [hours, minutes, seconds] = time.split(":").map(Number);
+			const newDate = new Date(value);
+			newDate.setHours(hours || 0, minutes || 0, seconds || 0);
+			onChange(newDate);
+		}
+	};
+	const handleClear = (e) => {
+		e.stopPropagation();
+		onChange(null);
+		setTimeValue("");
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			id,
+			disabled,
+			"aria-invalid": ariaInvalid,
+			className: cn("flex h-9 w-full items-center justify-start gap-2 border border-input/80 bg-input/20 backdrop-blur-sm px-3 py-2 text-sm", "hover:bg-accent hover:text-accent-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-50", !value && "text-muted-foreground", className),
+			children: [
+				/* @__PURE__ */ jsx(Icon, {
+					icon: "ph:calendar-blank",
+					className: "size-4"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "flex-1 text-left",
+					children: value ? format(value, dateFormat) : resolveText(placeholder)
+				}),
+				value && !disabled && /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:x",
+					className: "size-4 opacity-50 hover:opacity-100",
+					onClick: handleClear
+				})
+			]
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			className: "w-auto p-0",
+			align: "start",
+			children: [/* @__PURE__ */ jsx(DayPicker, {
+				mode: "single",
+				selected: value ?? void 0,
+				onSelect: handleDateSelect,
+				disabled: (date) => {
+					if (minDate && date < minDate) return true;
+					if (maxDate && date > maxDate) return true;
+					return false;
+				},
+				className: "p-3",
+				classNames: {
+					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: cn("size-8 flex items-center justify-center rounded-md", "bg-transparent p-0 opacity-50 hover:opacity-100 hover:bg-accent"),
+					button_next: cn("size-8 flex items-center justify-center rounded-md", "bg-transparent p-0 opacity-50 hover:opacity-100 hover:bg-accent"),
+					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/50",
+					day_button: cn("size-9 p-0 font-normal rounded-md", "hover:bg-accent hover:text-accent-foreground", "focus-visible:ring-2 focus-visible:ring-ring 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 rounded-md",
+					today: "bg-accent text-accent-foreground",
+					outside: "text-muted-foreground opacity-50",
+					disabled: "text-muted-foreground opacity-50",
+					hidden: "invisible"
+				}
+			}), /* @__PURE__ */ jsx("div", {
+				className: "border-t border-border p-3",
+				children: /* @__PURE__ */ jsx("input", {
+					type: "time",
+					step: precision === "second" ? 1 : 60,
+					value: timeValue,
+					onChange: handleTimeChange,
+					className: cn("flex h-9 w-full border border-input/80 bg-input/20 backdrop-blur-sm px-3 py-2 text-sm", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2")
+				})
+			})]
+		})]
+	});
+}
+
+//#endregion
+export { DateInput, DateTimeInput };
+//# sourceMappingURL=date-input.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-input.mjs","names":[],"sources":["../../../../src/client/components/primitives/date-input.tsx"],"sourcesContent":["\"use client\";\n\nimport { Icon } from \"@iconify/react\";\nimport { format } from \"date-fns\";\nimport { useState } from \"react\";\nimport { DayPicker } from \"react-day-picker\";\nimport { useResolveText } from \"../../i18n/hooks\";\nimport { cn } from \"../../lib/utils\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../ui/popover\";\nimport type {\n  DateInputProps,\n  DateRangeInputProps,\n  DateTimeInputProps,\n} from \"./types\";\n\n/**\n * Date Input Primitive\n *\n * A date picker with popover calendar.\n * Uses react-day-picker under the hood.\n *\n * @example\n * ```tsx\n * <DateInput\n *   value={selectedDate}\n *   onChange={setSelectedDate}\n *   placeholder=\"Select date\"\n * />\n * ```\n */\nexport function DateInput({\n  value,\n  onChange,\n  minDate,\n  maxDate,\n  format: dateFormat = \"PP\",\n  placeholder = \"Select date\",\n  disabled,\n  className,\n  id,\n  \"aria-invalid\": ariaInvalid,\n}: DateInputProps) {\n  const resolveText = useResolveText();\n  const [open, setOpen] = useState(false);\n\n  const handleSelect = (date: Date | undefined) => {\n    onChange(date ?? null);\n    setOpen(false);\n  };\n\n  const handleClear = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onChange(null);\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        id={id}\n        disabled={disabled}\n        aria-invalid={ariaInvalid}\n        className={cn(\n          \"flex h-9 w-full items-center justify-start gap-2 border border-input/80 bg-input/20 backdrop-blur-sm px-3 py-2 text-sm\",\n          \"hover:bg-accent hover:text-accent-foreground\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          !value && \"text-muted-foreground\",\n          className,\n        )}\n      >\n        <Icon icon=\"ph:calendar-blank\" className=\"size-4\" />\n        <span className=\"flex-1 text-left\">\n          {value ? format(value, dateFormat) : resolveText(placeholder)}\n        </span>\n        {value && !disabled && (\n          <Icon\n            icon=\"ph:x\"\n            className=\"size-4 opacity-50 hover:opacity-100\"\n            onClick={handleClear}\n          />\n        )}\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <DayPicker\n          mode=\"single\"\n          selected={value ?? undefined}\n          onSelect={handleSelect}\n          disabled={(date) => {\n            if (minDate && date < minDate) return true;\n            if (maxDate && date > maxDate) return true;\n            return false;\n          }}\n          className=\"p-3\"\n          classNames={{\n            months: \"flex flex-col sm:flex-row gap-2\",\n            month: \"flex flex-col gap-4\",\n            month_caption: \"flex justify-center pt-1 relative items-center h-9\",\n            caption_label: \"text-sm font-medium\",\n            nav: \"absolute inset-x-0 top-0 flex items-center justify-between px-1\",\n            button_previous: cn(\n              \"size-8 flex items-center justify-center rounded-md\",\n              \"bg-transparent p-0 opacity-50 hover:opacity-100 hover:bg-accent\",\n            ),\n            button_next: cn(\n              \"size-8 flex items-center justify-center rounded-md\",\n              \"bg-transparent p-0 opacity-50 hover:opacity-100 hover:bg-accent\",\n            ),\n            month_grid: \"w-full border-collapse\",\n            weekdays: \"flex\",\n            weekday:\n              \"text-muted-foreground w-9 font-normal text-[0.8rem] text-center\",\n            week: \"flex w-full mt-2\",\n            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/50\",\n            day_button: cn(\n              \"size-9 p-0 font-normal rounded-md\",\n              \"hover:bg-accent hover:text-accent-foreground\",\n              \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n            ),\n            selected:\n              \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-md\",\n            today: \"bg-accent text-accent-foreground\",\n            outside: \"text-muted-foreground opacity-50\",\n            disabled: \"text-muted-foreground opacity-50\",\n            hidden: \"invisible\",\n          }}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\n/**\n * DateTime Input Primitive\n *\n * A date and time picker.\n *\n * @example\n * ```tsx\n * <DateTimeInput\n *   value={scheduledAt}\n *   onChange={setScheduledAt}\n *   precision=\"minute\"\n * />\n * ```\n */\nexport function DateTimeInput({\n  value,\n  onChange,\n  minDate,\n  maxDate,\n  format: dateFormat = \"PPp\",\n  precision = \"minute\",\n  placeholder = \"Select date and time\",\n  disabled,\n  className,\n  id,\n  \"aria-invalid\": ariaInvalid,\n}: DateTimeInputProps) {\n  const resolveText = useResolveText();\n  const [open, setOpen] = useState(false);\n  const [timeValue, setTimeValue] = useState(() => {\n    if (!value) return \"\";\n    return precision === \"second\"\n      ? format(value, \"HH:mm:ss\")\n      : format(value, \"HH:mm\");\n  });\n\n  const handleDateSelect = (date: Date | undefined) => {\n    if (!date) {\n      onChange(null);\n      return;\n    }\n\n    // Preserve existing time if available\n    if (timeValue) {\n      const [hours, minutes, seconds] = timeValue.split(\":\").map(Number);\n      date.setHours(hours || 0, minutes || 0, seconds || 0);\n    }\n    onChange(date);\n  };\n\n  const handleTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const time = e.target.value;\n    setTimeValue(time);\n\n    if (value && time) {\n      const [hours, minutes, seconds] = time.split(\":\").map(Number);\n      const newDate = new Date(value);\n      newDate.setHours(hours || 0, minutes || 0, seconds || 0);\n      onChange(newDate);\n    }\n  };\n\n  const handleClear = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onChange(null);\n    setTimeValue(\"\");\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        id={id}\n        disabled={disabled}\n        aria-invalid={ariaInvalid}\n        className={cn(\n          \"flex h-9 w-full items-center justify-start gap-2 border border-input/80 bg-input/20 backdrop-blur-sm px-3 py-2 text-sm\",\n          \"hover:bg-accent hover:text-accent-foreground\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          !value && \"text-muted-foreground\",\n          className,\n        )}\n      >\n        <Icon icon=\"ph:calendar-blank\" className=\"size-4\" />\n        <span className=\"flex-1 text-left\">\n          {value ? format(value, dateFormat) : resolveText(placeholder)}\n        </span>\n        {value && !disabled && (\n          <Icon\n            icon=\"ph:x\"\n            className=\"size-4 opacity-50 hover:opacity-100\"\n            onClick={handleClear}\n          />\n        )}\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <DayPicker\n          mode=\"single\"\n          selected={value ?? undefined}\n          onSelect={handleDateSelect}\n          disabled={(date) => {\n            if (minDate && date < minDate) return true;\n            if (maxDate && date > maxDate) return true;\n            return false;\n          }}\n          className=\"p-3\"\n          classNames={{\n            months: \"flex flex-col sm:flex-row gap-2\",\n            month: \"flex flex-col gap-4\",\n            month_caption: \"flex justify-center pt-1 relative items-center h-9\",\n            caption_label: \"text-sm font-medium\",\n            nav: \"absolute inset-x-0 top-0 flex items-center justify-between px-1\",\n            button_previous: cn(\n              \"size-8 flex items-center justify-center rounded-md\",\n              \"bg-transparent p-0 opacity-50 hover:opacity-100 hover:bg-accent\",\n            ),\n            button_next: cn(\n              \"size-8 flex items-center justify-center rounded-md\",\n              \"bg-transparent p-0 opacity-50 hover:opacity-100 hover:bg-accent\",\n            ),\n            month_grid: \"w-full border-collapse\",\n            weekdays: \"flex\",\n            weekday:\n              \"text-muted-foreground w-9 font-normal text-[0.8rem] text-center\",\n            week: \"flex w-full mt-2\",\n            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/50\",\n            day_button: cn(\n              \"size-9 p-0 font-normal rounded-md\",\n              \"hover:bg-accent hover:text-accent-foreground\",\n              \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n            ),\n            selected:\n              \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-md\",\n            today: \"bg-accent text-accent-foreground\",\n            outside: \"text-muted-foreground opacity-50\",\n            disabled: \"text-muted-foreground opacity-50\",\n            hidden: \"invisible\",\n          }}\n        />\n        <div className=\"border-t border-border p-3\">\n          <input\n            type=\"time\"\n            step={precision === \"second\" ? 1 : 60}\n            value={timeValue}\n            onChange={handleTimeChange}\n            className={cn(\n              \"flex h-9 w-full border border-input/80 bg-input/20 backdrop-blur-sm px-3 py-2 text-sm\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n            )}\n          />\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\n/**\n * Date Range Input Primitive\n *\n * A date range picker for selecting start and end dates.\n *\n * @example\n * ```tsx\n * <DateRangeInput\n *   value={{ start: startDate, end: endDate }}\n *   onChange={setDateRange}\n * />\n * ```\n */\nexport function DateRangeInput({\n  value,\n  onChange,\n  minDate,\n  maxDate,\n  placeholder = \"Select date range\",\n  disabled,\n  className,\n  id,\n  \"aria-invalid\": ariaInvalid,\n}: DateRangeInputProps) {\n  const resolveText = useResolveText();\n  const [open, setOpen] = useState(false);\n\n  const handleSelect = (range: { from?: Date; to?: Date } | undefined) => {\n    onChange({\n      start: range?.from ?? null,\n      end: range?.to ?? null,\n    });\n  };\n\n  const handleClear = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onChange({ start: null, end: null });\n  };\n\n  const displayValue = () => {\n    if (!value.start && !value.end) return resolveText(placeholder);\n    if (value.start && value.end) {\n      return `${format(value.start, \"PP\")} - ${format(value.end, \"PP\")}`;\n    }\n    if (value.start) return `${format(value.start, \"PP\")} - ...`;\n    return resolveText(placeholder);\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        id={id}\n        disabled={disabled}\n        aria-invalid={ariaInvalid}\n        className={cn(\n          \"flex h-9 w-full items-center justify-start gap-2 border border-input/80 bg-input/20 backdrop-blur-sm px-3 py-2 text-sm\",\n          \"hover:bg-accent hover:text-accent-foreground\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          !value.start && !value.end && \"text-muted-foreground\",\n          className,\n        )}\n      >\n        <Icon icon=\"ph:calendar-blank\" className=\"size-4\" />\n        <span className=\"flex-1 text-left\">{displayValue()}</span>\n        {(value.start || value.end) && !disabled && (\n          <Icon\n            icon=\"ph:x\"\n            className=\"size-4 opacity-50 hover:opacity-100\"\n            onClick={handleClear}\n          />\n        )}\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <DayPicker\n          mode=\"range\"\n          selected={\n            value.start || value.end\n              ? { from: value.start ?? undefined, to: value.end ?? undefined }\n              : undefined\n          }\n          onSelect={handleSelect}\n          numberOfMonths={2}\n          disabled={(date) => {\n            if (minDate && date < minDate) return true;\n            if (maxDate && date > maxDate) return true;\n            return false;\n          }}\n          className=\"p-3\"\n          classNames={{\n            months: \"flex flex-col sm:flex-row gap-4\",\n            month: \"flex flex-col gap-4\",\n            month_caption: \"flex justify-center pt-1 relative items-center h-9\",\n            caption_label: \"text-sm font-medium\",\n            nav: \"absolute inset-x-0 top-0 flex items-center justify-between px-1\",\n            button_previous: cn(\n              \"size-8 flex items-center justify-center rounded-md\",\n              \"bg-transparent p-0 opacity-50 hover:opacity-100 hover:bg-accent\",\n            ),\n            button_next: cn(\n              \"size-8 flex items-center justify-center rounded-md\",\n              \"bg-transparent p-0 opacity-50 hover:opacity-100 hover:bg-accent\",\n            ),\n            month_grid: \"w-full border-collapse\",\n            weekdays: \"flex\",\n            weekday:\n              \"text-muted-foreground w-9 font-normal text-[0.8rem] text-center\",\n            week: \"flex w-full mt-2\",\n            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/50\",\n            day_button: cn(\n              \"size-9 p-0 font-normal rounded-md\",\n              \"hover:bg-accent hover:text-accent-foreground\",\n              \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n            ),\n            selected:\n              \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-md\",\n            range_start: \"rounded-l-md\",\n            range_end: \"rounded-r-md\",\n            range_middle: \"bg-accent\",\n            today: \"bg-accent text-accent-foreground\",\n            outside: \"text-muted-foreground opacity-50\",\n            disabled: \"text-muted-foreground opacity-50\",\n            hidden: \"invisible\",\n          }}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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"}

package/dist/client/components/primitives/dropzone.mjs

@@ -0,0 +1,239 @@
+import { cn } from "../../lib/utils.mjs";
+import { Icon } from "@iconify/react";
+import * as React$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/primitives/dropzone.tsx
+/**
+* Dropzone Primitive
+*
+* A reusable drag-and-drop area for file uploads.
+* Supports file type filtering, size validation, and visual feedback.
+*
+* @example
+* ```tsx
+* <Dropzone
+*   onDrop={(files) => handleUpload(files)}
+*   accept={["image/*", "application/pdf"]}
+*   maxSize={5_000_000}
+* />
+* ```
+*/
+/**
+* Check if a file matches accepted types
+*/
+function matchesAccept(file, accept) {
+	if (!accept || accept.length === 0) return true;
+	const mimeType = file.type.toLowerCase();
+	const fileName = file.name.toLowerCase();
+	return accept.some((pattern) => {
+		const normalizedPattern = pattern.toLowerCase();
+		if (normalizedPattern.endsWith("/*")) {
+			const baseType = normalizedPattern.slice(0, -2);
+			return mimeType.startsWith(`${baseType}/`);
+		}
+		if (normalizedPattern.startsWith(".")) return fileName.endsWith(normalizedPattern);
+		return mimeType === normalizedPattern;
+	});
+}
+/**
+* Format file size for display
+*/
+function formatFileSize(bytes) {
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function Dropzone({ onDrop, accept, maxSize, multiple = false, disabled = false, loading = false, progress, label = "Drop files here or click to browse", hint, error, className, children, onValidationError }) {
+	const [isDragging, setIsDragging] = React$1.useState(false);
+	const inputRef = React$1.useRef(null);
+	const dragCounterRef = React$1.useRef(0);
+	/**
+	* Validate files and return valid ones + errors
+	*/
+	const validateFiles = React$1.useCallback((files) => {
+		const valid = [];
+		const errors = [];
+		for (const file of files) {
+			if (!matchesAccept(file, accept)) {
+				errors.push({
+					file,
+					type: "type",
+					message: `"${file.name}" is not an accepted file type`
+				});
+				continue;
+			}
+			if (maxSize && file.size > maxSize) {
+				errors.push({
+					file,
+					type: "size",
+					message: `"${file.name}" exceeds maximum size of ${formatFileSize(maxSize)}`
+				});
+				continue;
+			}
+			valid.push(file);
+		}
+		return {
+			valid,
+			errors
+		};
+	}, [accept, maxSize]);
+	/**
+	* Handle file selection
+	*/
+	const handleFiles = React$1.useCallback((files) => {
+		if (disabled || loading) return;
+		const fileArray = Array.from(files);
+		const { valid, errors } = validateFiles(multiple ? fileArray : fileArray.slice(0, 1));
+		if (errors.length > 0) onValidationError?.(errors);
+		if (valid.length > 0) onDrop(valid);
+	}, [
+		disabled,
+		loading,
+		multiple,
+		validateFiles,
+		onDrop,
+		onValidationError
+	]);
+	/**
+	* Handle drag events
+	*/
+	const handleDragEnter = React$1.useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		dragCounterRef.current += 1;
+		if (e.dataTransfer.items.length > 0 && !disabled && !loading) setIsDragging(true);
+	}, [disabled, loading]);
+	const handleDragLeave = React$1.useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		dragCounterRef.current -= 1;
+		if (dragCounterRef.current === 0) setIsDragging(false);
+	}, []);
+	const handleDragOver = React$1.useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+	}, []);
+	const handleDrop = React$1.useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		dragCounterRef.current = 0;
+		setIsDragging(false);
+		if (e.dataTransfer.files.length > 0) handleFiles(e.dataTransfer.files);
+	}, [handleFiles]);
+	/**
+	* Handle click to open file dialog
+	*/
+	const handleClick = React$1.useCallback(() => {
+		if (disabled || loading) return;
+		inputRef.current?.click();
+	}, [disabled, loading]);
+	/**
+	* Handle file input change
+	*/
+	const handleInputChange = React$1.useCallback((e) => {
+		if (e.target.files && e.target.files.length > 0) handleFiles(e.target.files);
+		e.target.value = "";
+	}, [handleFiles]);
+	/**
+	* Build accept string for input
+	*/
+	const acceptString = accept?.join(",") || void 0;
+	/**
+	* Build hint text
+	*/
+	const hintText = React$1.useMemo(() => {
+		if (hint) return hint;
+		const parts = [];
+		if (accept && accept.length > 0) {
+			const types = accept.map((t) => {
+				if (t.startsWith("image/")) return "Images";
+				if (t.startsWith("video/")) return "Videos";
+				if (t.startsWith("audio/")) return "Audio";
+				if (t === "application/pdf") return "PDF";
+				if (t.startsWith(".")) return t.toUpperCase();
+				return t;
+			}).filter((v, i, a) => a.indexOf(v) === i);
+			parts.push(types.join(", "));
+		}
+		if (maxSize) parts.push(`Max ${formatFileSize(maxSize)}`);
+		return parts.length > 0 ? parts.join(" • ") : void 0;
+	}, [
+		hint,
+		accept,
+		maxSize
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		role: "button",
+		tabIndex: disabled || loading ? -1 : 0,
+		onClick: handleClick,
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				handleClick();
+			}
+		},
+		onDragEnter: handleDragEnter,
+		onDragLeave: handleDragLeave,
+		onDragOver: handleDragOver,
+		onDrop: handleDrop,
+		className: cn("relative flex min-h-[120px] cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-6 text-center transition-colors", "border-border/60 bg-muted/30 hover:border-border hover:bg-muted/50", isDragging && "border-primary bg-primary/5", error && "border-destructive/50 bg-destructive/5", (disabled || loading) && "pointer-events-none opacity-60", className),
+		"aria-disabled": disabled || loading,
+		"data-dragging": isDragging || void 0,
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				type: "file",
+				accept: acceptString,
+				multiple,
+				onChange: handleInputChange,
+				className: "sr-only",
+				disabled: disabled || loading,
+				tabIndex: -1
+			}),
+			children || /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-center",
+				children: loading ? /* @__PURE__ */ jsxs("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ jsx(Icon, {
+						icon: "ph:spinner-gap",
+						className: "text-muted-foreground size-10 animate-spin"
+					}), typeof progress === "number" && /* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground absolute inset-0 flex items-center justify-center text-xs font-medium",
+						children: [progress, "%"]
+					})]
+				}) : /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:cloud-arrow-up",
+					className: cn("size-10 transition-colors", isDragging ? "text-primary" : "text-muted-foreground")
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "space-y-1",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: cn("text-sm font-medium", isDragging ? "text-primary" : "text-foreground"),
+						children: loading ? "Uploading..." : label
+					}),
+					hintText && !loading && /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-xs",
+						children: hintText
+					}),
+					loading && typeof progress === "number" && /* @__PURE__ */ jsx("div", {
+						className: "bg-muted mx-auto mt-2 h-1.5 w-32 overflow-hidden rounded-full",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "bg-primary h-full rounded-full transition-all duration-300",
+							style: { width: `${progress}%` }
+						})
+					})
+				]
+			})] }),
+			error && /* @__PURE__ */ jsx("p", {
+				className: "text-destructive absolute bottom-2 left-0 right-0 text-center text-xs",
+				children: error
+			})
+		]
+	});
+}
+
+//#endregion
+export { Dropzone };
+//# sourceMappingURL=dropzone.mjs.map

package/dist/client/components/primitives/dropzone.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropzone.mjs","names":["React","valid: File[]","errors: ValidationError[]","parts: string[]"],"sources":["../../../../src/client/components/primitives/dropzone.tsx"],"sourcesContent":["/**\n * Dropzone Primitive\n *\n * A reusable drag-and-drop area for file uploads.\n * Supports file type filtering, size validation, and visual feedback.\n *\n * @example\n * ```tsx\n * <Dropzone\n *   onDrop={(files) => handleUpload(files)}\n *   accept={[\"image/*\", \"application/pdf\"]}\n *   maxSize={5_000_000}\n * />\n * ```\n */\n\nimport * as React from \"react\";\nimport { Icon } from \"@iconify/react\";\nimport { cn } from \"../../lib/utils\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DropzoneProps {\n  /**\n   * Called when files are dropped or selected\n   */\n  onDrop: (files: File[]) => void;\n\n  /**\n   * Accepted file types (MIME types or extensions)\n   * @example [\"image/*\", \"application/pdf\", \".doc\"]\n   */\n  accept?: string[];\n\n  /**\n   * Maximum file size in bytes\n   */\n  maxSize?: number;\n\n  /**\n   * Whether multiple files can be selected\n   * @default false\n   */\n  multiple?: boolean;\n\n  /**\n   * Disable the dropzone\n   */\n  disabled?: boolean;\n\n  /**\n   * Show loading state (e.g., during upload)\n   */\n  loading?: boolean;\n\n  /**\n   * Current upload progress (0-100)\n   */\n  progress?: number;\n\n  /**\n   * Custom label text\n   * @default \"Drop files here or click to browse\"\n   */\n  label?: string;\n\n  /**\n   * Helper text shown below the label\n   */\n  hint?: string;\n\n  /**\n   * Error message to display\n   */\n  error?: string;\n\n  /**\n   * Additional className\n   */\n  className?: string;\n\n  /**\n   * Children to render inside the dropzone (custom content)\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Callback when validation fails\n   */\n  onValidationError?: (errors: ValidationError[]) => void;\n}\n\nexport interface ValidationError {\n  file: File;\n  type: \"type\" | \"size\";\n  message: string;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\n/**\n * Check if a file matches accepted types\n */\nfunction matchesAccept(file: File, accept?: string[]): boolean {\n  if (!accept || accept.length === 0) return true;\n\n  const mimeType = file.type.toLowerCase();\n  const fileName = file.name.toLowerCase();\n\n  return accept.some((pattern) => {\n    const normalizedPattern = pattern.toLowerCase();\n\n    // Handle wildcard MIME types like \"image/*\"\n    if (normalizedPattern.endsWith(\"/*\")) {\n      const baseType = normalizedPattern.slice(0, -2);\n      return mimeType.startsWith(`${baseType}/`);\n    }\n\n    // Handle extensions like \".pdf\"\n    if (normalizedPattern.startsWith(\".\")) {\n      return fileName.endsWith(normalizedPattern);\n    }\n\n    // Handle exact MIME types\n    return mimeType === normalizedPattern;\n  });\n}\n\n/**\n * Format file size for display\n */\nfunction formatFileSize(bytes: number): string {\n  if (bytes < 1024) return `${bytes} B`;\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function Dropzone({\n  onDrop,\n  accept,\n  maxSize,\n  multiple = false,\n  disabled = false,\n  loading = false,\n  progress,\n  label = \"Drop files here or click to browse\",\n  hint,\n  error,\n  className,\n  children,\n  onValidationError,\n}: DropzoneProps) {\n  const [isDragging, setIsDragging] = React.useState(false);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const dragCounterRef = React.useRef(0);\n\n  /**\n   * Validate files and return valid ones + errors\n   */\n  const validateFiles = React.useCallback(\n    (files: File[]): { valid: File[]; errors: ValidationError[] } => {\n      const valid: File[] = [];\n      const errors: ValidationError[] = [];\n\n      for (const file of files) {\n        // Check type\n        if (!matchesAccept(file, accept)) {\n          errors.push({\n            file,\n            type: \"type\",\n            message: `\"${file.name}\" is not an accepted file type`,\n          });\n          continue;\n        }\n\n        // Check size\n        if (maxSize && file.size > maxSize) {\n          errors.push({\n            file,\n            type: \"size\",\n            message: `\"${file.name}\" exceeds maximum size of ${formatFileSize(maxSize)}`,\n          });\n          continue;\n        }\n\n        valid.push(file);\n      }\n\n      return { valid, errors };\n    },\n    [accept, maxSize],\n  );\n\n  /**\n   * Handle file selection\n   */\n  const handleFiles = React.useCallback(\n    (files: FileList | File[]) => {\n      if (disabled || loading) return;\n\n      const fileArray = Array.from(files);\n      const filesToProcess = multiple ? fileArray : fileArray.slice(0, 1);\n\n      const { valid, errors } = validateFiles(filesToProcess);\n\n      if (errors.length > 0) {\n        onValidationError?.(errors);\n      }\n\n      if (valid.length > 0) {\n        onDrop(valid);\n      }\n    },\n    [disabled, loading, multiple, validateFiles, onDrop, onValidationError],\n  );\n\n  /**\n   * Handle drag events\n   */\n  const handleDragEnter = React.useCallback(\n    (e: React.DragEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      dragCounterRef.current += 1;\n      if (e.dataTransfer.items.length > 0 && !disabled && !loading) {\n        setIsDragging(true);\n      }\n    },\n    [disabled, loading],\n  );\n\n  const handleDragLeave = React.useCallback((e: React.DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    dragCounterRef.current -= 1;\n    if (dragCounterRef.current === 0) {\n      setIsDragging(false);\n    }\n  }, []);\n\n  const handleDragOver = React.useCallback((e: React.DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n  }, []);\n\n  const handleDrop = React.useCallback(\n    (e: React.DragEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      dragCounterRef.current = 0;\n      setIsDragging(false);\n\n      if (e.dataTransfer.files.length > 0) {\n        handleFiles(e.dataTransfer.files);\n      }\n    },\n    [handleFiles],\n  );\n\n  /**\n   * Handle click to open file dialog\n   */\n  const handleClick = React.useCallback(() => {\n    if (disabled || loading) return;\n    inputRef.current?.click();\n  }, [disabled, loading]);\n\n  /**\n   * Handle file input change\n   */\n  const handleInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files && e.target.files.length > 0) {\n        handleFiles(e.target.files);\n      }\n      // Reset input so same file can be selected again\n      e.target.value = \"\";\n    },\n    [handleFiles],\n  );\n\n  /**\n   * Build accept string for input\n   */\n  const acceptString = accept?.join(\",\") || undefined;\n\n  /**\n   * Build hint text\n   */\n  const hintText = React.useMemo(() => {\n    if (hint) return hint;\n\n    const parts: string[] = [];\n\n    if (accept && accept.length > 0) {\n      // Simplify accept types for display\n      const types = accept\n        .map((t) => {\n          if (t.startsWith(\"image/\")) return \"Images\";\n          if (t.startsWith(\"video/\")) return \"Videos\";\n          if (t.startsWith(\"audio/\")) return \"Audio\";\n          if (t === \"application/pdf\") return \"PDF\";\n          if (t.startsWith(\".\")) return t.toUpperCase();\n          return t;\n        })\n        .filter((v, i, a) => a.indexOf(v) === i); // unique\n      parts.push(types.join(\", \"));\n    }\n\n    if (maxSize) {\n      parts.push(`Max ${formatFileSize(maxSize)}`);\n    }\n\n    return parts.length > 0 ? parts.join(\" • \") : undefined;\n  }, [hint, accept, maxSize]);\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={disabled || loading ? -1 : 0}\n      onClick={handleClick}\n      onKeyDown={(e) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault();\n          handleClick();\n        }\n      }}\n      onDragEnter={handleDragEnter}\n      onDragLeave={handleDragLeave}\n      onDragOver={handleDragOver}\n      onDrop={handleDrop}\n      className={cn(\n        \"relative flex min-h-[120px] cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-6 text-center transition-colors\",\n        \"border-border/60 bg-muted/30 hover:border-border hover:bg-muted/50\",\n        isDragging && \"border-primary bg-primary/5\",\n        error && \"border-destructive/50 bg-destructive/5\",\n        (disabled || loading) && \"pointer-events-none opacity-60\",\n        className,\n      )}\n      aria-disabled={disabled || loading}\n      data-dragging={isDragging || undefined}\n    >\n      {/* Hidden file input */}\n      <input\n        ref={inputRef}\n        type=\"file\"\n        accept={acceptString}\n        multiple={multiple}\n        onChange={handleInputChange}\n        className=\"sr-only\"\n        disabled={disabled || loading}\n        tabIndex={-1}\n      />\n\n      {/* Custom children or default content */}\n      {children || (\n        <>\n          {/* Icon / Loading */}\n          <div className=\"flex items-center justify-center\">\n            {loading ? (\n              <div className=\"relative\">\n                <Icon\n                  icon=\"ph:spinner-gap\"\n                  className=\"text-muted-foreground size-10 animate-spin\"\n                />\n                {typeof progress === \"number\" && (\n                  <span className=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-xs font-medium\">\n                    {progress}%\n                  </span>\n                )}\n              </div>\n            ) : (\n              <Icon\n                icon=\"ph:cloud-arrow-up\"\n                className={cn(\n                  \"size-10 transition-colors\",\n                  isDragging ? \"text-primary\" : \"text-muted-foreground\",\n                )}\n              />\n            )}\n          </div>\n\n          {/* Label */}\n          <div className=\"space-y-1\">\n            <p\n              className={cn(\n                \"text-sm font-medium\",\n                isDragging ? \"text-primary\" : \"text-foreground\",\n              )}\n            >\n              {loading ? \"Uploading...\" : label}\n            </p>\n\n            {/* Hint */}\n            {hintText && !loading && (\n              <p className=\"text-muted-foreground text-xs\">{hintText}</p>\n            )}\n\n            {/* Progress bar */}\n            {loading && typeof progress === \"number\" && (\n              <div className=\"bg-muted mx-auto mt-2 h-1.5 w-32 overflow-hidden rounded-full\">\n                <div\n                  className=\"bg-primary h-full rounded-full transition-all duration-300\"\n                  style={{ width: `${progress}%` }}\n                />\n              </div>\n            )}\n          </div>\n        </>\n      )}\n\n      {/* Error message */}\n      {error && (\n        <p className=\"text-destructive absolute bottom-2 left-0 right-0 text-center text-xs\">\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,113 @@
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { Button } from "../ui/button.mjs";
+import { Input } from "../ui/input.mjs";
+import { Icon } from "@iconify/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/primitives/number-input.tsx
+/**
+* Number Input Primitive
+*
+* A number input with optional increment/decrement buttons.
+*
+* @example
+* ```tsx
+* <NumberInput
+*   value={count}
+*   onChange={setCount}
+*   min={0}
+*   max={100}
+*   step={1}
+*   showButtons
+* />
+* ```
+*/
+function NumberInput({ value, onChange, min, max, step = 1, showButtons = false, placeholder, disabled, readOnly, className, id, "aria-invalid": ariaInvalid }) {
+	const resolveText = useResolveText();
+	const handleChange = (newValue) => {
+		if (newValue === null) {
+			onChange(null);
+			return;
+		}
+		let clampedValue = newValue;
+		if (min !== void 0 && clampedValue < min) clampedValue = min;
+		if (max !== void 0 && clampedValue > max) clampedValue = max;
+		onChange(clampedValue);
+	};
+	const increment = () => {
+		handleChange((value ?? 0) + step);
+	};
+	const decrement = () => {
+		handleChange((value ?? 0) - step);
+	};
+	if (showButtons) return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-1", className),
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "outline",
+				size: "icon-sm",
+				onClick: decrement,
+				disabled: disabled || min !== void 0 && (value ?? 0) <= min,
+				tabIndex: -1,
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:minus",
+					className: "size-3"
+				})
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				id,
+				type: "number",
+				value: value ?? "",
+				onChange: (e) => {
+					const val = e.target.value;
+					if (val === "") handleChange(null);
+					else handleChange(Number(val));
+				},
+				placeholder: resolveText(placeholder),
+				disabled,
+				readOnly,
+				min,
+				max,
+				step,
+				"aria-invalid": ariaInvalid,
+				className: "text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "outline",
+				size: "icon-sm",
+				onClick: increment,
+				disabled: disabled || max !== void 0 && (value ?? 0) >= max,
+				tabIndex: -1,
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:plus",
+					className: "size-3"
+				})
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Input, {
+		id,
+		type: "number",
+		value: value ?? "",
+		onChange: (e) => {
+			const val = e.target.value;
+			if (val === "") handleChange(null);
+			else handleChange(Number(val));
+		},
+		placeholder: resolveText(placeholder),
+		disabled,
+		readOnly,
+		min,
+		max,
+		step,
+		"aria-invalid": ariaInvalid,
+		className
+	});
+}
+
+//#endregion
+export { NumberInput };
+//# sourceMappingURL=number-input.mjs.map

package/dist/client/components/primitives/number-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.mjs","names":[],"sources":["../../../../src/client/components/primitives/number-input.tsx"],"sourcesContent":["import { Icon } from \"@iconify/react\";\nimport { useResolveText } from \"../../i18n/hooks\";\nimport { cn } from \"../../lib/utils\";\nimport { Button } from \"../ui/button\";\nimport { Input } from \"../ui/input\";\nimport type { NumberInputProps } from \"./types\";\n\n/**\n * Number Input Primitive\n *\n * A number input with optional increment/decrement buttons.\n *\n * @example\n * ```tsx\n * <NumberInput\n *   value={count}\n *   onChange={setCount}\n *   min={0}\n *   max={100}\n *   step={1}\n *   showButtons\n * />\n * ```\n */\nexport function NumberInput({\n  value,\n  onChange,\n  min,\n  max,\n  step = 1,\n  showButtons = false,\n  placeholder,\n  disabled,\n  readOnly,\n  className,\n  id,\n  \"aria-invalid\": ariaInvalid,\n}: NumberInputProps) {\n  const resolveText = useResolveText();\n\n  const handleChange = (newValue: number | null) => {\n    if (newValue === null) {\n      onChange(null);\n      return;\n    }\n\n    let clampedValue = newValue;\n    if (min !== undefined && clampedValue < min) clampedValue = min;\n    if (max !== undefined && clampedValue > max) clampedValue = max;\n\n    onChange(clampedValue);\n  };\n\n  const increment = () => {\n    const current = value ?? 0;\n    handleChange(current + step);\n  };\n\n  const decrement = () => {\n    const current = value ?? 0;\n    handleChange(current - step);\n  };\n\n  if (showButtons) {\n    return (\n      <div className={cn(\"flex items-center gap-1\", className)}>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"icon-sm\"\n          onClick={decrement}\n          disabled={disabled || (min !== undefined && (value ?? 0) <= min)}\n          tabIndex={-1}\n        >\n          <Icon icon=\"ph:minus\" className=\"size-3\" />\n        </Button>\n        <Input\n          id={id}\n          type=\"number\"\n          value={value ?? \"\"}\n          onChange={(e) => {\n            const val = e.target.value;\n            if (val === \"\") {\n              handleChange(null);\n            } else {\n              handleChange(Number(val));\n            }\n          }}\n          placeholder={resolveText(placeholder)}\n          disabled={disabled}\n          readOnly={readOnly}\n          min={min}\n          max={max}\n          step={step}\n          aria-invalid={ariaInvalid}\n          className=\"text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none\"\n        />\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"icon-sm\"\n          onClick={increment}\n          disabled={disabled || (max !== undefined && (value ?? 0) >= max)}\n          tabIndex={-1}\n        >\n          <Icon icon=\"ph:plus\" className=\"size-3\" />\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <Input\n      id={id}\n      type=\"number\"\n      value={value ?? \"\"}\n      onChange={(e) => {\n        const val = e.target.value;\n        if (val === \"\") {\n          handleChange(null);\n        } else {\n          handleChange(Number(val));\n        }\n      }}\n      placeholder={resolveText(placeholder)}\n      disabled={disabled}\n      readOnly={readOnly}\n      min={min}\n      max={max}\n      step={step}\n      aria-invalid={ariaInvalid}\n      className={className}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,SAAgB,YAAY,EAC1B,OACA,UACA,KACA,KACA,OAAO,GACP,cAAc,OACd,aACA,UACA,UACA,WACA,IACA,gBAAgB,eACG;CACnB,MAAM,cAAc,gBAAgB;CAEpC,MAAM,gBAAgB,aAA4B;AAChD,MAAI,aAAa,MAAM;AACrB,YAAS,KAAK;AACd;;EAGF,IAAI,eAAe;AACnB,MAAI,QAAQ,UAAa,eAAe,IAAK,gBAAe;AAC5D,MAAI,QAAQ,UAAa,eAAe,IAAK,gBAAe;AAE5D,WAAS,aAAa;;CAGxB,MAAM,kBAAkB;AAEtB,gBADgB,SAAS,KACF,KAAK;;CAG9B,MAAM,kBAAkB;AAEtB,gBADgB,SAAS,KACF,KAAK;;AAG9B,KAAI,YACF,QACE,qBAAC;EAAI,WAAW,GAAG,2BAA2B,UAAU;;GACtD,oBAAC;IACC,MAAK;IACL,SAAQ;IACR,MAAK;IACL,SAAS;IACT,UAAU,YAAa,QAAQ,WAAc,SAAS,MAAM;IAC5D,UAAU;cAEV,oBAAC;KAAK,MAAK;KAAW,WAAU;MAAW;KACpC;GACT,oBAAC;IACK;IACJ,MAAK;IACL,OAAO,SAAS;IAChB,WAAW,MAAM;KACf,MAAM,MAAM,EAAE,OAAO;AACrB,SAAI,QAAQ,GACV,cAAa,KAAK;SAElB,cAAa,OAAO,IAAI,CAAC;;IAG7B,aAAa,YAAY,YAAY;IAC3B;IACA;IACL;IACA;IACC;IACN,gBAAc;IACd,WAAU;KACV;GACF,oBAAC;IACC,MAAK;IACL,SAAQ;IACR,MAAK;IACL,SAAS;IACT,UAAU,YAAa,QAAQ,WAAc,SAAS,MAAM;IAC5D,UAAU;cAEV,oBAAC;KAAK,MAAK;KAAU,WAAU;MAAW;KACnC;;GACL;AAIV,QACE,oBAAC;EACK;EACJ,MAAK;EACL,OAAO,SAAS;EAChB,WAAW,MAAM;GACf,MAAM,MAAM,EAAE,OAAO;AACrB,OAAI,QAAQ,GACV,cAAa,KAAK;OAElB,cAAa,OAAO,IAAI,CAAC;;EAG7B,aAAa,YAAY,YAAY;EAC3B;EACA;EACL;EACA;EACC;EACN,gBAAc;EACH;GACX"}