@inspirecn/react 1.0.0

package/dist/components/form/fields/CheckboxField.js

@@ -0,0 +1,66 @@
+import { useFormContext as d } from "react-hook-form";
+import { InfoIcon as p } from "lucide-react";
+import { cn as l } from "../../../lib/utils.js";
+import { Checkbox as h } from "../../checkbox/Checkbox.js";
+import { FormField as f, FormItem as F, FormControl as N, FormMessage as C } from "../Form.js";
+import { Tooltip as g } from "../../tooltip/Tooltip.js";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+const k = ({
+  name: o,
+  label: r,
+  disabled: s = !1,
+  required: m = !1,
+  className: a,
+  labelInfo: c,
+  labelOptional: i
+}) => {
+  const {
+    control: x
+  } = d();
+  return /* @__PURE__ */ e(f, {
+    control: x,
+    name: o,
+    render: ({
+      field: n
+    }) => /* @__PURE__ */ t(F, {
+      className: l(a),
+      children: [/* @__PURE__ */ e(N, {
+        children: /* @__PURE__ */ t("div", {
+          className: "flex items-center gap-2",
+          children: [/* @__PURE__ */ e(h, {
+            checked: n.value,
+            onCheckedChange: n.onChange,
+            disabled: s,
+            id: o
+          }), r && /* @__PURE__ */ t("label", {
+            htmlFor: o,
+            className: l("flex select-none items-center gap-2 text-heading-xs! font-normal text-text-primary cursor-pointer", s && "cursor-not-allowed opacity-50"),
+            children: [/* @__PURE__ */ t("span", {
+              className: "flex items-center gap-1",
+              children: [r, m && /* @__PURE__ */ e("span", {
+                className: "text-delete",
+                children: "*"
+              }), i && /* @__PURE__ */ e("span", {
+                className: "text-text-secondary text-xs ml-1",
+                children: "(optional)"
+              })]
+            }), c && /* @__PURE__ */ e(g, {
+              text: c,
+              side: "top",
+              sideOffset: 5,
+              children: /* @__PURE__ */ e(p, {
+                className: "text-text-secondary size-4 cursor-help shrink-0"
+              })
+            })]
+          })]
+        })
+      }), /* @__PURE__ */ e(C, {
+        className: "mt-1 text-xs text-delete"
+      })]
+    })
+  });
+};
+k.displayName = "CheckboxField";
+export {
+  k as CheckboxField
+};

package/dist/components/form/fields/CheckboxGroupField.d.ts

@@ -0,0 +1,50 @@
+import { FieldValues, Path } from 'react-hook-form';
+type Option = {
+    text: string;
+    value: string;
+};
+type Props<T extends FieldValues> = {
+    name: Path<T>;
+    label?: string;
+    options: Option[];
+    className?: string;
+    disabled?: boolean;
+    column?: boolean;
+    required?: boolean;
+    labelInfo?: string;
+    minRequired?: number;
+};
+/**
+ * CheckboxGroupField. A checkbox group field component.
+ *
+ * @param name - The name of the field.
+ * @param label - The label of the field.
+ * @param options - The options of the field.
+ * @param className - The class name of the field.
+ * @param disabled - The disabled flag of the field.
+ * @param column - The column flag of the field.
+ * @param required - The required flag of the field.
+ * @param labelInfo - Additional information for the group label.
+ * @param minRequired - The minimum number of checkboxes that must be selected.
+ * @returns A checkbox group field component.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxGroupField
+ *   name="skills"
+ *   label="Skills"
+ *   options={[
+ *     { text: 'React', value: 'react' },
+ *     { text: 'Vue', value: 'vue' },
+ *     { text: 'Angular', value: 'angular' },
+ *   ]}
+ *   minRequired={2}
+ * />
+ * ```
+ */
+export declare const CheckboxGroupField: {
+    <T extends FieldValues>({ name, label, options, className, disabled, column, required, labelInfo, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=CheckboxGroupField.d.ts.map

package/dist/components/form/fields/CheckboxGroupField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroupField.d.ts","sourceRoot":"","sources":["../../../../src/components/form/fields/CheckboxGroupField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,IAAI,EAAkB,MAAM,iBAAiB,CAAC;AAWpE,KAAK,MAAM,GAAG;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,KAAK,CAAC,CAAC,SAAS,WAAW,IAAI;IAClC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,eAAO,MAAM,kBAAkB;KAAI,CAAC,SAAS,WAAW,+EASrD,KAAK,CAAC,CAAC,CAAC;;CA0DV,CAAC"}

package/dist/components/form/fields/CheckboxGroupField.js

@@ -0,0 +1,64 @@
+import { useFormContext as f } from "react-hook-form";
+import { cn as C } from "../../../lib/utils.js";
+import { Checkbox as F } from "../../checkbox/Checkbox.js";
+import { FormField as v, FormItem as g, FormLabel as k, FormControl as N, FormMessage as b } from "../Form.js";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+const y = ({
+  name: t,
+  label: o,
+  options: n,
+  className: u,
+  disabled: d = !1,
+  column: x = !0,
+  required: s = !1,
+  labelInfo: m
+}) => {
+  const {
+    control: i
+  } = f();
+  return /* @__PURE__ */ e(v, {
+    control: i,
+    name: t,
+    render: ({
+      field: l
+    }) => {
+      const a = Array.isArray(l.value) ? l.value : [];
+      return /* @__PURE__ */ c(g, {
+        className: u,
+        children: [o && /* @__PURE__ */ c(k, {
+          children: [/* @__PURE__ */ e("span", {
+            children: o
+          }), s && /* @__PURE__ */ e("span", {
+            className: "ml-1 text-delete",
+            "aria-label": "required",
+            children: "*"
+          }), m && /* @__PURE__ */ e("span", {
+            className: "text-muted-foreground ml-1 text-sm",
+            children: m
+          })]
+        }), /* @__PURE__ */ e(N, {
+          children: /* @__PURE__ */ e("div", {
+            className: C("flex gap-4", x ? "flex-col" : "flex-row flex-wrap"),
+            role: "group",
+            "aria-required": s,
+            children: n.map((r) => /* @__PURE__ */ e(F, {
+              id: `${t}-${r.value}`,
+              checked: a.includes(r.value),
+              onCheckedChange: (h) => {
+                h ? l.onChange([...a, r.value]) : l.onChange(a.filter((p) => p !== r.value));
+              },
+              disabled: d,
+              label: r.text
+            }, r.value))
+          })
+        }), /* @__PURE__ */ e(b, {
+          className: "mt-1 text-xs text-delete"
+        })]
+      });
+    }
+  });
+};
+y.displayName = "CheckboxGroupField";
+export {
+  y as CheckboxGroupField
+};

package/dist/components/form/fields/ColorPickerField.d.ts

@@ -0,0 +1,12 @@
+import { FieldValues, Path } from 'react-hook-form';
+export type ColorPickerFieldProps<T extends FieldValues> = {
+    name: Path<T>;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    className?: string;
+    disabled?: boolean;
+    presetColors?: string[];
+};
+export declare const ColorPickerField: <T extends FieldValues>({ name, label, placeholder, required, className, disabled, presetColors, }: ColorPickerFieldProps<T>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ColorPickerField.d.ts.map

package/dist/components/form/fields/ColorPickerField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerField.d.ts","sourceRoot":"","sources":["../../../../src/components/form/fields/ColorPickerField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,IAAI,EAAkB,MAAM,iBAAiB,CAAC;AAQpE,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,WAAW,IAAI;IACzD,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC;AAsBF,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,WAAW,EAAE,4EAQrD,qBAAqB,CAAC,CAAC,CAAC,4CAqG1B,CAAC"}

package/dist/components/form/fields/ColorPickerField.js

@@ -0,0 +1,140 @@
+import { useState as C } from "react";
+import { useFormContext as x } from "react-hook-form";
+import { FormField as N, FormItem as y, FormControl as F, FormMessage as P } from "../Form.js";
+import { cn as t } from "@inspirecn/ui/lib/utils";
+import { Label as d } from "../../label/Label.js";
+import { Button as O } from "../../button/Button.js";
+import { Popover as k, PopoverTrigger as w, PopoverContent as E } from "../../popover/Popover.js";
+import { Input as I } from "../../input/Input.js";
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+const L = [
+  "#0ea5e9",
+  // sky-500
+  "#06b6d4",
+  // cyan-500
+  "#10b981",
+  // emerald-500
+  "#22c55e",
+  // green-500
+  "#8b5cf6",
+  // violet-500
+  "#a855f7",
+  // purple-500
+  "#ec4899",
+  // pink-500
+  "#ef4444",
+  // red-500
+  "#f97316",
+  // orange-500
+  "#f59e0b",
+  // amber-500
+  "#eab308",
+  // yellow-500
+  "#84cc16",
+  // lime-500
+  "#06b6d4",
+  // cyan-500
+  "#10b981",
+  // emerald-500
+  "#6b7280",
+  // gray-500
+  "#374151",
+  // gray-700
+  "#1f2937"
+  // gray-800
+], D = ({
+  name: p,
+  label: m,
+  placeholder: f = "Select a color",
+  required: l = !1,
+  className: h,
+  disabled: i = !1,
+  presetColors: u = L
+}) => {
+  const {
+    control: b
+  } = x(), [v, c] = C(!1), g = (e) => e ? e.startsWith("#") ? e.toUpperCase() : `#${e.toUpperCase()}` : "";
+  return /* @__PURE__ */ r(N, {
+    control: b,
+    name: p,
+    render: ({
+      field: e,
+      fieldState: n
+    }) => /* @__PURE__ */ a(y, {
+      className: t(h),
+      children: [m && /* @__PURE__ */ r(d, {
+        htmlFor: e.name,
+        required: l,
+        optional: !l,
+        children: m
+      }), /* @__PURE__ */ r(F, {
+        children: /* @__PURE__ */ a("div", {
+          className: "flex gap-2",
+          children: [/* @__PURE__ */ a(k, {
+            open: v,
+            onOpenChange: c,
+            children: [/* @__PURE__ */ r(w, {
+              asChild: !0,
+              children: /* @__PURE__ */ r(O, {
+                type: "button",
+                variant: "outline",
+                className: t("h-10 w-12 border-2 p-1", n.error && "border-destructive"),
+                disabled: i,
+                children: /* @__PURE__ */ r("div", {
+                  className: "border-border h-full w-full rounded-sm border",
+                  style: {
+                    backgroundColor: e.value || "#ffffff"
+                  }
+                })
+              })
+            }), /* @__PURE__ */ r(E, {
+              className: "w-64 p-4",
+              align: "start",
+              children: /* @__PURE__ */ r("div", {
+                className: "space-y-4",
+                children: /* @__PURE__ */ a("div", {
+                  children: [/* @__PURE__ */ r(d, {
+                    className: "text-sm font-medium",
+                    children: "Preset Colors"
+                  }), /* @__PURE__ */ r("div", {
+                    className: "mt-2 grid grid-cols-6 gap-2",
+                    children: u.map((o, s) => /* @__PURE__ */ r("button", {
+                      type: "button",
+                      className: t("h-8 w-8 rounded-sm border-2 transition-all hover:scale-110", e.value === o ? "border-primary ring-primary/20 ring-2" : "border-border hover:border-primary/50"),
+                      style: {
+                        backgroundColor: o
+                      },
+                      onClick: () => {
+                        e.onChange(o), c(!1);
+                      },
+                      title: o
+                    }, `${o}-${s}`))
+                  })]
+                })
+              })
+            })]
+          }), /* @__PURE__ */ r("div", {
+            className: "flex-1",
+            children: /* @__PURE__ */ r(I, {
+              type: "text",
+              placeholder: f,
+              value: e.value || "",
+              onChange: (o) => {
+                const s = g(o.target.value);
+                e.onChange(s);
+              },
+              className: t("font-mono text-sm", n.error && "border-destructive"),
+              disabled: i,
+              hasError: !!n.error
+            })
+          })]
+        })
+      }), /* @__PURE__ */ r(P, {
+        className: "line-clamp-1 text-xs"
+      })]
+    })
+  });
+};
+export {
+  D as ColorPickerField
+};

package/dist/components/form/fields/ComboboxField.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { FieldValues, Path } from 'react-hook-form';
+import { ComboboxOption, FetchOptionsFunction } from '../../combobox/Combobox';
+type ComboboxFieldProps<T extends FieldValues, O extends object = Record<string, unknown>> = {
+    name: Path<T>;
+    label?: string;
+    required?: boolean;
+    className?: string;
+    inputClass?: string;
+    options?: ComboboxOption<O>[];
+    fetchOptions?: FetchOptionsFunction<O>;
+    async?: boolean;
+    multi?: boolean;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyMessage?: string;
+    loadingMessage?: string;
+    errorMessage?: string;
+    debounceMs?: number;
+    width?: string;
+    allowCreation?: boolean;
+    createItemLabel?: string;
+    onCreateItem?: (value: string) => void | Promise<void>;
+    renderOption?: (option: ComboboxOption<O>, isSelected: boolean) => ReactNode;
+    renderCreateItem?: (value: string, onClick: () => void) => ReactNode;
+};
+export declare const ComboboxField: {
+    <T extends FieldValues, O extends object = Record<string, unknown>>({ name, label, required, className, inputClass, options, fetchOptions, async, multi, placeholder, searchPlaceholder, emptyMessage, loadingMessage, errorMessage, debounceMs, width, allowCreation, createItemLabel, onCreateItem, renderOption, renderCreateItem, }: ComboboxFieldProps<T, O>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=ComboboxField.d.ts.map

package/dist/components/form/fields/ComboboxField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxField.d.ts","sourceRoot":"","sources":["../../../../src/components/form/fields/ComboboxField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAkB,MAAM,iBAAiB,CAAC;AAEpE,OAAO,EAEL,cAAc,EACd,oBAAoB,EACrB,MAAM,yBAAyB,CAAC;AASjC,KAAK,kBAAkB,CACrB,CAAC,SAAS,WAAW,EACrB,CAAC,SAAS,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IACxC;IACF,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,OAAO,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,YAAY,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAGhB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAGvD,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IAC7E,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;CACtE,CAAC;AAEF,eAAO,MAAM,aAAa;KACxB,CAAC,SAAS,WAAW,EACrB,CAAC,SAAS,MAAM,iSAuBf,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC;;CA2D1B,CAAC"}

package/dist/components/form/fields/ComboboxField.js

@@ -0,0 +1,93 @@
+import { useFormContext as V } from "react-hook-form";
+import { cn as m } from "../../../lib/utils.js";
+import { Combobox as k } from "../../combobox/Combobox.js";
+import { FormField as q, FormItem as z, FormLabel as A, FormControl as B, FormMessage as D } from "../Form.js";
+import { jsx as a, jsxs as c } from "react/jsx-runtime";
+const E = ({
+  name: n,
+  label: l,
+  required: d = !1,
+  className: i,
+  inputClass: u,
+  options: v,
+  fetchOptions: x,
+  async: f,
+  multi: o = !1,
+  placeholder: g = "Select an option",
+  searchPlaceholder: h,
+  emptyMessage: C = "No results found.",
+  loadingMessage: F = "Loading options...",
+  errorMessage: b = "Something went wrong",
+  debounceMs: N = 300,
+  width: p,
+  allowCreation: y = !1,
+  createItemLabel: S = "Create",
+  onCreateItem: j,
+  renderOption: w,
+  renderCreateItem: L
+}) => {
+  const {
+    control: M
+  } = V();
+  return /* @__PURE__ */ a(q, {
+    control: M,
+    name: n,
+    render: ({
+      field: r,
+      fieldState: {
+        error: I
+      }
+    }) => /* @__PURE__ */ c(z, {
+      className: m("flex flex-col", i),
+      children: [l && /* @__PURE__ */ c(A, {
+        htmlFor: n,
+        children: [l, d && /* @__PURE__ */ a("span", {
+          className: "text-destructive ml-1",
+          children: "*"
+        })]
+      }), /* @__PURE__ */ a(B, {
+        children: /* @__PURE__ */ a(k, {
+          options: v,
+          fetchOptions: x,
+          async: f,
+          multi: o,
+          value: o ? void 0 : r.value,
+          multiValue: o ? r.value : void 0,
+          onChange: o ? void 0 : (e) => {
+            const s = typeof e == "string" ? e : e == null ? void 0 : e.value;
+            r.onChange(s);
+          },
+          onMultiChange: o ? (e) => {
+            if (!e) {
+              r.onChange([]);
+              return;
+            }
+            const s = e.map((t) => typeof t == "string" ? t : t.value);
+            r.onChange(s);
+          } : void 0,
+          placeholder: g,
+          searchPlaceholder: h,
+          emptyMessage: C,
+          loadingMessage: F,
+          errorMessage: b,
+          debounceMs: N,
+          width: p,
+          className: m(u, {
+            "border-destructive": I
+          }),
+          allowCreation: y,
+          createItemLabel: S,
+          onCreateItem: j,
+          renderOption: w,
+          renderCreateItem: L
+        })
+      }), /* @__PURE__ */ a(D, {
+        className: "text-delete text-xs"
+      })]
+    })
+  });
+};
+E.displayName = "ComboboxField";
+export {
+  E as ComboboxField
+};

package/dist/components/form/fields/DateTimeField.d.ts

@@ -0,0 +1,77 @@
+import { Matcher } from 'react-day-picker';
+import { FieldValues, Path } from 'react-hook-form';
+import { DateTimePickerDisplayMode, DateTimePickerInputMode, DateTimePickerMode } from '../../date-time-picker/DateTimePicker';
+export type DateTimeFieldProps<T extends FieldValues> = {
+    name: Path<T>;
+    label?: string;
+    required?: boolean;
+    className?: string;
+    mode?: DateTimePickerMode;
+    displayMode?: DateTimePickerDisplayMode;
+    inputMode?: DateTimePickerInputMode;
+    placeholder?: string;
+    disabled?: boolean;
+    disabledDates?: Matcher | Matcher[];
+    minDate?: Date;
+    maxDate?: Date;
+    timeStep?: number;
+    minTime?: string;
+    maxTime?: string;
+    inputClassName?: string;
+    timeInputClassName?: string;
+};
+/**
+ * DateTimeField - A form field component for date and time selection.
+ *
+ * @param name - The name of the field in the form.
+ * @param label - The label for the field.
+ * @param required - Whether the field is required.
+ * @param className - The class name for the form item container.
+ * @param mode - Selection mode: 'single', 'multiple', or 'range'.
+ * @param displayMode - What to display: 'date', 'time', or 'datetime'.
+ * @param inputMode - Input style: 'input' or 'select'.
+ * @param placeholder - Placeholder text when no value is selected.
+ * @param disabled - Whether the field is disabled.
+ * @param disabledDates - Dates that should be disabled in the calendar.
+ * @param minDate - Minimum selectable date.
+ * @param maxDate - Maximum selectable date.
+ * @param timeStep - Time step in seconds (default: 60).
+ * @param minTime - Minimum selectable time (HH:mm format).
+ * @param maxTime - Maximum selectable time (HH:mm format).
+ * @param inputClassName - Class name for the date input.
+ * @param timeInputClassName - Class name for the time input.
+ *
+ * @example
+ * // Date only field
+ * <DateTimeField
+ *   name="birthDate"
+ *   label="Birth Date"
+ *   displayMode="date"
+ * />
+ *
+ * // Date and time field
+ * <DateTimeField
+ *   name="appointment"
+ *   label="Appointment"
+ *   displayMode="datetime"
+ * />
+ *
+ * // Time only field
+ * <DateTimeField
+ *   name="meetingTime"
+ *   label="Meeting Time"
+ *   displayMode="time"
+ * />
+ *
+ * // Date range picker
+ * <DateTimeField
+ *   name="vacationPeriod"
+ *   label="Vacation Period"
+ *   mode="range"
+ * />
+ */
+export declare const DateTimeField: {
+    <T extends FieldValues>({ name, label, required, className, mode, displayMode, inputMode, placeholder, disabled, disabledDates, minDate, maxDate, timeStep, minTime, maxTime, inputClassName, timeInputClassName, }: DateTimeFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=DateTimeField.d.ts.map

package/dist/components/form/fields/DateTimeField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeField.d.ts","sourceRoot":"","sources":["../../../../src/components/form/fields/DateTimeField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,IAAI,EAAkB,MAAM,iBAAiB,CAAC;AAEpE,OAAO,EAEL,yBAAyB,EACzB,uBAAuB,EACvB,kBAAkB,EAEnB,MAAM,uCAAuC,CAAC;AAS/C,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,WAAW,IAAI;IAEtD,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,WAAW,CAAC,EAAE,yBAAyB,CAAC;IACxC,SAAS,CAAC,EAAE,uBAAuB,CAAC;IAGpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,aAAa,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IACpC,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IAGf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,eAAO,MAAM,aAAa;KAAI,CAAC,SAAS,WAAW,+LA4BhD,kBAAkB,CAAC,CAAC,CAAC;;CA8GvB,CAAC"}

package/dist/components/form/fields/DateTimeField.js

@@ -0,0 +1,99 @@
+import { useFormContext as H } from "react-hook-form";
+import { cn as I } from "../../../lib/utils.js";
+import { DateTimePicker as L } from "../../date-time-picker/DateTimePicker.js";
+import { FormField as S, FormItem as q, FormLabel as z, FormControl as G, FormMessage as J } from "../Form.js";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+const K = ({
+  name: o,
+  label: i,
+  required: f = !1,
+  className: d,
+  // Core configuration
+  mode: a = "single",
+  displayMode: n = "date",
+  inputMode: p = "input",
+  // UI Customization
+  placeholder: D,
+  disabled: F = !1,
+  // Validation
+  disabledDates: h,
+  minDate: x,
+  maxDate: y,
+  // Time picker specific props
+  timeStep: b = 60,
+  minTime: g,
+  maxTime: j,
+  // Styling
+  inputClassName: A,
+  timeInputClassName: C
+}) => {
+  const {
+    control: N,
+    formState: T
+  } = H(), {
+    errors: k
+  } = T, P = k[o], V = (t) => t ? typeof t == "object" && t !== null && ("date" in t || "time" in t) ? t : t instanceof Date ? {
+    date: t
+  } : Array.isArray(t) && t.every((r) => r instanceof Date) ? {
+    date: t
+  } : t && typeof t == "object" && t !== null && "from" in t && "to" in t && (t.from instanceof Date || t.from === void 0) && (t.to instanceof Date || t.to === void 0) ? {
+    date: t
+  } : {} : {}, w = (t) => {
+    if (n === "date")
+      return t.date;
+    if (n === "time")
+      return t.time || "";
+    if (n === "datetime") {
+      if (t.date && t.time) {
+        const r = Array.isArray(t.date) ? t.date[0] : t.date;
+        if (r instanceof Date && t.time) {
+          const m = t.time.split(":").map(Number), B = m[0] || 0, E = m[1] || 0, s = new Date(r);
+          return s.setHours(B, E, 0, 0), s;
+        }
+      }
+      return t.date;
+    }
+    return t;
+  };
+  return /* @__PURE__ */ e(S, {
+    control: N,
+    name: o,
+    render: ({
+      field: t
+    }) => /* @__PURE__ */ c(q, {
+      className: I(d),
+      children: [i && /* @__PURE__ */ c(z, {
+        htmlFor: o,
+        children: [/* @__PURE__ */ e("span", {
+          children: i
+        }), f && /* @__PURE__ */ e("span", {
+          className: "ml-1 text-red-500",
+          children: "*"
+        })]
+      }), /* @__PURE__ */ e(G, {
+        children: /* @__PURE__ */ e(L, {
+          mode: a,
+          displayMode: n,
+          inputMode: p,
+          value: V(t.value),
+          onValueChange: (r) => t.onChange(w(r)),
+          placeholder: D,
+          disabled: F,
+          error: !!P,
+          disabledDates: h,
+          minDate: x,
+          maxDate: y,
+          timeStep: b,
+          minTime: g,
+          maxTime: j,
+          inputClassName: A,
+          timeInputClassName: C
+        })
+      }), /* @__PURE__ */ e(J, {})]
+    })
+  });
+};
+K.displayName = "DateTimeField";
+export {
+  K as DateTimeField
+};

package/dist/components/form/fields/FieldDescription.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+export type FieldDescriptionProps = {
+    children?: ReactNode;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    className?: string;
+    isError?: boolean;
+};
+export declare const FieldDescription: ({ children, leftIcon, rightIcon, className, isError, }: FieldDescriptionProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=FieldDescription.d.ts.map

package/dist/components/form/fields/FieldDescription.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldDescription.d.ts","sourceRoot":"","sources":["../../../../src/components/form/fields/FieldDescription.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,wDAM9B,qBAAqB,mDAuBvB,CAAC"}