@sonordev/site-kit 2.2.2 → 2.2.3

package/dist/forms/index.d.mts

@@ -439,4 +439,17 @@ declare function useFormTracking({ formId, totalSteps, enabled, debug, }: UseFor
 /** Shown when the API omits or returns an empty `success_message`. */
 declare const DEFAULT_FORM_SUCCESS_MESSAGE = "Thank you for your submission! We will be in touch soon.";
 
-export { type CreateFormInput, DEFAULT_FORM_SUCCESS_MESSAGE, type FieldType, type Form, FormClient, type FormDefinition, type FormField$1 as FormField, FormField as FormFieldComponent, FormField$2 as FormFieldConfig, type FormStep, FormSubmission, type FormType, type FormsListOptions, ManagedForm, ManagedFormConfig, type UpdateFormInput, type UseFormOptions, type UseFormReturn, configureFormsApi, defineForm, field, formsApi, initializeForms, useForm, useFormTracking };
+interface DatePickerProps {
+    value: string;
+    onChange: (value: string) => void;
+    id?: string;
+    name?: string;
+    required?: boolean;
+    minDate?: string;
+    placeholder?: string;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+declare function DatePicker({ value, onChange, id, name, required, minDate, placeholder, className, style, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+
+export { type CreateFormInput, DEFAULT_FORM_SUCCESS_MESSAGE, DatePicker, type FieldType, type Form, FormClient, type FormDefinition, type FormField$1 as FormField, FormField as FormFieldComponent, FormField$2 as FormFieldConfig, type FormStep, FormSubmission, type FormType, type FormsListOptions, ManagedForm, ManagedFormConfig, type UpdateFormInput, type UseFormOptions, type UseFormReturn, configureFormsApi, defineForm, field, formsApi, initializeForms, useForm, useFormTracking };

package/dist/forms/index.d.ts

@@ -439,4 +439,17 @@ declare function useFormTracking({ formId, totalSteps, enabled, debug, }: UseFor
 /** Shown when the API omits or returns an empty `success_message`. */
 declare const DEFAULT_FORM_SUCCESS_MESSAGE = "Thank you for your submission! We will be in touch soon.";
 
-export { type CreateFormInput, DEFAULT_FORM_SUCCESS_MESSAGE, type FieldType, type Form, FormClient, type FormDefinition, type FormField$1 as FormField, FormField as FormFieldComponent, FormField$2 as FormFieldConfig, type FormStep, FormSubmission, type FormType, type FormsListOptions, ManagedForm, ManagedFormConfig, type UpdateFormInput, type UseFormOptions, type UseFormReturn, configureFormsApi, defineForm, field, formsApi, initializeForms, useForm, useFormTracking };
+interface DatePickerProps {
+    value: string;
+    onChange: (value: string) => void;
+    id?: string;
+    name?: string;
+    required?: boolean;
+    minDate?: string;
+    placeholder?: string;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+declare function DatePicker({ value, onChange, id, name, required, minDate, placeholder, className, style, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+
+export { type CreateFormInput, DEFAULT_FORM_SUCCESS_MESSAGE, DatePicker, type FieldType, type Form, FormClient, type FormDefinition, type FormField$1 as FormField, FormField as FormFieldComponent, FormField$2 as FormFieldConfig, type FormStep, FormSubmission, type FormType, type FormsListOptions, ManagedForm, ManagedFormConfig, type UpdateFormInput, type UseFormOptions, type UseFormReturn, configureFormsApi, defineForm, field, formsApi, initializeForms, useForm, useFormTracking };

package/dist/forms/index.js

@@ -885,6 +885,261 @@ function useForm(formIdOrSlug, options = {}) {
     reset
   };
 }
+var DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+function pad(n) {
+  return n < 10 ? `0${n}` : `${n}`;
+}
+function toDateStr(y, m, d) {
+  return `${y}-${pad(m + 1)}-${pad(d)}`;
+}
+function parseDate(str) {
+  if (!str) return null;
+  const [y, m, d] = str.split("-").map(Number);
+  if (!y || !m || !d) return null;
+  return { year: y, month: m - 1, day: d };
+}
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function getFirstDayOfMonth(year, month) {
+  return new Date(year, month, 1).getDay();
+}
+function formatDisplay(dateStr) {
+  const parsed = parseDate(dateStr);
+  if (!parsed) return "";
+  return `${MONTHS[parsed.month]} ${parsed.day}, ${parsed.year}`;
+}
+function DatePicker({
+  value,
+  onChange,
+  id,
+  name,
+  required,
+  minDate,
+  placeholder = "Select a date",
+  className = "",
+  style
+}) {
+  const today = /* @__PURE__ */ new Date();
+  const todayStr = toDateStr(today.getFullYear(), today.getMonth(), today.getDate());
+  const effectiveMin = minDate || todayStr;
+  const parsed = parseDate(value);
+  const [viewYear, setViewYear] = react.useState(parsed?.year || today.getFullYear());
+  const [viewMonth, setViewMonth] = react.useState(parsed?.month ?? today.getMonth());
+  const [open, setOpen] = react.useState(false);
+  const containerRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+  react.useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [open]);
+  const prevMonth = react.useCallback(() => {
+    if (viewMonth === 0) {
+      setViewMonth(11);
+      setViewYear((y) => y - 1);
+    } else setViewMonth((m) => m - 1);
+  }, [viewMonth]);
+  const nextMonth = react.useCallback(() => {
+    if (viewMonth === 11) {
+      setViewMonth(0);
+      setViewYear((y) => y + 1);
+    } else setViewMonth((m) => m + 1);
+  }, [viewMonth]);
+  const selectDay = react.useCallback((day) => {
+    const dateStr = toDateStr(viewYear, viewMonth, day);
+    onChange(dateStr);
+    setOpen(false);
+  }, [viewYear, viewMonth, onChange]);
+  const isDisabled = react.useCallback((day) => {
+    const dateStr = toDateStr(viewYear, viewMonth, day);
+    return dateStr < effectiveMin;
+  }, [viewYear, viewMonth, effectiveMin]);
+  const isSelected = react.useCallback((day) => {
+    if (!value) return false;
+    return toDateStr(viewYear, viewMonth, day) === value;
+  }, [viewYear, viewMonth, value]);
+  const isToday = react.useCallback((day) => {
+    return toDateStr(viewYear, viewMonth, day) === todayStr;
+  }, [viewYear, viewMonth, todayStr]);
+  const daysInMonth = getDaysInMonth(viewYear, viewMonth);
+  const firstDay = getFirstDayOfMonth(viewYear, viewMonth);
+  const weeks = [];
+  let week = Array(firstDay).fill(null);
+  for (let d = 1; d <= daysInMonth; d++) {
+    week.push(d);
+    if (week.length === 7) {
+      weeks.push(week);
+      week = [];
+    }
+  }
+  if (week.length > 0) {
+    while (week.length < 7) week.push(null);
+    weeks.push(week);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: `sk-datepicker ${className}`, style: { position: "relative", ...style }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: value || "" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        id,
+        onClick: () => setOpen(!open),
+        "aria-required": required,
+        "aria-expanded": open,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          width: "100%",
+          padding: "var(--sk-input-padding, 10px 12px)",
+          backgroundColor: "var(--sk-input-bg, #fff)",
+          border: `1px solid ${open ? "var(--sk-input-border-focus, #3b82f6)" : "var(--sk-input-border, #d1d5db)"}`,
+          borderRadius: "var(--sk-input-radius, 0.375rem)",
+          fontSize: "var(--sk-font-size, 14px)",
+          color: value ? "var(--sk-form-success-text, #111)" : "var(--sk-text-tertiary, #9ca3af)",
+          cursor: "pointer",
+          outline: "none",
+          textAlign: "left"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: value ? formatDisplay(value) : placeholder }),
+          /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { opacity: 0.5, flexShrink: 0 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
+          ] })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: "100%",
+          left: 0,
+          right: 0,
+          marginTop: "4px",
+          backgroundColor: "var(--sk-input-bg, #fff)",
+          border: "1px solid var(--sk-input-border, #d1d5db)",
+          borderRadius: "var(--sk-input-radius, 0.375rem)",
+          boxShadow: "0 10px 25px rgba(0,0,0,0.3)",
+          zIndex: 50,
+          padding: "12px",
+          minWidth: "280px"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "12px" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: prevMonth,
+                style: { background: "none", border: "none", cursor: "pointer", padding: "4px 8px", color: "var(--sk-label-color, #6b7280)", fontSize: "18px", lineHeight: 1 },
+                "aria-label": "Previous month",
+                children: "\u2039"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 600, fontSize: "14px", color: "var(--sk-form-success-text, #111)" }, children: [
+              MONTHS[viewMonth],
+              " ",
+              viewYear
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: nextMonth,
+                style: { background: "none", border: "none", cursor: "pointer", padding: "4px 8px", color: "var(--sk-label-color, #6b7280)", fontSize: "18px", lineHeight: 1 },
+                "aria-label": "Next month",
+                children: "\u203A"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "2px", marginBottom: "4px" }, children: DAYS.map((d) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", fontSize: "11px", fontWeight: 600, color: "var(--sk-text-tertiary, #9ca3af)", padding: "4px 0", textTransform: "uppercase", letterSpacing: "0.05em" }, children: d }, d)) }),
+          weeks.map((week2, wi) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "2px" }, children: week2.map((day, di) => {
+            if (day === null) {
+              return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "6px" } }, di);
+            }
+            const disabled = isDisabled(day);
+            const selected = isSelected(day);
+            const todayMark = isToday(day);
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                disabled,
+                onClick: () => selectDay(day),
+                style: {
+                  padding: "6px",
+                  textAlign: "center",
+                  fontSize: "13px",
+                  fontWeight: selected ? 700 : todayMark ? 600 : 400,
+                  borderRadius: "6px",
+                  border: todayMark && !selected ? "1px solid var(--sk-primary, #3b82f6)" : "1px solid transparent",
+                  background: selected ? "var(--sk-primary, #3b82f6)" : "transparent",
+                  color: disabled ? "var(--sk-text-tertiary, #9ca3af)" : selected ? "#fff" : "var(--sk-form-success-text, #111)",
+                  cursor: disabled ? "not-allowed" : "pointer",
+                  opacity: disabled ? 0.4 : 1,
+                  transition: "background 0.15s, color 0.15s"
+                },
+                onMouseEnter: (e) => {
+                  if (!disabled && !selected) {
+                    e.target.style.background = "var(--sk-input-border, #e5e7eb)";
+                  }
+                },
+                onMouseLeave: (e) => {
+                  if (!disabled && !selected) {
+                    e.target.style.background = "transparent";
+                  }
+                },
+                "aria-label": `${MONTHS[viewMonth]} ${day}, ${viewYear}`,
+                "aria-selected": selected,
+                children: day
+              },
+              di
+            );
+          }) }, wi)),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "8px", textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                onChange(todayStr);
+                setOpen(false);
+              },
+              style: {
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                fontSize: "12px",
+                fontWeight: 600,
+                color: "var(--sk-primary, #3b82f6)",
+                padding: "4px 8px"
+              },
+              children: "Today"
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
 function normalizeOptions(options) {
   if (!options) return [];
   if (Array.isArray(options)) {
@@ -1056,16 +1311,15 @@ function FormField({ field: field2, value, error, onChange, classPrefix = "sk-fo
       ] }, option.value);
     }) }),
     field2.field_type === "date" && /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
+      DatePicker,
       {
         id: inputId,
-        className: `${classPrefix}__input ${classPrefix}__input--date`,
-        type: "date",
         name: field2.slug,
         value: String(value || ""),
+        onChange,
         required: field2.is_required,
-        onChange: (e) => onChange(e.target.value),
-        style: baseInputStyle
+        placeholder: field2.placeholder || "Select a date",
+        className: `${classPrefix}__input ${classPrefix}__input--date`
       }
     ),
     field2.field_type === "time" && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1505,6 +1759,7 @@ function ManagedForm({
 }
 
 exports.DEFAULT_FORM_SUCCESS_MESSAGE = DEFAULT_FORM_SUCCESS_MESSAGE;
+exports.DatePicker = DatePicker;
 exports.FormClient = FormClient;
 exports.FormFieldComponent = FormField;
 exports.ManagedForm = ManagedForm;