@timeax/form-palette 0.0.2 → 0.0.4

package/src/presets/shadcn-variants/date.tsx

@@ -1,796 +0,0 @@
-import * as React from "react";
-import { Calendar as CalendarIcon, X as XIcon } from "lucide-react";
-
-import type { VariantBaseProps, ChangeDetail } from "@/variants/shared";
-import type { ShadcnTextVariantProps } from "@/presets/shadcn-variants/text";
-import { Input } from "@/presets/ui/input";
-import { Popover, PopoverTrigger, PopoverContent } from "@/presets/ui/popover";
-import { Calendar } from "@/presets/ui/calendar";
-import { TimeDropdowns } from "../ui/time-dropdowns";
-
-type DateMode = "single" | "range";
-
-export interface DateRange {
-   from?: Date;
-   to?: Date;
-}
-
-type DateValue = Date | DateRange | undefined;
-
-type BaseProps = VariantBaseProps<DateValue>;
-
-// Calendar disabled type from your calendar wrapper
-type DisabledDays = React.ComponentProps<typeof Calendar>["disabled"];
-
-/**
- * Logical temporal "kind" for the field.
- *
- * This controls the default mask + formatting/parsing.
- *
- * - "date"      → yyyy-MM-dd (default)
- * - "datetime"  → yyyy-MM-dd HH:mm
- * - "time"      → HH:mm
- * - "hour"      → HH
- * - "monthYear" → MM/yyyy
- * - "year"      → yyyy
- */
-export type DateKind =
-   | "date"
-   | "datetime"
-   | "time"
-   | "hour"
-   | "monthYear"
-   | "year"
-   | (string & {});
-
-/**
- * Public props for the date variant (legacy + mask extensions).
- */
-export interface DateVariantProps {
-   mode?: DateMode;
-   placeholder?: React.ReactNode;
-
-   clearable?: boolean;
-
-   minDate?: Date;
-   maxDate?: Date;
-   disabledDays?: DisabledDays;
-
-   /**
-    * Pattern for single dates.
-    *
-    * Tokens:
-    * - yyyy → full year
-    * - MM   → month (01–12)
-    * - dd   → day (01–31)
-    * - HH   → hours (00–23)
-    * - mm   → minutes (00–59)
-    *
-    * Default depends on `kind`:
-    * - date      → "yyyy-MM-dd"
-    * - datetime  → "yyyy-MM-dd HH:mm"
-    * - time      → "HH:mm"
-    * - hour      → "HH"
-    * - monthYear → "MM/yyyy"
-    * - year      → "yyyy"
-    */
-   formatSingle?: string;
-
-   /**
-    * String pattern or custom formatter for ranges.
-    *
-    * - string → same token rules as formatSingle, applied to both ends
-    * - function → full control over display text
-    */
-   formatRange?:
-   | string
-   | ((range: DateRange | undefined) => string);
-
-   /**
-    * Separator when formatRange is a string pattern.
-    * Default: " – "
-    */
-   rangeSeparator?: string;
-
-   /**
-    * When true, keep the calendar open after a selection.
-    *
-    * For range mode, the picker also stays open until both
-    * `from` and `to` are chosen.
-    */
-   stayOpenOnSelect?: boolean;
-
-   /**
-    * Controlled open state for the popover.
-    */
-   open?: boolean;
-   onOpenChange?(o: boolean): void;
-
-   /**
-    * Temporal kind (controls default mask + formatting/parsing).
-    *
-    * Default: "date".
-    */
-   kind?: DateKind;
-
-   /**
-    * Optional explicit input mask pattern for the text input.
-    *
-    * If omitted, a sensible default based on `kind` is used.
-    *
-    * Mask tokens follow the same rules as the underlying Input mask:
-    *   9 = digit, a = letter, * = alphanumeric.
-    */
-   inputMask?: string;
-
-   /**
-    * Whether to render the calendar popover.
-    *
-    * Defaults:
-    * - true  for `kind` = "date" | "datetime"
-    * - false for time-only kinds ("time", "hour", "monthYear", "year")
-    */
-   showCalendar?: boolean;
-}
-
-/**
- * We still reuse the Shadcn text UI props (size, density, icons, etc.),
- * but we take over type/value/onValue and the controls.
- */
-type TextUiProps = Omit<
-   ShadcnTextVariantProps,
-   | "type"
-   | "inputMode"
-   | "leadingControl"
-   | "trailingControl"
-   | "value"
-   | "onValue"
->;
-
-/**
- * Full props for the Shadcn-based date variant.
- */
-export type ShadcnDateVariantProps = TextUiProps &
-   DateVariantProps &
-   Pick<BaseProps, "value" | "onValue" | "error">;
-
-// ─────────────────────────────────────────────
-// Helpers
-// ─────────────────────────────────────────────
-
-function isRange(value: DateValue): value is DateRange {
-   return !!value && !(value instanceof Date);
-}
-
-function normalizeValueForMode(
-   value: DateValue,
-   mode: DateMode,
-): { single: Date | undefined; range: DateRange | undefined } {
-   if (mode === "single") {
-      if (value instanceof Date) {
-         return { single: value, range: undefined };
-      }
-      if (isRange(value)) {
-         // prefer "from" when coming from a range
-         return { single: value.from ?? value.to, range: undefined };
-      }
-      return { single: undefined, range: undefined };
-   }
-
-   // range mode
-   if (isRange(value)) {
-      return { single: undefined, range: value };
-   }
-   if (value instanceof Date) {
-      return { single: undefined, range: { from: value } };
-   }
-   return { single: undefined, range: undefined };
-}
-
-function hasSelection(value: DateValue): boolean {
-   if (!value) return false;
-   if (value instanceof Date) return true;
-   return !!value.from || !!value.to;
-}
-
-function isRangeComplete(range: DateRange | undefined): boolean {
-   return !!(range && range.from && range.to);
-}
-
-function pad2(n: number): string {
-   return n.toString().padStart(2, "0");
-}
-
-interface KindConfig {
-   mask: string;
-   singlePattern: string;
-}
-
-function resolveKindConfig(kind: DateKind | undefined): KindConfig {
-   const k = (kind ?? "date") as DateKind;
-
-   switch (k) {
-      case "datetime":
-         return {
-            mask: "9999-99-99 99:99",
-            singlePattern: "yyyy-MM-dd HH:mm",
-         };
-      case "time":
-         return {
-            mask: "99:99",
-            singlePattern: "HH:mm",
-         };
-      case "hour":
-         return {
-            mask: "99",
-            singlePattern: "HH",
-         };
-      case "monthYear":
-         return {
-            mask: "99/9999",
-            singlePattern: "MM/yyyy",
-         };
-      case "year":
-         return {
-            mask: "9999",
-            singlePattern: "yyyy",
-         };
-      case "date":
-      default:
-         return {
-            mask: "9999-99-99",
-            singlePattern: "yyyy-MM-dd",
-         };
-   }
-}
-
-function formatDateWithPattern(
-   date: Date,
-   pattern: string | undefined,
-): string {
-   const p = pattern ?? "yyyy-MM-dd";
-
-   const yyyy = date.getFullYear().toString();
-   const MM = pad2(date.getMonth() + 1);
-   const dd = pad2(date.getDate());
-   const HH = pad2(date.getHours());
-   const mm = pad2(date.getMinutes());
-
-   return p
-      .replace(/yyyy/g, yyyy)
-      .replace(/MM/g, MM)
-      .replace(/dd/g, dd)
-      .replace(/HH/g, HH)
-      .replace(/mm/g, mm);
-}
-
-function formatDisplaySingle(
-   date: Date | undefined,
-   pattern?: string,
-): string {
-   if (!date) return "";
-   return formatDateWithPattern(date, pattern);
-}
-
-function formatDisplayRange(
-   range: DateRange | undefined,
-   formatRange: DateVariantProps["formatRange"],
-   singlePattern?: string,
-   separator?: string,
-): string {
-   if (!range || (!range.from && !range.to)) return "";
-
-   if (typeof formatRange === "function") {
-      return formatRange(range);
-   }
-
-   const pattern = formatRange ?? singlePattern ?? "yyyy-MM-dd";
-   const sep = separator ?? " – ";
-
-   const fromStr = range.from
-      ? formatDateWithPattern(range.from, pattern)
-      : "";
-   const toStr = range.to
-      ? formatDateWithPattern(range.to, pattern)
-      : "";
-
-   if (!fromStr && !toStr) return "";
-   if (!fromStr) return toStr;
-   if (!toStr) return fromStr;
-
-   return `${fromStr}${sep}${toStr}`;
-}
-
-/**
- * Parse a raw digit string (unmasked) into a Date based on `kind`.
- *
- * Returns null when the input is incomplete or invalid.
- */
-function parseRawToDate(rawDigits: string, kind: DateKind): Date | null {
-   const len = rawDigits.length;
-
-   switch (kind) {
-      case "datetime": {
-         if (len < 12) return null;
-         const year = Number(rawDigits.slice(0, 4));
-         const month = Number(rawDigits.slice(4, 6));
-         const day = Number(rawDigits.slice(6, 8));
-         const hour = Number(rawDigits.slice(8, 10));
-         const minute = Number(rawDigits.slice(10, 12));
-         if (!year || month < 1 || month > 12 || day < 1 || day > 31) {
-            return null;
-         }
-         if (hour < 0 || hour > 23 || minute < 0 || minute > 59) {
-            return null;
-         }
-         return new Date(year, month - 1, day, hour, minute, 0, 0);
-      }
-
-      case "time": {
-         if (len < 4) return null;
-         const hour = Number(rawDigits.slice(0, 2));
-         const minute = Number(rawDigits.slice(2, 4));
-         if (hour < 0 || hour > 23 || minute < 0 || minute > 59) {
-            return null;
-         }
-         const d = new Date();
-         d.setSeconds(0, 0);
-         d.setHours(hour, minute);
-         return d;
-      }
-
-      case "hour": {
-         if (len < 2) return null;
-         const hour = Number(rawDigits.slice(0, 2));
-         if (hour < 0 || hour > 23) return null;
-         const d = new Date();
-         d.setSeconds(0, 0);
-         d.setHours(hour, 0);
-         return d;
-      }
-
-      case "monthYear": {
-         if (len < 6) return null;
-         const month = Number(rawDigits.slice(0, 2));
-         const year = Number(rawDigits.slice(2, 6));
-         if (!year || month < 1 || month > 12) {
-            return null;
-         }
-         return new Date(year, month - 1, 1, 0, 0, 0, 0);
-      }
-
-      case "year": {
-         if (len < 4) return null;
-         const year = Number(rawDigits.slice(0, 4));
-         if (!year) return null;
-         return new Date(year, 0, 1, 0, 0, 0, 0);
-      }
-
-      case "date":
-      default: {
-         if (len < 8) return null;
-         const year = Number(rawDigits.slice(0, 4));
-         const month = Number(rawDigits.slice(4, 6));
-         const day = Number(rawDigits.slice(6, 8));
-         if (!year || month < 1 || month > 12 || day < 1 || day > 31) {
-            return null;
-         }
-         return new Date(year, month - 1, day, 0, 0, 0, 0);
-      }
-   }
-}
-
-function meterSafeDigits(masked: string): string {
-   return masked.replace(/\D+/g, "");
-}
-
-// ─────────────────────────────────────────────
-// Component
-// ─────────────────────────────────────────────
-
-export const ShadcnDateVariant = React.forwardRef<
-   HTMLInputElement,
-   ShadcnDateVariantProps
->(function ShadcnDateVariant(props, ref) {
-   const {
-      // variant base bits
-      value,
-      onValue,
-      error,
-
-      // date props
-      mode: modeProp = "single",
-      placeholder,
-      clearable = true,
-      minDate,
-      maxDate,
-      disabledDays,
-      formatSingle: formatSingleProp,
-      formatRange,
-      rangeSeparator,
-      stayOpenOnSelect,
-      open,
-      onOpenChange,
-
-      kind: kindProp = "date",
-      inputMask,
-      showCalendar: showCalendarProp,
-
-      //@ts-ignore text UI bits (size, density, className, icons, etc.)
-      className,
-      ...restTextProps
-   } = props;
-
-   const mode: DateMode = modeProp ?? "single";
-   const kind: DateKind = kindProp ?? "date";
-
-   const kindConfig = resolveKindConfig(kind);
-   const singlePattern = formatSingleProp ?? kindConfig.singlePattern;
-   const resolvedMask = inputMask ?? kindConfig.mask;
-
-   const defaultShowCalendar =
-      kind === "date" || kind === "datetime";
-   const showCalendar =
-      typeof showCalendarProp === "boolean"
-         ? showCalendarProp
-         : defaultShowCalendar;
-
-   const [internalOpen, setInternalOpen] = React.useState(false);
-   const isControlledOpen = open !== undefined;
-   const currentOpen = isControlledOpen ? !!open : internalOpen;
-
-   const handleOpenChange = React.useCallback(
-      (next: boolean) => {
-         if (!isControlledOpen) {
-            setInternalOpen(next);
-         }
-         onOpenChange?.(next);
-      },
-      [isControlledOpen, onOpenChange],
-   );
-
-   const { single, range } = normalizeValueForMode(value, mode);
-
-   const displayValue = React.useMemo(() => {
-      if (mode === "single") {
-         return formatDisplaySingle(single, singlePattern);
-      }
-      return formatDisplayRange(
-         range,
-         formatRange,
-         singlePattern,
-         rangeSeparator,
-      );
-   }, [mode, single, range, singlePattern, formatRange, rangeSeparator]);
-
-   const [localText, setLocalText] = React.useState<string>(displayValue);
-
-   // Sync local text with external value / formatting
-   React.useEffect(() => {
-      setLocalText(displayValue);
-   }, [displayValue]);
-
-   // Time dropdown visibility:
-   // - Only for mode="single"
-   // - For datetime/time/hour kinds
-   const showTimeDropdowns =
-      mode === "single" &&
-      (kind === "datetime" || kind === "time" || kind === "hour");
-
-   const handleSelect = React.useCallback(
-      (next: Date | DateRange | undefined) => {
-         let nextValue: DateValue;
-         let nextRange: DateRange | undefined;
-
-         if (mode === "single") {
-            if (next instanceof Date) {
-               let selected = next;
-
-               // For datetime, preserve previously chosen time (if any)
-               if (kind === "datetime" && single) {
-                  selected = new Date(
-                     selected.getFullYear(),
-                     selected.getMonth(),
-                     selected.getDate(),
-                     single.getHours(),
-                     single.getMinutes(),
-                     single.getSeconds(),
-                     0,
-                  );
-               }
-
-               nextValue = selected;
-            } else {
-               nextValue = undefined;
-            }
-            nextRange = undefined;
-         } else {
-            if (next && next instanceof Date) {
-               nextRange = { from: next };
-            } else {
-               nextRange = (next as DateRange | undefined) ?? undefined;
-            }
-            nextValue = nextRange;
-         }
-
-         const rangeComplete =
-            mode === "range" ? isRangeComplete(nextRange) : !!nextValue;
-
-         const detail: ChangeDetail<{
-            mode: DateMode;
-            from: "calendar";
-            rangeComplete: boolean;
-         }> = {
-            source: "variant",
-            raw: nextValue,
-            nativeEvent: undefined,
-            meta: {
-               mode,
-               from: "calendar",
-               rangeComplete,
-            },
-         };
-
-         onValue?.(nextValue, detail);
-
-         const shouldStayOpen =
-            stayOpenOnSelect ||
-            (mode === "range" && !rangeComplete);
-
-         if (!shouldStayOpen) {
-            handleOpenChange(false);
-         }
-      },
-      [mode, stayOpenOnSelect, onValue, handleOpenChange, kind, single],
-   );
-
-   const handleTimeChange = React.useCallback(
-      (next: Date | undefined) => {
-         if (!next) {
-            const detail: ChangeDetail<{
-               mode: DateMode;
-               kind: DateKind;
-               from: "time";
-               cleared: boolean;
-            }> = {
-               source: "variant",
-               raw: undefined,
-               nativeEvent: undefined,
-               meta: {
-                  mode,
-                  kind,
-                  from: "time",
-                  cleared: true,
-               },
-            };
-            onValue?.(undefined, detail);
-            return;
-         }
-
-         const detail: ChangeDetail<{
-            mode: DateMode;
-            kind: DateKind;
-            from: "time";
-         }> = {
-            source: "variant",
-            raw: next,
-            nativeEvent: undefined,
-            meta: {
-               mode,
-               kind,
-               from: "time",
-            },
-         };
-
-         onValue?.(next, detail);
-      },
-      [mode, kind, onValue],
-   );
-
-   const handleClear = React.useCallback(
-      (ev: React.MouseEvent) => {
-         ev.preventDefault();
-         ev.stopPropagation();
-
-         const detail: ChangeDetail<{
-            mode: DateMode;
-            cleared: boolean;
-         }> = {
-            source: "variant",
-            raw: undefined,
-            nativeEvent: ev as any,
-            meta: {
-               mode,
-               cleared: true,
-            },
-         };
-         onValue?.(undefined, detail);
-      },
-      [mode, onValue],
-   );
-
-   const hasValue = hasSelection(value);
-   const placeholderText =
-      typeof placeholder === "string"
-         ? placeholder
-         : mode === "range"
-            ? "Select date range"
-            : "Select date";
-
-   /**
-    * Manual text input (mask-driven) — only for `mode = "single"`.
-    * Range editing via text gets very hairy, so we keep range as
-    * a calendar-driven control for now.
-    */
-   const handleInputChange = React.useCallback(
-      (event: any) => {
-         if (mode !== "single") return;
-
-         const masked = (event?.value ??
-            event?.target?.value ??
-            "") as string;
-
-         setLocalText(masked);
-
-         const digits = meterSafeDigits(masked);
-
-         if (!digits.length) {
-            const detail: ChangeDetail<{
-               mode: DateMode;
-               kind: DateKind;
-               from: "text";
-               cleared: boolean;
-            }> = {
-               source: "variant",
-               raw: undefined,
-               nativeEvent: event,
-               meta: {
-                  mode,
-                  kind,
-                  from: "text",
-                  cleared: true,
-               },
-            };
-            onValue?.(undefined, detail);
-            return;
-         }
-
-         const parsed = parseRawToDate(digits, kind);
-         if (!parsed) {
-            // Incomplete or invalid — keep local text but don't
-            // push a Date value yet.
-            return;
-         }
-
-         // If min/max are set, enforce them here.
-         if (minDate && parsed < minDate) return;
-         if (maxDate && parsed > maxDate) return;
-
-         const detail: ChangeDetail<{
-            mode: DateMode;
-            kind: DateKind;
-            from: "text";
-         }> = {
-            source: "variant",
-            raw: parsed,
-            nativeEvent: event,
-            meta: {
-               mode,
-               kind,
-               from: "text",
-            },
-         };
-
-         onValue?.(parsed, detail);
-      },
-      [mode, kind, minDate, maxDate, onValue],
-   );
-
-   const trailingControl = (
-      <div
-         className="flex h-full items-center gap-1 pr-1"
-         data-slot="date-controls"
-      >
-         {clearable && hasValue && (
-            <button
-               type="button"
-               onClick={handleClear}
-               className="inline-flex h-6 w-6 items-center justify-center rounded-full text-xs text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
-               aria-label="Clear date"
-               data-slot="date-clear"
-            >
-               <XIcon className="h-3 w-3" />
-            </button>
-         )}
-
-         {showCalendar && (
-            <button
-               type="button"
-               onClick={() => handleOpenChange(!currentOpen)}
-               className="inline-flex h-6 w-6 items-center justify-center rounded-full text-xs text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
-               aria-label="Open calendar"
-               data-slot="date-toggle"
-            >
-               <CalendarIcon className="h-4 w-4" />
-            </button>
-         )}
-      </div>
-   );
-
-   const inputNode = (
-      <Input
-         ref={ref}
-         {...restTextProps}
-         type="text"
-         value={localText}
-         onChange={mode === "single" ? (handleInputChange as any) : undefined}
-         readOnly={mode !== "single" && showCalendar}
-         placeholder={placeholderText}
-         trailingControl={trailingControl}
-         aria-invalid={error ? "true" : undefined}
-         // Mask only makes sense when we allow typing.
-         mask={mode === "single" ? resolvedMask : undefined}
-      />
-   );
-
-   // If calendar is disabled completely, just render the masked input.
-   if (!showCalendar) {
-      return (
-         <div className={className} data-slot="date-field">
-            {inputNode}
-         </div>
-      );
-   }
-
-   const showCalendarBody = kind !== "time" && kind !== "hour";
-
-   // Calendar / time popover.
-   return (
-      <Popover open={currentOpen} onOpenChange={handleOpenChange}>
-         <PopoverTrigger asChild>
-            <div className={className} data-slot="date-field">
-               {inputNode}
-            </div>
-         </PopoverTrigger>
-         <PopoverContent
-            align="start"
-            className="w-auto p-0"
-            data-slot="date-popover"
-         >
-            <div className="flex flex-col gap-2 p-2">
-               {showCalendarBody && (
-                  <Calendar
-                     mode={mode}
-                     //@ts-ignore date UI bits
-                     selected={mode === "single" ? single : range}
-                     onSelect={handleSelect as any}
-                     disabled={disabledDays}
-                     fromDate={minDate}
-                     toDate={maxDate}
-                     initialFocus
-                  />
-               )}
-
-               {showTimeDropdowns && (
-                  <TimeDropdowns
-                     value={single ?? undefined}
-                     onChange={handleTimeChange}
-                     label={
-                        kind === "datetime"
-                           ? "Time"
-                           : undefined
-                     }
-                     minuteStep={5}
-                     showSeconds={false}
-                     density="compact"
-                  />
-               )}
-            </div>
-         </PopoverContent>
-      </Popover>
-   );
-});
-
-ShadcnDateVariant.displayName = "ShadcnDateVariant";
-
-export default ShadcnDateVariant;