maquinaweb-ui 2.64.0 → 2.65.0

package/dist/date-hour-field/DateHourField.js

@@ -0,0 +1,208 @@
+'use client';
+
+
+import { cn } from "../src/lib/utils.js";
+import withMask from "../src/hooks/with-mask.js";
+import { FormDescription, FormFieldContext, FormItem, FormLabel, FormMessage } from "../ui/form.js";
+import { Input } from "../ui/input.js";
+import { InputHelp } from "../ui/input-help.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
+import { Calendar } from "../ui/calendar.js";
+import { InputDateField } from "../ui/input-date-field.js";
+import { HOUR_OPTIONS, MINUTE_OPTIONS, formatDateTimeAsLocalString, formatDateTimeAsTime, formatTimeValue, getFallbackTime, mergeDateAndTime, normalizeDateValue, parseTime, sanitizeTimeInput } from "./date-hour-field.utils.js";
+import { TimeWheelColumn } from "./time-wheel-column.js";
+import { useController, useFormContext } from "react-hook-form";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ptBR } from "date-fns/locale";
+
+//#region src/components/date-hour-field/DateHourField.tsx
+function DateHourField({ name, label, description, inputDisabled, endMonth, className, disabled, initialValue, required, help, hourPlaceholder = "Hora", valueType = "local-string" }) {
+	const form = useFormContext();
+	const { field, fieldState } = useController({
+		name,
+		defaultValue: initialValue,
+		rules: { required },
+		control: form.control
+	});
+	const [isOpen, setIsOpen] = useState(false);
+	const [timeValue, setTimeValue] = useState("");
+	const valueAsDate = normalizeDateValue(field.value);
+	const selectedTime = parseTime(timeValue);
+	useEffect(() => {
+		if (!valueAsDate) {
+			setTimeValue("");
+			return;
+		}
+		const nextValue = formatDateTimeAsTime(valueAsDate);
+		setTimeValue((currentValue) => currentValue === nextValue ? currentValue : nextValue);
+	}, [valueAsDate]);
+	const updateFieldTime = (timePatch) => {
+		const fallbackTime = getFallbackTime(valueAsDate);
+		const baseTime = selectedTime ?? fallbackTime;
+		const nextTime = {
+			hours: baseTime.hours,
+			minutes: baseTime.minutes,
+			...timePatch
+		};
+		const nextDate = new Date(valueAsDate ?? /* @__PURE__ */ new Date());
+		nextDate.setHours(nextTime.hours, nextTime.minutes, 0, 0);
+		setTimeValue(formatTimeValue(nextTime.hours, nextTime.minutes));
+		if (valueType === "local-string") {
+			field.onChange(formatDateTimeAsLocalString(nextDate));
+			return;
+		}
+		field.onChange(nextDate);
+	};
+	const handleDateSelect = (date) => {
+		if (!date) {
+			setTimeValue("");
+			field.onChange(void 0);
+			return;
+		}
+		const mergedDate = mergeDateAndTime(date, timeValue, valueAsDate);
+		setTimeValue(formatDateTimeAsTime(mergedDate));
+		if (valueType === "local-string") {
+			field.onChange(formatDateTimeAsLocalString(mergedDate));
+			return;
+		}
+		field.onChange(mergedDate);
+	};
+	const handleTimeInputChange = (nextValue) => {
+		const sanitizedValue = sanitizeTimeInput(nextValue);
+		setTimeValue(sanitizedValue);
+		if (sanitizedValue.length !== 5) return;
+		const parsedTime = parseTime(sanitizedValue);
+		if (!parsedTime) return;
+		updateFieldTime(parsedTime);
+	};
+	const handleHourSelect = (hourLabel) => {
+		const selectedHourValue = Number(hourLabel);
+		if (Number.isNaN(selectedHourValue)) return;
+		updateFieldTime({ hours: selectedHourValue });
+	};
+	const handleMinuteSelect = (minuteLabel) => {
+		const selectedMinuteValue = Number(minuteLabel);
+		if (Number.isNaN(selectedMinuteValue)) return;
+		updateFieldTime({ minutes: selectedMinuteValue });
+	};
+	return /* @__PURE__ */ jsx(FormFieldContext.Provider, {
+		value: { name },
+		children: /* @__PURE__ */ jsxs(FormItem, {
+			className,
+			id: `date-hour-${name.replace(".", "-")}`,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-end gap-1.5",
+					children: [/* @__PURE__ */ jsxs(FormLabel, {
+						htmlFor: name,
+						children: [
+							label,
+							":",
+							required && /* @__PURE__ */ jsx("span", {
+								className: "text-red-500 text-lg leading-px",
+								children: "*"
+							})
+						]
+					}), /* @__PURE__ */ jsx(InputHelp, {
+						help,
+						name
+					})]
+				}),
+				/* @__PURE__ */ jsxs(Popover, {
+					modal: true,
+					onOpenChange: setIsOpen,
+					open: !inputDisabled && isOpen,
+					children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex w-full items-center",
+							onClick: (event) => {
+								event.preventDefault();
+								event.stopPropagation();
+							},
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "w-full",
+								children: /* @__PURE__ */ jsx(InputDateField, {
+									className: cn("border-r-0! rounded-r-none", fieldState.error && "border-destructive"),
+									disabled: inputDisabled,
+									field: {
+										...field,
+										onChange(nextValue) {
+											const normalizedDate = normalizeDateValue(nextValue);
+											if (!normalizedDate) {
+												setTimeValue("");
+												field.onChange(void 0);
+												return;
+											}
+											const mergedDate = mergeDateAndTime(normalizedDate, timeValue, valueAsDate);
+											setTimeValue(formatDateTimeAsTime(mergedDate));
+											if (valueType === "local-string") {
+												field.onChange(formatDateTimeAsLocalString(mergedDate));
+												return;
+											}
+											field.onChange(mergedDate);
+										},
+										value: valueAsDate
+									},
+									id: name,
+									onFocus: () => setIsOpen(true)
+								})
+							}), /* @__PURE__ */ jsx(Input, {
+								className: cn("w-28 min-w-28 border-l rounded-l-none", fieldState.error && "border-destructive"),
+								disabled: inputDisabled,
+								id: `${name}-hour`,
+								onChange: (event) => handleTimeInputChange(event.target.value),
+								onFocus: () => setIsOpen(true),
+								placeholder: hourPlaceholder,
+								ref: withMask("99:99", {
+									clearMaskOnLostFocus: true,
+									showMaskOnFocus: false,
+									showMaskOnHover: false,
+									undoOnEscape: false
+								}),
+								value: timeValue
+							})]
+						})
+					}), /* @__PURE__ */ jsxs(PopoverContent, {
+						className: "flex w-fit gap-2 p-0 items-center",
+						onOpenAutoFocus: (event) => event.preventDefault(),
+						children: [/* @__PURE__ */ jsx(Calendar, {
+							defaultMonth: valueAsDate || /* @__PURE__ */ new Date(),
+							disabled,
+							endMonth,
+							locale: ptBR,
+							mode: "single",
+							onSelect: handleDateSelect,
+							selected: valueAsDate
+						}, `${name}-${valueAsDate?.toString()}-${timeValue}`), /* @__PURE__ */ jsx("div", {
+							className: "relative shrink-0 my-auto border-l p-3 pr-3 ",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "flex gap-2",
+								children: [/* @__PURE__ */ jsx(TimeWheelColumn, {
+									isOpen,
+									label: "Hora",
+									onSelect: handleHourSelect,
+									options: HOUR_OPTIONS,
+									selectedValue: selectedTime?.hours
+								}), /* @__PURE__ */ jsx(TimeWheelColumn, {
+									isOpen,
+									label: "Min",
+									onSelect: handleMinuteSelect,
+									options: MINUTE_OPTIONS,
+									selectedValue: selectedTime?.minutes
+								})]
+							})
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx(FormDescription, { children: description }),
+				fieldState.error && /* @__PURE__ */ jsx(FormMessage, {})
+			]
+		})
+	});
+}
+
+//#endregion
+export { DateHourField };
+//# sourceMappingURL=DateHourField.js.map

package/dist/date-hour-field/DateHourField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateHourField.js","names":[],"sources":["../../src/components/date-hour-field/DateHourField.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\nimport {\n  type FieldPath,\n  type FieldValues,\n  type UseControllerProps,\n  useController,\n  useFormContext,\n} from 'react-hook-form';\nimport withMask from '@/hooks/with-mask';\n\nimport { Calendar } from '@/ui/calendar';\nimport {\n  FormDescription,\n  FormFieldContext,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/ui/form';\nimport { Input } from '@/ui/input';\nimport { InputDateField } from '@/ui/input-date-field';\nimport { InputHelp } from '@/ui/input-help';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ui/popover';\n\nimport { cn } from '@/lib/utils';\nimport { ptBR } from 'date-fns/locale';\nimport type { Matcher } from 'react-day-picker';\nimport {\n  type ParsedTime,\n  HOUR_OPTIONS,\n  MINUTE_OPTIONS,\n  formatDateTimeAsTime,\n  formatDateTimeAsLocalString,\n  formatTimeValue,\n  getFallbackTime,\n  mergeDateAndTime,\n  normalizeDateValue,\n  parseTime,\n  sanitizeTimeInput,\n} from './date-hour-field.utils';\nimport { TimeWheelColumn } from './time-wheel-column';\n\nexport interface DateHourFieldProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> extends Omit<UseControllerProps<TFieldValues, TFieldName>, 'disabled'> {\n  label: string;\n  description?: string;\n  className?: string;\n  disabled?: Matcher | Matcher[] | undefined;\n  inputDisabled?: boolean;\n  initialValue?: Date;\n  endMonth?: Date;\n  required?: boolean;\n  help?: string;\n  hourPlaceholder?: string;\n  valueType?: 'date' | 'local-string';\n}\n\nfunction DateHourField<\n  TFieldValues extends FieldValues = FieldValues,\n  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  name,\n  label,\n  description,\n  inputDisabled,\n  endMonth,\n  className,\n  disabled,\n  initialValue,\n  required,\n  help,\n  hourPlaceholder = 'Hora',\n  valueType = 'local-string',\n}: DateHourFieldProps<TFieldValues, TFieldName>) {\n  const form = useFormContext();\n  const { field, fieldState } = useController({\n    name,\n    defaultValue: initialValue as any,\n    rules: { required },\n    control: form.control,\n  });\n\n  const [isOpen, setIsOpen] = useState(false);\n  const [timeValue, setTimeValue] = useState('');\n\n  const valueAsDate = normalizeDateValue(field.value);\n  const selectedTime = parseTime(timeValue);\n\n  useEffect(() => {\n    if (!valueAsDate) {\n      setTimeValue('');\n      return;\n    }\n\n    const nextValue = formatDateTimeAsTime(valueAsDate);\n    setTimeValue((currentValue) =>\n      currentValue === nextValue ? currentValue : nextValue\n    );\n  }, [valueAsDate]);\n\n  const updateFieldTime = (timePatch: Partial<ParsedTime>) => {\n    const fallbackTime = getFallbackTime(valueAsDate);\n    const baseTime = selectedTime ?? fallbackTime;\n\n    const nextTime = {\n      hours: baseTime.hours,\n      minutes: baseTime.minutes,\n      ...timePatch,\n    };\n\n    const nextDate = new Date(valueAsDate ?? new Date());\n    nextDate.setHours(nextTime.hours, nextTime.minutes, 0, 0);\n\n    setTimeValue(formatTimeValue(nextTime.hours, nextTime.minutes));\n    if (valueType === 'local-string') {\n      field.onChange(formatDateTimeAsLocalString(nextDate));\n      return;\n    }\n\n    field.onChange(nextDate);\n  };\n\n  const handleDateSelect = (date: Date | undefined) => {\n    if (!date) {\n      setTimeValue('');\n      field.onChange(undefined);\n      return;\n    }\n\n    const mergedDate = mergeDateAndTime(date, timeValue, valueAsDate);\n    setTimeValue(formatDateTimeAsTime(mergedDate));\n    if (valueType === 'local-string') {\n      field.onChange(formatDateTimeAsLocalString(mergedDate));\n      return;\n    }\n\n    field.onChange(mergedDate);\n  };\n\n  const handleTimeInputChange = (nextValue: string) => {\n    const sanitizedValue = sanitizeTimeInput(nextValue);\n    setTimeValue(sanitizedValue);\n\n    if (sanitizedValue.length !== 5) return;\n\n    const parsedTime = parseTime(sanitizedValue);\n    if (!parsedTime) return;\n\n    updateFieldTime(parsedTime);\n  };\n\n  const handleHourSelect = (hourLabel: string) => {\n    const selectedHourValue = Number(hourLabel);\n    if (Number.isNaN(selectedHourValue)) return;\n\n    updateFieldTime({ hours: selectedHourValue });\n  };\n\n  const handleMinuteSelect = (minuteLabel: string) => {\n    const selectedMinuteValue = Number(minuteLabel);\n    if (Number.isNaN(selectedMinuteValue)) return;\n\n    updateFieldTime({ minutes: selectedMinuteValue });\n  };\n\n  return (\n    <FormFieldContext.Provider value={{ name }}>\n      <FormItem\n        className={className}\n        id={`date-hour-${name.replace('.', '-')}`}\n      >\n        <div className=\"flex items-end gap-1.5\">\n          <FormLabel htmlFor={name}>\n            {label}:\n            {required && (\n              <span className=\"text-red-500 text-lg leading-px\">*</span>\n            )}\n          </FormLabel>\n\n          <InputHelp help={help} name={name} />\n        </div>\n\n        <Popover modal onOpenChange={setIsOpen} open={!inputDisabled && isOpen}>\n          <PopoverTrigger asChild>\n            <div\n              className=\"flex w-full items-center\"\n              onClick={(event) => {\n                event.preventDefault();\n                event.stopPropagation();\n              }}\n            >\n              <div className=\"w-full\">\n                <InputDateField\n                  className={cn(\n                    'border-r-0! rounded-r-none',\n                    fieldState.error && 'border-destructive'\n                  )}\n                  disabled={inputDisabled}\n                  field={{\n                    ...field,\n                    onChange(nextValue) {\n                      const normalizedDate = normalizeDateValue(nextValue);\n                      if (!normalizedDate) {\n                        setTimeValue('');\n                        field.onChange(undefined);\n                        return;\n                      }\n\n                      const mergedDate = mergeDateAndTime(\n                        normalizedDate,\n                        timeValue,\n                        valueAsDate\n                      );\n\n                      setTimeValue(formatDateTimeAsTime(mergedDate));\n                      if (valueType === 'local-string') {\n                        field.onChange(formatDateTimeAsLocalString(mergedDate));\n                        return;\n                      }\n\n                      field.onChange(mergedDate);\n                    },\n                    value: valueAsDate,\n                  }}\n                  id={name}\n                  onFocus={() => setIsOpen(true)}\n                />\n              </div>\n\n              <Input\n                className={cn(\n                  'w-28 min-w-28 border-l rounded-l-none',\n                  fieldState.error && 'border-destructive'\n                )}\n                disabled={inputDisabled}\n                id={`${name}-hour`}\n                onChange={(event) => handleTimeInputChange(event.target.value)}\n                onFocus={() => setIsOpen(true)}\n                placeholder={hourPlaceholder}\n                ref={\n                  withMask('99:99', {\n                    clearMaskOnLostFocus: true,\n                    showMaskOnFocus: false,\n                    showMaskOnHover: false,\n                    undoOnEscape: false,\n                  }) as any\n                }\n                value={timeValue}\n              />\n            </div>\n          </PopoverTrigger>\n\n          <PopoverContent\n            className=\"flex w-fit gap-2 p-0 items-center\"\n            onOpenAutoFocus={(event) => event.preventDefault()}\n          >\n            <Calendar\n              defaultMonth={valueAsDate || new Date()}\n              disabled={disabled}\n              endMonth={endMonth}\n              key={`${name}-${valueAsDate?.toString()}-${timeValue}`}\n              locale={ptBR}\n              mode=\"single\"\n              onSelect={handleDateSelect}\n              selected={valueAsDate}\n            />\n\n            <div className=\"relative shrink-0 my-auto border-l p-3 pr-3 \">\n              <div className=\"flex gap-2\">\n                <TimeWheelColumn\n                  isOpen={isOpen}\n                  label=\"Hora\"\n                  onSelect={handleHourSelect}\n                  options={HOUR_OPTIONS}\n                  selectedValue={selectedTime?.hours}\n                />\n\n                <TimeWheelColumn\n                  isOpen={isOpen}\n                  label=\"Min\"\n                  onSelect={handleMinuteSelect}\n                  options={MINUTE_OPTIONS}\n                  selectedValue={selectedTime?.minutes}\n                />\n              </div>\n            </div>\n          </PopoverContent>\n        </Popover>\n\n        <FormDescription>{description}</FormDescription>\n        {fieldState.error && <FormMessage />}\n      </FormItem>\n    </FormFieldContext.Provider>\n  );\n}\n\nexport { DateHourField };\n"],"mappings":"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"}

package/dist/date-hour-field/date-hour-field.utils.js

@@ -0,0 +1,78 @@
+import { format, isValid, parse, parseISO } from "date-fns";
+
+//#region src/components/date-hour-field/date-hour-field.utils.ts
+const HOUR_OPTIONS = Array.from({ length: 24 }, (_, index) => String(index).padStart(2, "0"));
+const MINUTE_OPTIONS = Array.from({ length: 60 }, (_, index) => String(index).padStart(2, "0"));
+const parseTime = (value) => {
+	const match = value.match(/^(\d{2}):(\d{2})$/);
+	if (!match) return void 0;
+	const hours = Number(match[1]);
+	const minutes = Number(match[2]);
+	if (Number.isNaN(hours) || Number.isNaN(minutes) || hours < 0 || hours > 23 || minutes < 0 || minutes > 59) return;
+	return {
+		hours,
+		minutes
+	};
+};
+const sanitizeTimeInput = (value) => {
+	const [hoursRaw = "", minutesRaw = ""] = value.split(":");
+	const hasColon = value.includes(":");
+	let hours = hoursRaw;
+	let minutes = minutesRaw;
+	if (hours.length === 2) {
+		const parsedHours = Number(hours);
+		if (!Number.isNaN(parsedHours) && parsedHours > 23) hours = "23";
+	}
+	if (minutes.length === 2) {
+		const parsedMinutes = Number(minutes);
+		if (!Number.isNaN(parsedMinutes) && parsedMinutes > 59) minutes = "59";
+	}
+	if (!hasColon) return hours;
+	return `${hours}:${minutes}`;
+};
+const normalizeDateValue = (value) => {
+	if (!value) return void 0;
+	if (value instanceof Date) return isValid(value) ? value : void 0;
+	if (typeof value === "string") {
+		const parsedLocalDateTimeWithSeconds = parse(value, "yyyy-MM-dd HH:mm:ss", /* @__PURE__ */ new Date());
+		if (isValid(parsedLocalDateTimeWithSeconds)) return parsedLocalDateTimeWithSeconds;
+		const parsedLocalDateTime = parse(value, "yyyy-MM-dd HH:mm", /* @__PURE__ */ new Date());
+		if (isValid(parsedLocalDateTime)) return parsedLocalDateTime;
+		const parsedIso = parseISO(value);
+		if (isValid(parsedIso)) return parsedIso;
+		const parsedDateOnly = parse(value, "yyyy-MM-dd", /* @__PURE__ */ new Date());
+		if (isValid(parsedDateOnly)) return parsedDateOnly;
+		const parsedAsDate = new Date(value);
+		if (isValid(parsedAsDate)) return parsedAsDate;
+	}
+};
+const formatTimeValue = (hours, minutes) => {
+	return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+};
+const formatDateTimeAsTime = (date) => {
+	return formatTimeValue(date.getHours(), date.getMinutes());
+};
+const formatDateTimeAsLocalString = (date) => {
+	return format(date, "yyyy-MM-dd HH:mm:ss");
+};
+const getFallbackTime = (fallbackDate) => {
+	if (fallbackDate) return {
+		hours: fallbackDate.getHours(),
+		minutes: fallbackDate.getMinutes()
+	};
+	const now = /* @__PURE__ */ new Date();
+	return {
+		hours: now.getHours(),
+		minutes: now.getMinutes()
+	};
+};
+const mergeDateAndTime = (selectedDate, timeValue, fallbackDate) => {
+	const mergedDate = new Date(selectedDate);
+	const parsedTime = parseTime(timeValue) ?? getFallbackTime(fallbackDate);
+	mergedDate.setHours(parsedTime.hours, parsedTime.minutes, 0, 0);
+	return mergedDate;
+};
+
+//#endregion
+export { HOUR_OPTIONS, MINUTE_OPTIONS, formatDateTimeAsLocalString, formatDateTimeAsTime, formatTimeValue, getFallbackTime, mergeDateAndTime, normalizeDateValue, parseTime, sanitizeTimeInput };
+//# sourceMappingURL=date-hour-field.utils.js.map

package/dist/date-hour-field/date-hour-field.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-hour-field.utils.js","names":[],"sources":["../../src/components/date-hour-field/date-hour-field.utils.ts"],"sourcesContent":["import { format, isValid, parse, parseISO } from 'date-fns';\n\nexport type ParsedTime = {\n  hours: number;\n  minutes: number;\n};\n\nexport const HOUR_OPTIONS = Array.from({ length: 24 }, (_, index) =>\n  String(index).padStart(2, '0')\n);\n\nexport const MINUTE_OPTIONS = Array.from({ length: 60 }, (_, index) =>\n  String(index).padStart(2, '0')\n);\n\nexport const parseTime = (value: string): ParsedTime | undefined => {\n  const match = value.match(/^(\\d{2}):(\\d{2})$/);\n  if (!match) return undefined;\n\n  const hours = Number(match[1]);\n  const minutes = Number(match[2]);\n\n  if (\n    Number.isNaN(hours) ||\n    Number.isNaN(minutes) ||\n    hours < 0 ||\n    hours > 23 ||\n    minutes < 0 ||\n    minutes > 59\n  ) {\n    return undefined;\n  }\n\n  return { hours, minutes };\n};\n\nexport const sanitizeTimeInput = (value: string) => {\n  const [hoursRaw = '', minutesRaw = ''] = value.split(':');\n  const hasColon = value.includes(':');\n\n  let hours = hoursRaw;\n  let minutes = minutesRaw;\n\n  if (hours.length === 2) {\n    const parsedHours = Number(hours);\n    if (!Number.isNaN(parsedHours) && parsedHours > 23) {\n      hours = '23';\n    }\n  }\n\n  if (minutes.length === 2) {\n    const parsedMinutes = Number(minutes);\n    if (!Number.isNaN(parsedMinutes) && parsedMinutes > 59) {\n      minutes = '59';\n    }\n  }\n\n  if (!hasColon) return hours;\n  return `${hours}:${minutes}`;\n};\n\nexport const normalizeDateValue = (value: unknown): Date | undefined => {\n  if (!value) return undefined;\n\n  if (value instanceof Date) {\n    return isValid(value) ? value : undefined;\n  }\n\n  if (typeof value === 'string') {\n    const parsedLocalDateTimeWithSeconds = parse(\n      value,\n      'yyyy-MM-dd HH:mm:ss',\n      new Date()\n    );\n    if (isValid(parsedLocalDateTimeWithSeconds)) {\n      return parsedLocalDateTimeWithSeconds;\n    }\n\n    const parsedLocalDateTime = parse(value, 'yyyy-MM-dd HH:mm', new Date());\n    if (isValid(parsedLocalDateTime)) {\n      return parsedLocalDateTime;\n    }\n\n    const parsedIso = parseISO(value);\n    if (isValid(parsedIso)) return parsedIso;\n\n    const parsedDateOnly = parse(value, 'yyyy-MM-dd', new Date());\n    if (isValid(parsedDateOnly)) return parsedDateOnly;\n\n    const parsedAsDate = new Date(value);\n    if (isValid(parsedAsDate)) return parsedAsDate;\n  }\n\n  return undefined;\n};\n\nexport const formatTimeValue = (hours: number, minutes: number) => {\n  return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;\n};\n\nexport const formatDateTimeAsTime = (date: Date) => {\n  return formatTimeValue(date.getHours(), date.getMinutes());\n};\n\nexport const formatDateTimeAsLocalString = (date: Date) => {\n  return format(date, 'yyyy-MM-dd HH:mm:ss');\n};\n\nexport const getFallbackTime = (fallbackDate?: Date): ParsedTime => {\n  if (fallbackDate) {\n    return {\n      hours: fallbackDate.getHours(),\n      minutes: fallbackDate.getMinutes(),\n    };\n  }\n\n  const now = new Date();\n  return {\n    hours: now.getHours(),\n    minutes: now.getMinutes(),\n  };\n};\n\nexport const mergeDateAndTime = (\n  selectedDate: Date,\n  timeValue: string,\n  fallbackDate?: Date\n) => {\n  const mergedDate = new Date(selectedDate);\n  const parsedTime = parseTime(timeValue) ?? getFallbackTime(fallbackDate);\n\n  mergedDate.setHours(parsedTime.hours, parsedTime.minutes, 0, 0);\n  return mergedDate;\n};\n"],"mappings":";;;AAOA,MAAa,eAAe,MAAM,KAAK,EAAE,QAAQ,IAAI,GAAG,GAAG,UACzD,OAAO,MAAM,CAAC,SAAS,GAAG,IAAI,CAC/B;AAED,MAAa,iBAAiB,MAAM,KAAK,EAAE,QAAQ,IAAI,GAAG,GAAG,UAC3D,OAAO,MAAM,CAAC,SAAS,GAAG,IAAI,CAC/B;AAED,MAAa,aAAa,UAA0C;CAClE,MAAM,QAAQ,MAAM,MAAM,oBAAoB;AAC9C,KAAI,CAAC,MAAO,QAAO;CAEnB,MAAM,QAAQ,OAAO,MAAM,GAAG;CAC9B,MAAM,UAAU,OAAO,MAAM,GAAG;AAEhC,KACE,OAAO,MAAM,MAAM,IACnB,OAAO,MAAM,QAAQ,IACrB,QAAQ,KACR,QAAQ,MACR,UAAU,KACV,UAAU,GAEV;AAGF,QAAO;EAAE;EAAO;EAAS;;AAG3B,MAAa,qBAAqB,UAAkB;CAClD,MAAM,CAAC,WAAW,IAAI,aAAa,MAAM,MAAM,MAAM,IAAI;CACzD,MAAM,WAAW,MAAM,SAAS,IAAI;CAEpC,IAAI,QAAQ;CACZ,IAAI,UAAU;AAEd,KAAI,MAAM,WAAW,GAAG;EACtB,MAAM,cAAc,OAAO,MAAM;AACjC,MAAI,CAAC,OAAO,MAAM,YAAY,IAAI,cAAc,GAC9C,SAAQ;;AAIZ,KAAI,QAAQ,WAAW,GAAG;EACxB,MAAM,gBAAgB,OAAO,QAAQ;AACrC,MAAI,CAAC,OAAO,MAAM,cAAc,IAAI,gBAAgB,GAClD,WAAU;;AAId,KAAI,CAAC,SAAU,QAAO;AACtB,QAAO,GAAG,MAAM,GAAG;;AAGrB,MAAa,sBAAsB,UAAqC;AACtE,KAAI,CAAC,MAAO,QAAO;AAEnB,KAAI,iBAAiB,KACnB,QAAO,QAAQ,MAAM,GAAG,QAAQ;AAGlC,KAAI,OAAO,UAAU,UAAU;EAC7B,MAAM,iCAAiC,MACrC,OACA,uCACA,IAAI,MAAM,CACX;AACD,MAAI,QAAQ,+BAA+B,CACzC,QAAO;EAGT,MAAM,sBAAsB,MAAM,OAAO,oCAAoB,IAAI,MAAM,CAAC;AACxE,MAAI,QAAQ,oBAAoB,CAC9B,QAAO;EAGT,MAAM,YAAY,SAAS,MAAM;AACjC,MAAI,QAAQ,UAAU,CAAE,QAAO;EAE/B,MAAM,iBAAiB,MAAM,OAAO,8BAAc,IAAI,MAAM,CAAC;AAC7D,MAAI,QAAQ,eAAe,CAAE,QAAO;EAEpC,MAAM,eAAe,IAAI,KAAK,MAAM;AACpC,MAAI,QAAQ,aAAa,CAAE,QAAO;;;AAMtC,MAAa,mBAAmB,OAAe,YAAoB;AACjE,QAAO,GAAG,OAAO,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,OAAO,QAAQ,CAAC,SAAS,GAAG,IAAI;;AAG9E,MAAa,wBAAwB,SAAe;AAClD,QAAO,gBAAgB,KAAK,UAAU,EAAE,KAAK,YAAY,CAAC;;AAG5D,MAAa,+BAA+B,SAAe;AACzD,QAAO,OAAO,MAAM,sBAAsB;;AAG5C,MAAa,mBAAmB,iBAAoC;AAClE,KAAI,aACF,QAAO;EACL,OAAO,aAAa,UAAU;EAC9B,SAAS,aAAa,YAAY;EACnC;CAGH,MAAM,sBAAM,IAAI,MAAM;AACtB,QAAO;EACL,OAAO,IAAI,UAAU;EACrB,SAAS,IAAI,YAAY;EAC1B;;AAGH,MAAa,oBACX,cACA,WACA,iBACG;CACH,MAAM,aAAa,IAAI,KAAK,aAAa;CACzC,MAAM,aAAa,UAAU,UAAU,IAAI,gBAAgB,aAAa;AAExE,YAAW,SAAS,WAAW,OAAO,WAAW,SAAS,GAAG,EAAE;AAC/D,QAAO"}

package/dist/date-hour-field/time-wheel-column.js

@@ -0,0 +1,59 @@
+import { cn } from "../src/lib/utils.js";
+import { useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures";
+import useEmblaCarousel from "embla-carousel-react";
+
+//#region src/components/date-hour-field/time-wheel-column.tsx
+function TimeWheelColumn({ isOpen, label, options, selectedValue, onSelect }) {
+	const [emblaRef, emblaApi] = useEmblaCarousel({
+		axis: "y",
+		align: "center",
+		containScroll: "keepSnaps",
+		dragFree: true
+	}, useMemo(() => [WheelGesturesPlugin()], []));
+	useEffect(() => {
+		if (!emblaApi || !isOpen) return;
+		emblaApi.reInit();
+		if (selectedValue === void 0) {
+			emblaApi.scrollTo(0, true);
+			return;
+		}
+		emblaApi.scrollTo(selectedValue, true);
+	}, [
+		emblaApi,
+		isOpen,
+		selectedValue
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative w-16",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground mb-2 text-[11px] font-semibold tracking-[0.12em] uppercase",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 top-6 z-20 h-12 bg-linear-to-b from-popover to-transparent" }),
+			/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 z-20 h-12 bg-linear-to-t from-popover to-transparent" }),
+			/* @__PURE__ */ jsx("div", {
+				className: "h-48 overflow-hidden",
+				ref: emblaRef,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex h-full flex-col gap-1 py-4",
+					children: options.map((optionLabel) => /* @__PURE__ */ jsx("div", {
+						className: "shrink-0 basis-8 ",
+						children: /* @__PURE__ */ jsx("button", {
+							className: cn("h-full w-full rounded-md  text-xs font-medium transition-colors", selectedValue === Number(optionLabel) ? "border-primary bg-primary text-primary-foreground" : "border-border bg-background hover:bg-accent hover:text-accent-foreground"),
+							onClick: () => onSelect(optionLabel),
+							type: "button",
+							children: optionLabel
+						})
+					}, optionLabel))
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+export { TimeWheelColumn };
+//# sourceMappingURL=time-wheel-column.js.map

package/dist/date-hour-field/time-wheel-column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-wheel-column.js","names":[],"sources":["../../src/components/date-hour-field/time-wheel-column.tsx"],"sourcesContent":["import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';\nimport useEmblaCarousel from 'embla-carousel-react';\nimport { useEffect, useMemo } from 'react';\n\nimport { cn } from '@/lib/utils';\n\ntype TimeWheelColumnProps = {\n  isOpen: boolean;\n  label: string;\n  options: string[];\n  selectedValue?: number;\n  onSelect: (value: string) => void;\n};\n\nfunction TimeWheelColumn({\n  isOpen,\n  label,\n  options,\n  selectedValue,\n  onSelect,\n}: TimeWheelColumnProps) {\n  const plugins = useMemo(() => [WheelGesturesPlugin()], []);\n  const [emblaRef, emblaApi] = useEmblaCarousel(\n    {\n      axis: 'y',\n      align: 'center',\n      containScroll: 'keepSnaps',\n      dragFree: true,\n    },\n    plugins\n  );\n\n  useEffect(() => {\n    if (!emblaApi || !isOpen) return;\n\n    emblaApi.reInit();\n\n    if (selectedValue === undefined) {\n      emblaApi.scrollTo(0, true);\n      return;\n    }\n\n    emblaApi.scrollTo(selectedValue, true);\n  }, [emblaApi, isOpen, selectedValue]);\n\n  return (\n    <div className=\"relative w-16\">\n      <p className=\"text-muted-foreground mb-2 text-[11px] font-semibold tracking-[0.12em] uppercase\">\n        {label}\n      </p>\n\n      <div className=\"pointer-events-none absolute inset-x-0 top-6 z-20 h-12 bg-linear-to-b from-popover to-transparent\" />\n      <div className=\"pointer-events-none absolute inset-x-0 bottom-0 z-20 h-12 bg-linear-to-t from-popover to-transparent\" />\n\n      <div className=\"h-48 overflow-hidden\" ref={emblaRef}>\n        <div className=\"flex h-full flex-col gap-1 py-4\">\n          {options.map((optionLabel) => (\n            <div className=\"shrink-0 basis-8 \" key={optionLabel}>\n              <button\n                className={cn(\n                  'h-full w-full rounded-md  text-xs font-medium transition-colors',\n                  selectedValue === Number(optionLabel)\n                    ? 'border-primary bg-primary text-primary-foreground'\n                    : 'border-border bg-background hover:bg-accent hover:text-accent-foreground'\n                )}\n                onClick={() => onSelect(optionLabel)}\n                type=\"button\"\n              >\n                {optionLabel}\n              </button>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport { TimeWheelColumn };\n"],"mappings":";;;;;;;AAcA,SAAS,gBAAgB,EACvB,QACA,OACA,SACA,eACA,YACuB;CAEvB,MAAM,CAAC,UAAU,YAAY,iBAC3B;EACE,MAAM;EACN,OAAO;EACP,eAAe;EACf,UAAU;EACX,EAPa,cAAc,CAAC,qBAAqB,CAAC,EAAE,EAAE,CAAC,CASzD;AAED,iBAAgB;AACd,MAAI,CAAC,YAAY,CAAC,OAAQ;AAE1B,WAAS,QAAQ;AAEjB,MAAI,kBAAkB,QAAW;AAC/B,YAAS,SAAS,GAAG,KAAK;AAC1B;;AAGF,WAAS,SAAS,eAAe,KAAK;IACrC;EAAC;EAAU;EAAQ;EAAc,CAAC;AAErC,QACE,qBAAC;EAAI,WAAU;;GACb,oBAAC;IAAE,WAAU;cACV;KACC;GAEJ,oBAAC,SAAI,WAAU,sGAAsG;GACrH,oBAAC,SAAI,WAAU,yGAAyG;GAExH,oBAAC;IAAI,WAAU;IAAuB,KAAK;cACzC,oBAAC;KAAI,WAAU;eACZ,QAAQ,KAAK,gBACZ,oBAAC;MAAI,WAAU;gBACb,oBAAC;OACC,WAAW,GACT,mEACA,kBAAkB,OAAO,YAAY,GACjC,sDACA,2EACL;OACD,eAAe,SAAS,YAAY;OACpC,MAAK;iBAEJ;QACM;QAZ6B,YAalC,CACN;MACE;KACF;;GACF"}

package/dist/date-hour-field.d.ts

@@ -1,35 +1,2 @@
-import { FieldPath, FieldValues, UseControllerProps } from "react-hook-form";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
-import { Matcher } from "react-day-picker";
-
-//#region src/components/date-hour-field/DateHourField.d.ts
-interface DateHourFieldProps<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<UseControllerProps<TFieldValues, TFieldName>, 'disabled'> {
-  label: string;
-  description?: string;
-  className?: string;
-  disabled?: Matcher | Matcher[] | undefined;
-  inputDisabled?: boolean;
-  initialValue?: Date;
-  endMonth?: Date;
-  required?: boolean;
-  help?: string;
-  hourPlaceholder?: string;
-  valueType?: 'date' | 'local-string';
-}
-declare function DateHourField<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({
-  name,
-  label,
-  description,
-  inputDisabled,
-  endMonth,
-  className,
-  disabled,
-  initialValue,
-  required,
-  help,
-  hourPlaceholder,
-  valueType
-}: DateHourFieldProps<TFieldValues, TFieldName>): react_jsx_runtime1.JSX.Element;
-//#endregion
-export { DateHourField, type DateHourFieldProps };
-//# sourceMappingURL=date-hour-field.d.ts.map
+import { DateHourField, DateHourFieldProps } from "./date-hour-field/DateHourField.js";
+export { DateHourField, type DateHourFieldProps };