@skybin-tech/nebula-ui 0.0.28 → 0.0.30

package/dist/components/Form/CountryPicker.js

@@ -0,0 +1,101 @@
+"use client";
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Button } from "../../primitives/button.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../../primitives/command.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../primitives/popover.js";
+import { COUNTRIES, filterCountries, getCountryByCode, getCountryFlag, sortCountriesWithPriority } from "../../data/countries.js";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronsUpDown } from "lucide-react";
+//#region src/components/Form/CountryPicker.tsx
+function resolveCountries(include, exclude, priorityCountries) {
+	let countries = COUNTRIES;
+	if (include?.length) {
+		const includeSet = new Set(include.map((code) => code.toUpperCase()));
+		countries = countries.filter((country) => includeSet.has(country.code));
+	}
+	if (exclude?.length) {
+		const excludeSet = new Set(exclude.map((code) => code.toUpperCase()));
+		countries = countries.filter((country) => !excludeSet.has(country.code));
+	}
+	return sortCountriesWithPriority(countries, priorityCountries);
+}
+function CountryPicker({ value, onValueChange, placeholder = "Select country", disabled, compact = false, include, exclude, priorityCountries, className, id, required, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy }) {
+	const [open, setOpen] = useState(false);
+	const countries = useMemo(() => resolveCountries(include, exclude, priorityCountries), [
+		include,
+		exclude,
+		priorityCountries
+	]);
+	const selectedCountry = value ? getCountryByCode(value) : void 0;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				id,
+				type: "button",
+				variant: "outline",
+				role: "combobox",
+				"aria-expanded": open,
+				"aria-required": required,
+				"aria-invalid": ariaInvalid,
+				"aria-describedby": ariaDescribedBy,
+				disabled,
+				className: cn("justify-between font-normal", compact ? "h-full w-auto shrink-0 border-0 bg-transparent px-2 shadow-none hover:bg-transparent" : "w-full", !value && "text-muted-foreground", className),
+				children: [selectedCountry ? /* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 items-center gap-2 truncate",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: getCountryFlag(selectedCountry.code)
+					}), !compact && /* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: selectedCountry.name
+					})]
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: compact ? "…" : placeholder
+				}), !compact && /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-[320px] p-0",
+			align: "start",
+			children: /* @__PURE__ */ jsxs(Command, {
+				filter: (itemValue, search) => {
+					const country = countries.find((entry) => entry.code.toLowerCase() === itemValue.toLowerCase());
+					if (!country) return 0;
+					return filterCountries([country], search).length > 0 ? 1 : 0;
+				},
+				children: [/* @__PURE__ */ jsx(CommandInput, { placeholder: "Search country..." }), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No country found." }), /* @__PURE__ */ jsx(CommandGroup, { children: countries.map((country) => /* @__PURE__ */ jsxs(CommandItem, {
+					value: country.code,
+					onSelect: (currentValue) => {
+						onValueChange(currentValue.toUpperCase());
+						setOpen(false);
+					},
+					children: [
+						/* @__PURE__ */ jsx(Check, { className: cn("mr-2 h-4 w-4", value === country.code ? "opacity-100" : "opacity-0") }),
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "mr-2",
+							children: getCountryFlag(country.code)
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: country.name
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "ml-auto text-xs text-muted-foreground",
+							children: country.dialCode
+						})
+					]
+				}, country.code)) })] })]
+			})
+		})]
+	});
+}
+//#endregion
+export { CountryPicker };
+
+//# sourceMappingURL=CountryPicker.js.map

package/dist/components/Form/CountryPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountryPicker.js","names":[],"sources":["../../../src/components/Form/CountryPicker.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useMemo, useState } from \"react\";\r\nimport { Check, ChevronsUpDown } from \"lucide-react\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { Button } from \"../../primitives/button\";\r\nimport {\r\n  Command,\r\n  CommandEmpty,\r\n  CommandGroup,\r\n  CommandInput,\r\n  CommandItem,\r\n  CommandList,\r\n} from \"../../primitives/command\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../../primitives/popover\";\r\nimport {\r\n  COUNTRIES,\r\n  filterCountries,\r\n  getCountryByCode,\r\n  getCountryFlag,\r\n  sortCountriesWithPriority,\r\n  type Country,\r\n} from \"../../data/countries\";\r\n\r\nexport interface CountryPickerProps {\r\n  value?: string;\r\n  onValueChange: (value: string) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  compact?: boolean;\r\n  include?: string[];\r\n  exclude?: string[];\r\n  priorityCountries?: string[];\r\n  className?: string;\r\n  id?: string;\r\n  required?: boolean;\r\n  \"aria-invalid\"?: boolean;\r\n  \"aria-describedby\"?: string;\r\n}\r\n\r\nfunction resolveCountries(\r\n  include?: string[],\r\n  exclude?: string[],\r\n  priorityCountries?: string[]\r\n): Country[] {\r\n  let countries = COUNTRIES;\r\n\r\n  if (include?.length) {\r\n    const includeSet = new Set(include.map((code) => code.toUpperCase()));\r\n    countries = countries.filter((country) => includeSet.has(country.code));\r\n  }\r\n\r\n  if (exclude?.length) {\r\n    const excludeSet = new Set(exclude.map((code) => code.toUpperCase()));\r\n    countries = countries.filter((country) => !excludeSet.has(country.code));\r\n  }\r\n\r\n  return sortCountriesWithPriority(countries, priorityCountries);\r\n}\r\n\r\nexport function CountryPicker({\r\n  value,\r\n  onValueChange,\r\n  placeholder = \"Select country\",\r\n  disabled,\r\n  compact = false,\r\n  include,\r\n  exclude,\r\n  priorityCountries,\r\n  className,\r\n  id,\r\n  required,\r\n  \"aria-invalid\": ariaInvalid,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n}: CountryPickerProps) {\r\n  const [open, setOpen] = useState(false);\r\n  const countries = useMemo(\r\n    () => resolveCountries(include, exclude, priorityCountries),\r\n    [include, exclude, priorityCountries]\r\n  );\r\n  const selectedCountry = value ? getCountryByCode(value) : undefined;\r\n\r\n  return (\r\n    <Popover open={open} onOpenChange={setOpen}>\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          id={id}\r\n          type=\"button\"\r\n          variant=\"outline\"\r\n          role=\"combobox\"\r\n          aria-expanded={open}\r\n          aria-required={required}\r\n          aria-invalid={ariaInvalid}\r\n          aria-describedby={ariaDescribedBy}\r\n          disabled={disabled}\r\n          className={cn(\r\n            \"justify-between font-normal\",\r\n            compact ? \"h-full w-auto shrink-0 border-0 bg-transparent px-2 shadow-none hover:bg-transparent\" : \"w-full\",\r\n            !value && \"text-muted-foreground\",\r\n            className\r\n          )}\r\n        >\r\n          {selectedCountry ? (\r\n            <span className=\"flex min-w-0 items-center gap-2 truncate\">\r\n              <span aria-hidden=\"true\">{getCountryFlag(selectedCountry.code)}</span>\r\n              {!compact && <span className=\"truncate\">{selectedCountry.name}</span>}\r\n            </span>\r\n          ) : (\r\n            <span className=\"truncate\">{compact ? \"…\" : placeholder}</span>\r\n          )}\r\n          {!compact && <ChevronsUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />}\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"w-[320px] p-0\" align=\"start\">\r\n        <Command\r\n          filter={(itemValue, search) => {\r\n            const country = countries.find(\r\n              (entry) => entry.code.toLowerCase() === itemValue.toLowerCase()\r\n            );\r\n            if (!country) {\r\n              return 0;\r\n            }\r\n\r\n            return filterCountries([country], search).length > 0 ? 1 : 0;\r\n          }}\r\n        >\r\n          <CommandInput placeholder=\"Search country...\" />\r\n          <CommandList>\r\n            <CommandEmpty>No country found.</CommandEmpty>\r\n            <CommandGroup>\r\n              {countries.map((country) => (\r\n                <CommandItem\r\n                  key={country.code}\r\n                  value={country.code}\r\n                  onSelect={(currentValue) => {\r\n                    onValueChange(currentValue.toUpperCase());\r\n                    setOpen(false);\r\n                  }}\r\n                >\r\n                  <Check\r\n                    className={cn(\r\n                      \"mr-2 h-4 w-4\",\r\n                      value === country.code ? \"opacity-100\" : \"opacity-0\"\r\n                    )}\r\n                  />\r\n                  <span aria-hidden=\"true\" className=\"mr-2\">\r\n                    {getCountryFlag(country.code)}\r\n                  </span>\r\n                  <span className=\"truncate\">{country.name}</span>\r\n                  <span className=\"ml-auto text-xs text-muted-foreground\">\r\n                    {country.dialCode}\r\n                  </span>\r\n                </CommandItem>\r\n              ))}\r\n            </CommandGroup>\r\n          </CommandList>\r\n        </Command>\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n}\r\n\r\n"],"mappings":";;;;;;;;;;;AAwCA,SAAS,iBACP,SACA,SACA,mBACW;CACX,IAAI,YAAY;CAEhB,IAAI,SAAS,QAAQ;EACnB,MAAM,aAAa,IAAI,IAAI,QAAQ,KAAK,SAAS,KAAK,YAAY,CAAC,CAAC;EACpE,YAAY,UAAU,QAAQ,YAAY,WAAW,IAAI,QAAQ,IAAI,CAAC;CACxE;CAEA,IAAI,SAAS,QAAQ;EACnB,MAAM,aAAa,IAAI,IAAI,QAAQ,KAAK,SAAS,KAAK,YAAY,CAAC,CAAC;EACpE,YAAY,UAAU,QAAQ,YAAY,CAAC,WAAW,IAAI,QAAQ,IAAI,CAAC;CACzE;CAEA,OAAO,0BAA0B,WAAW,iBAAiB;AAC/D;AAEA,SAAgB,cAAc,EAC5B,OACA,eACA,cAAc,kBACd,UACA,UAAU,OACV,SACA,SACA,mBACA,WACA,IACA,UACA,gBAAgB,aAChB,oBAAoB,mBACC;CACrB,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,YAAY,cACV,iBAAiB,SAAS,SAAS,iBAAiB,GAC1D;EAAC;EAAS;EAAS;CAAiB,CACtC;CACA,MAAM,kBAAkB,QAAQ,iBAAiB,KAAK,IAAI,KAAA;CAE1D,OACE,qBAAC,SAAD;EAAe;EAAM,cAAc;EAAnC,UAAA,CACE,oBAAC,gBAAD;GAAgB,SAAA;GACd,UAAA,qBAAC,QAAD;IACM;IACJ,MAAK;IACL,SAAQ;IACR,MAAK;IACL,iBAAe;IACf,iBAAe;IACf,gBAAc;IACd,oBAAkB;IACR;IACV,WAAW,GACT,+BACA,UAAU,yFAAyF,UACnG,CAAC,SAAS,yBACV,SACF;IAfF,UAAA,CAiBG,kBACC,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACE,oBAAC,QAAD;MAAM,eAAY;MAAQ,UAAA,eAAe,gBAAgB,IAAI;KAAQ,CAAA,GACpE,CAAC,WAAW,oBAAC,QAAD;MAAM,WAAU;MAAY,UAAA,gBAAgB;KAAW,CAAA,CAChE;IAEN,CAAA,IAAA,oBAAC,QAAD;KAAM,WAAU;KAAY,UAAA,UAAU,MAAM;IAAkB,CAAA,GAE/D,CAAC,WAAW,oBAAC,gBAAD,EAAgB,WAAU,mCAAoC,CAAA,CACrE;;EACM,CAAA,GAChB,oBAAC,gBAAD;GAAgB,WAAU;GAAgB,OAAM;GAC9C,UAAA,qBAAC,SAAD;IACE,SAAS,WAAW,WAAW;KAC7B,MAAM,UAAU,UAAU,MACvB,UAAU,MAAM,KAAK,YAAY,MAAM,UAAU,YAAY,CAChE;KACA,IAAI,CAAC,SACH,OAAO;KAGT,OAAO,gBAAgB,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC,SAAS,IAAI,IAAI;IAC7D;IAVF,UAAA,CAYE,oBAAC,cAAD,EAAc,aAAY,oBAAqB,CAAA,GAC/C,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,cAAD,EAAA,UAAc,oBAA+B,CAAA,GAC7C,oBAAC,cAAD,EAAA,UACG,UAAU,KAAK,YACd,qBAAC,aAAD;KAEE,OAAO,QAAQ;KACf,WAAW,iBAAiB;MAC1B,cAAc,aAAa,YAAY,CAAC;MACxC,QAAQ,KAAK;KACf;KANF,UAAA;MAQE,oBAAC,OAAD,EACE,WAAW,GACT,gBACA,UAAU,QAAQ,OAAO,gBAAgB,WAC3C,EACD,CAAA;MACD,oBAAC,QAAD;OAAM,eAAY;OAAO,WAAU;OAChC,UAAA,eAAe,QAAQ,IAAI;MACxB,CAAA;MACN,oBAAC,QAAD;OAAM,WAAU;OAAY,UAAA,QAAQ;MAAW,CAAA;MAC/C,oBAAC,QAAD;OAAM,WAAU;OACb,UAAA,QAAQ;MACL,CAAA;KACK;IApBN,GAAA,QAAQ,IAoBF,CACd,EACW,CAAA,CACH,EAAA,CAAA,CACN;;EACK,CAAA,CACT;;AAEb"}

package/dist/components/Form/CountrySelect.d.ts

@@ -0,0 +1,32 @@
+import { Control, FieldPath, FieldValues } from 'react-hook-form';
+import { VariantProps } from 'class-variance-authority';
+declare const countrySelectVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | null | undefined;
+    variant?: "default" | "error" | "success" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface CountrySelectProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends VariantProps<typeof countrySelectVariants> {
+    name: TName;
+    label?: string;
+    helperText?: string;
+    showError?: boolean;
+    error?: string;
+    fullWidth?: boolean;
+    placeholder?: string;
+    allowClear?: boolean;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+    control?: Control<TFieldValues>;
+    include?: string[];
+    exclude?: string[];
+    priorityCountries?: string[];
+    /** Field is required (`true` or custom error message string) */
+    required?: boolean | string;
+    validate?: (value: unknown) => boolean | string | Promise<boolean | string>;
+}
+export declare function CountrySelect<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, helperText, showError, error: customError, size, variant, fullWidth, placeholder, allowClear, disabled, className, id: providedId, control: externalControl, include, exclude, priorityCountries, required, validate, }: CountrySelectProps<TFieldValues, TName>): import("react").JSX.Element;
+export declare namespace CountrySelect {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=CountrySelect.d.ts.map

package/dist/components/Form/CountrySelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountrySelect.d.ts","sourceRoot":"","sources":["../../../src/components/Form/CountrySelect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAsD,KAAK,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACrI,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAMlE,QAAA,MAAM,qBAAqB;;;8EAiBzB,CAAC;AAEH,MAAM,WAAW,kBAAkB,CACjC,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,CAC/D,SAAQ,YAAY,CAAC,OAAO,qBAAqB,CAAC;IAClD,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;CAC7E;AAED,wBAAgB,aAAa,CAC3B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,EACA,IAAI,EACJ,KAAK,EACL,UAAU,EACV,SAAgB,EAChB,KAAK,EAAE,WAAW,EAClB,IAAI,EACJ,OAAO,EACP,SAAgB,EAChB,WAAgC,EAChC,UAAU,EACV,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,UAAU,EACd,OAAO,EAAE,eAAe,EACxB,OAAO,EACP,OAAO,EACP,iBAAiB,EACjB,QAAQ,EACR,QAAQ,GACT,EAAE,kBAAkB,CAAC,YAAY,EAAE,KAAK,CAAC,+BA+FzC;yBAtHe,aAAa"}

package/dist/components/Form/CountrySelect.js

@@ -0,0 +1,111 @@
+"use client";
+"use client";
+import { cn } from "../../utils/cn.js";
+import { FormConfigContext } from "./context.js";
+import { FieldLayout } from "./FieldLayout.js";
+import { CountryPicker } from "./CountryPicker.js";
+import { useContext, useEffect, useId } from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useController, useFormContext } from "react-hook-form";
+//#region src/components/Form/CountrySelect.tsx
+var countrySelectVariants = cva("", {
+	variants: {
+		size: {
+			sm: "h-8 text-xs",
+			md: "h-10 text-sm",
+			lg: "h-12 text-base"
+		},
+		variant: {
+			default: "border-input focus-visible:ring-ring",
+			error: "border-destructive focus-visible:ring-destructive",
+			success: "border-green-500 focus-visible:ring-green-500"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		variant: "default"
+	}
+});
+function CountrySelect({ name, label, helperText, showError = true, error: customError, size, variant, fullWidth = true, placeholder = "Select a country", allowClear, disabled, className, id: providedId, control: externalControl, include, exclude, priorityCountries, required, validate }) {
+	const generatedId = useId();
+	const inputId = providedId ?? generatedId;
+	const formConfigContext = useContext(FormConfigContext);
+	const formConfig = formConfigContext ?? {};
+	const rhfContext = useFormContext();
+	const control = externalControl ?? rhfContext?.control;
+	const registerFieldValidation = formConfigContext?.registerFieldValidation;
+	const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;
+	useEffect(() => {
+		if (registerFieldValidation) {
+			const rules = {};
+			if (required !== void 0) rules.required = required;
+			if (validate !== void 0) rules.validate = validate;
+			registerFieldValidation({
+				name,
+				type: "string",
+				rules
+			});
+			return () => {
+				unregisterFieldValidation?.(name);
+			};
+		}
+	}, [
+		registerFieldValidation,
+		unregisterFieldValidation,
+		name,
+		required,
+		validate
+	]);
+	const { field, fieldState } = useController({
+		name,
+		control
+	});
+	const fieldError = fieldState.error?.message;
+	const errorMessage = customError ?? fieldError;
+	const hasError = !!errorMessage;
+	const effectiveSize = size ?? formConfig.size ?? "md";
+	const effectiveDisabled = disabled ?? formConfig.disabled;
+	const effectiveVariant = hasError ? "error" : variant;
+	return /* @__PURE__ */ jsx(FieldLayout, {
+		inputId,
+		label,
+		required: !!required,
+		helperText,
+		errorMessage: showError ? errorMessage : void 0,
+		showError,
+		fullWidth,
+		formConfig,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ jsx(CountryPicker, {
+				id: inputId,
+				value: field.value ?? "",
+				onValueChange: (value) => field.onChange(value),
+				placeholder,
+				disabled: effectiveDisabled,
+				include,
+				exclude,
+				priorityCountries,
+				required: !!required,
+				"aria-invalid": hasError,
+				"aria-describedby": hasError ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0,
+				className: cn(countrySelectVariants({
+					size: effectiveSize,
+					variant: effectiveVariant
+				}), className)
+			}), allowClear && field.value && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "text-sm text-muted-foreground hover:text-foreground",
+				onClick: () => field.onChange(""),
+				disabled: effectiveDisabled,
+				children: "Clear"
+			})]
+		})
+	});
+}
+CountrySelect.displayName = "CountrySelect";
+//#endregion
+export { CountrySelect };
+
+//# sourceMappingURL=CountrySelect.js.map

package/dist/components/Form/CountrySelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountrySelect.js","names":[],"sources":["../../../src/components/Form/CountrySelect.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useContext, useEffect, useId } from \"react\";\r\nimport { useController, useFormContext as useRHFFormContext, type Control, type FieldPath, type FieldValues } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { FormConfigContext, type FieldValidationRules, type FormConfig } from \"./context\";\r\nimport { FieldLayout } from \"./FieldLayout\";\r\nimport { CountryPicker } from \"./CountryPicker\";\r\n\r\nconst countrySelectVariants = cva(\"\", {\r\n  variants: {\r\n    size: {\r\n      sm: \"h-8 text-xs\",\r\n      md: \"h-10 text-sm\",\r\n      lg: \"h-12 text-base\",\r\n    },\r\n    variant: {\r\n      default: \"border-input focus-visible:ring-ring\",\r\n      error: \"border-destructive focus-visible:ring-destructive\",\r\n      success: \"border-green-500 focus-visible:ring-green-500\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: \"md\",\r\n    variant: \"default\",\r\n  },\r\n});\r\n\r\nexport interface CountrySelectProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof countrySelectVariants> {\r\n  name: TName;\r\n  label?: string;\r\n  helperText?: string;\r\n  showError?: boolean;\r\n  error?: string;\r\n  fullWidth?: boolean;\r\n  placeholder?: string;\r\n  allowClear?: boolean;\r\n  disabled?: boolean;\r\n  className?: string;\r\n  id?: string;\r\n  control?: Control<TFieldValues>;\r\n  include?: string[];\r\n  exclude?: string[];\r\n  priorityCountries?: string[];\r\n  /** Field is required (`true` or custom error message string) */\r\n  required?: boolean | string;\r\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\nexport function CountrySelect<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>({\r\n  name,\r\n  label,\r\n  helperText,\r\n  showError = true,\r\n  error: customError,\r\n  size,\r\n  variant,\r\n  fullWidth = true,\r\n  placeholder = \"Select a country\",\r\n  allowClear,\r\n  disabled,\r\n  className,\r\n  id: providedId,\r\n  control: externalControl,\r\n  include,\r\n  exclude,\r\n  priorityCountries,\r\n  required,\r\n  validate,\r\n}: CountrySelectProps<TFieldValues, TName>) {\r\n  const generatedId = useId();\r\n  const inputId = providedId ?? generatedId;\r\n  const formConfigContext = useContext(FormConfigContext);\r\n  const formConfig: FormConfig = formConfigContext ?? {};\r\n  const rhfContext = useRHFFormContext<TFieldValues>();\r\n  const control = externalControl ?? rhfContext?.control;\r\n\r\n  const registerFieldValidation = formConfigContext?.registerFieldValidation;\r\n  const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;\r\n\r\n  useEffect(() => {\r\n    if (registerFieldValidation) {\r\n      const rules: FieldValidationRules = {};\r\n      if (required !== undefined) rules.required = required;\r\n      if (validate !== undefined) rules.validate = validate;\r\n\r\n      registerFieldValidation({\r\n        name: name as string,\r\n        type: \"string\",\r\n        rules,\r\n      });\r\n\r\n      return () => {\r\n        unregisterFieldValidation?.(name as string);\r\n      };\r\n    }\r\n  }, [\r\n    registerFieldValidation,\r\n    unregisterFieldValidation,\r\n    name,\r\n    required,\r\n    validate,\r\n  ]);\r\n\r\n  const { field, fieldState } = useController<TFieldValues, TName>({\r\n    name,\r\n    control,\r\n  });\r\n\r\n  const fieldError = fieldState.error?.message;\r\n  const errorMessage = customError ?? fieldError;\r\n  const hasError = !!errorMessage;\r\n  const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n  const effectiveDisabled = disabled ?? formConfig.disabled;\r\n  const effectiveVariant = hasError ? \"error\" : variant;\r\n\r\n  return (\r\n    <FieldLayout\r\n      inputId={inputId}\r\n      label={label}\r\n      required={!!required}\r\n      helperText={helperText}\r\n      errorMessage={showError ? errorMessage : undefined}\r\n      showError={showError}\r\n      fullWidth={fullWidth}\r\n      formConfig={formConfig}\r\n    >\r\n      <div className=\"flex gap-2\">\r\n        <CountryPicker\r\n          id={inputId}\r\n          value={field.value ?? \"\"}\r\n          onValueChange={(value) => field.onChange(value)}\r\n          placeholder={placeholder}\r\n          disabled={effectiveDisabled}\r\n          include={include}\r\n          exclude={exclude}\r\n          priorityCountries={priorityCountries}\r\n          required={!!required}\r\n          aria-invalid={hasError}\r\n          aria-describedby={\r\n            hasError\r\n              ? `${inputId}-error`\r\n              : helperText\r\n                ? `${inputId}-helper`\r\n                : undefined\r\n          }\r\n          className={cn(\r\n            countrySelectVariants({ size: effectiveSize, variant: effectiveVariant }),\r\n            className\r\n          )}\r\n        />\r\n        {allowClear && field.value && (\r\n          <button\r\n            type=\"button\"\r\n            className=\"text-sm text-muted-foreground hover:text-foreground\"\r\n            onClick={() => field.onChange(\"\")}\r\n            disabled={effectiveDisabled}\r\n          >\r\n            Clear\r\n          </button>\r\n        )}\r\n      </div>\r\n    </FieldLayout>\r\n  );\r\n}\r\n\r\nCountrySelect.displayName = \"CountrySelect\";\r\n"],"mappings":";;;;;;;;;;;AAUA,IAAM,wBAAwB,IAAI,IAAI;CACpC,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,SAAS;GACP,SAAS;GACT,OAAO;GACP,SAAS;EACX;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;AACF,CAAC;AA0BD,SAAgB,cAGd,EACA,MACA,OACA,YACA,YAAY,MACZ,OAAO,aACP,MACA,SACA,YAAY,MACZ,cAAc,oBACd,YACA,UACA,WACA,IAAI,YACJ,SAAS,iBACT,SACA,SACA,mBACA,UACA,YAC0C;CAC1C,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,cAAc;CAC9B,MAAM,oBAAoB,WAAW,iBAAiB;CACtD,MAAM,aAAyB,qBAAqB,CAAC;CACrD,MAAM,aAAa,eAAgC;CACnD,MAAM,UAAU,mBAAmB,YAAY;CAE/C,MAAM,0BAA0B,mBAAmB;CACnD,MAAM,4BAA4B,mBAAmB;CAErD,gBAAgB;EACd,IAAI,yBAAyB;GAC3B,MAAM,QAA8B,CAAC;GACrC,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAC7C,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAE7C,wBAAwB;IAChB;IACN,MAAM;IACN;GACF,CAAC;GAED,aAAa;IACX,4BAA4B,IAAc;GAC5C;EACF;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,OAAO,eAAe,cAAmC;EAC/D;EACA;CACF,CAAC;CAED,MAAM,aAAa,WAAW,OAAO;CACrC,MAAM,eAAe,eAAe;CACpC,MAAM,WAAW,CAAC,CAAC;CACnB,MAAM,gBAAgB,QAAQ,WAAW,QAAQ;CACjD,MAAM,oBAAoB,YAAY,WAAW;CACjD,MAAM,mBAAmB,WAAW,UAAU;CAE9C,OACE,oBAAC,aAAD;EACW;EACF;EACP,UAAU,CAAC,CAAC;EACA;EACZ,cAAc,YAAY,eAAe,KAAA;EAC9B;EACA;EACC;EAEZ,UAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,eAAD;IACE,IAAI;IACJ,OAAO,MAAM,SAAS;IACtB,gBAAgB,UAAU,MAAM,SAAS,KAAK;IACjC;IACb,UAAU;IACD;IACA;IACU;IACnB,UAAU,CAAC,CAAC;IACZ,gBAAc;IACd,oBACE,WACI,GAAG,QAAQ,UACX,aACE,GAAG,QAAQ,WACX,KAAA;IAER,WAAW,GACT,sBAAsB;KAAE,MAAM;KAAe,SAAS;IAAiB,CAAC,GACxE,SACF;GACD,CAAA,GACA,cAAc,MAAM,SACnB,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,eAAe,MAAM,SAAS,EAAE;IAChC,UAAU;IACX,UAAA;GAEO,CAAA,CAEP;;CACM,CAAA;AAEjB;AAEA,cAAc,cAAc"}

package/dist/components/Form/DatePicker.d.ts

@@ -0,0 +1,27 @@
+import { Control, FieldPath, FieldValues } from 'react-hook-form';
+import { VariantProps } from 'class-variance-authority';
+declare const datePickerVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | null | undefined;
+    variant?: "default" | "error" | "success" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface DatePickerProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends VariantProps<typeof datePickerVariants> {
+    name: TName;
+    label?: string;
+    helperText?: string;
+    showError?: boolean;
+    error?: string;
+    fullWidth?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+    control?: Control<TFieldValues>;
+    required?: boolean | string;
+    validate?: (value: unknown) => boolean | string | Promise<boolean | string>;
+}
+export declare function DatePicker<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, helperText, showError, error: customError, size, variant, fullWidth, placeholder, disabled, className, id: providedId, control: externalControl, required, validate, }: DatePickerProps<TFieldValues, TName>): import("react").JSX.Element;
+export declare namespace DatePicker {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=DatePicker.d.ts.map

package/dist/components/Form/DatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/Form/DatePicker.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAsD,KAAK,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACrI,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAQlE,QAAA,MAAM,kBAAkB;;;8EAiBtB,CAAC;AAEH,MAAM,WAAW,eAAe,CAC9B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,CAC/D,SAAQ,YAAY,CAAC,OAAO,kBAAkB,CAAC;IAC/C,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;CAC7E;AAED,wBAAgB,UAAU,CACxB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,EACA,IAAI,EACJ,KAAK,EACL,UAAU,EACV,SAAgB,EAChB,KAAK,EAAE,WAAW,EAClB,IAAI,EACJ,OAAO,EACP,SAAgB,EAChB,WAA2B,EAC3B,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,UAAU,EACd,OAAO,EAAE,eAAe,EACxB,QAAQ,EACR,QAAQ,GACT,EAAE,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,+BAkGtC;yBArHe,UAAU"}

package/dist/components/Form/DatePicker.js

@@ -0,0 +1,122 @@
+"use client";
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Button } from "../../primitives/button.js";
+import { FormConfigContext } from "./context.js";
+import { FieldLayout } from "./FieldLayout.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../primitives/popover.js";
+import { Calendar } from "../../primitives/calendar.js";
+import { useContext, useEffect, useId, useState } from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useController, useFormContext } from "react-hook-form";
+import { CalendarIcon } from "lucide-react";
+import { format } from "date-fns";
+//#region src/components/Form/DatePicker.tsx
+var datePickerVariants = cva("w-full justify-start text-left font-normal", {
+	variants: {
+		size: {
+			sm: "h-8 text-xs",
+			md: "h-10 text-sm",
+			lg: "h-12 text-base"
+		},
+		variant: {
+			default: "border-input",
+			error: "border-destructive",
+			success: "border-green-500"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		variant: "default"
+	}
+});
+function DatePicker({ name, label, helperText, showError = true, error: customError, size, variant, fullWidth = true, placeholder = "Pick a date", disabled, className, id: providedId, control: externalControl, required, validate }) {
+	const generatedId = useId();
+	const inputId = providedId ?? generatedId;
+	const [open, setOpen] = useState(false);
+	const formConfigContext = useContext(FormConfigContext);
+	const formConfig = formConfigContext ?? {};
+	const rhfContext = useFormContext();
+	const control = externalControl ?? rhfContext?.control;
+	const registerFieldValidation = formConfigContext?.registerFieldValidation;
+	const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;
+	useEffect(() => {
+		if (registerFieldValidation) {
+			const rules = {};
+			if (required !== void 0) rules.required = required;
+			if (validate !== void 0) rules.validate = validate;
+			registerFieldValidation({
+				name,
+				type: "date",
+				rules
+			});
+			return () => {
+				unregisterFieldValidation?.(name);
+			};
+		}
+	}, [
+		registerFieldValidation,
+		unregisterFieldValidation,
+		name,
+		required,
+		validate
+	]);
+	const { field, fieldState } = useController({
+		name,
+		control
+	});
+	const selectedDate = field.value ? new Date(field.value) : void 0;
+	const fieldError = fieldState.error?.message;
+	const errorMessage = customError ?? fieldError;
+	const hasError = !!errorMessage;
+	const effectiveSize = size ?? formConfig.size ?? "md";
+	const effectiveDisabled = disabled ?? formConfig.disabled;
+	const effectiveVariant = hasError ? "error" : variant;
+	return /* @__PURE__ */ jsx(FieldLayout, {
+		inputId,
+		label,
+		required: !!required,
+		helperText,
+		errorMessage: showError ? errorMessage : void 0,
+		showError,
+		fullWidth,
+		formConfig,
+		children: /* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs(Button, {
+					id: inputId,
+					type: "button",
+					variant: "outline",
+					disabled: effectiveDisabled,
+					"aria-invalid": hasError,
+					"aria-describedby": hasError ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0,
+					className: cn(datePickerVariants({
+						size: effectiveSize,
+						variant: effectiveVariant
+					}), !selectedDate && "text-muted-foreground", className),
+					children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }), selectedDate ? format(selectedDate, "PPP") : placeholder]
+				})
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				className: "w-auto p-0",
+				align: "start",
+				children: /* @__PURE__ */ jsx(Calendar, {
+					mode: "single",
+					selected: selectedDate,
+					onSelect: (date) => {
+						field.onChange(date ?? "");
+						setOpen(false);
+					}
+				})
+			})]
+		})
+	});
+}
+DatePicker.displayName = "DatePicker";
+//#endregion
+export { DatePicker };
+
+//# sourceMappingURL=DatePicker.js.map

package/dist/components/Form/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","names":[],"sources":["../../../src/components/Form/DatePicker.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useContext, useEffect, useId, useState } from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { CalendarIcon } from \"lucide-react\";\r\nimport { useController, useFormContext as useRHFFormContext, type Control, type FieldPath, type FieldValues } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { Button } from \"../../primitives/button\";\r\nimport { Calendar } from \"../../primitives/calendar\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../../primitives/popover\";\r\nimport { FormConfigContext, type FieldValidationRules, type FormConfig } from \"./context\";\r\nimport { FieldLayout } from \"./FieldLayout\";\r\n\r\nconst datePickerVariants = cva(\"w-full justify-start text-left font-normal\", {\r\n  variants: {\r\n    size: {\r\n      sm: \"h-8 text-xs\",\r\n      md: \"h-10 text-sm\",\r\n      lg: \"h-12 text-base\",\r\n    },\r\n    variant: {\r\n      default: \"border-input\",\r\n      error: \"border-destructive\",\r\n      success: \"border-green-500\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: \"md\",\r\n    variant: \"default\",\r\n  },\r\n});\r\n\r\nexport interface DatePickerProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof datePickerVariants> {\r\n  name: TName;\r\n  label?: string;\r\n  helperText?: string;\r\n  showError?: boolean;\r\n  error?: string;\r\n  fullWidth?: boolean;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  className?: string;\r\n  id?: string;\r\n  control?: Control<TFieldValues>;\r\n  required?: boolean | string;\r\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\nexport function DatePicker<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>({\r\n  name,\r\n  label,\r\n  helperText,\r\n  showError = true,\r\n  error: customError,\r\n  size,\r\n  variant,\r\n  fullWidth = true,\r\n  placeholder = \"Pick a date\",\r\n  disabled,\r\n  className,\r\n  id: providedId,\r\n  control: externalControl,\r\n  required,\r\n  validate,\r\n}: DatePickerProps<TFieldValues, TName>) {\r\n  const generatedId = useId();\r\n  const inputId = providedId ?? generatedId;\r\n  const [open, setOpen] = useState(false);\r\n  const formConfigContext = useContext(FormConfigContext);\r\n  const formConfig: FormConfig = formConfigContext ?? {};\r\n  const rhfContext = useRHFFormContext<TFieldValues>();\r\n  const control = externalControl ?? rhfContext?.control;\r\n\r\n  const registerFieldValidation = formConfigContext?.registerFieldValidation;\r\n  const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;\r\n\r\n  useEffect(() => {\r\n    if (registerFieldValidation) {\r\n      const rules: FieldValidationRules = {};\r\n      if (required !== undefined) rules.required = required;\r\n      if (validate !== undefined) rules.validate = validate;\r\n\r\n      registerFieldValidation({\r\n        name: name as string,\r\n        type: \"date\",\r\n        rules,\r\n      });\r\n\r\n      return () => {\r\n        unregisterFieldValidation?.(name as string);\r\n      };\r\n    }\r\n  }, [\r\n    registerFieldValidation,\r\n    unregisterFieldValidation,\r\n    name,\r\n    required,\r\n    validate,\r\n  ]);\r\n\r\n  const { field, fieldState } = useController<TFieldValues, TName>({\r\n    name,\r\n    control,\r\n  });\r\n\r\n  const selectedDate = field.value ? new Date(field.value) : undefined;\r\n  const fieldError = fieldState.error?.message;\r\n  const errorMessage = customError ?? fieldError;\r\n  const hasError = !!errorMessage;\r\n  const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n  const effectiveDisabled = disabled ?? formConfig.disabled;\r\n  const effectiveVariant = hasError ? \"error\" : variant;\r\n\r\n  return (\r\n    <FieldLayout\r\n      inputId={inputId}\r\n      label={label}\r\n      required={!!required}\r\n      helperText={helperText}\r\n      errorMessage={showError ? errorMessage : undefined}\r\n      showError={showError}\r\n      fullWidth={fullWidth}\r\n      formConfig={formConfig}\r\n    >\r\n      <Popover open={open} onOpenChange={setOpen}>\r\n        <PopoverTrigger asChild>\r\n          <Button\r\n            id={inputId}\r\n            type=\"button\"\r\n            variant=\"outline\"\r\n            disabled={effectiveDisabled}\r\n            aria-invalid={hasError}\r\n            aria-describedby={\r\n              hasError\r\n                ? `${inputId}-error`\r\n                : helperText\r\n                  ? `${inputId}-helper`\r\n                  : undefined\r\n            }\r\n            className={cn(\r\n              datePickerVariants({ size: effectiveSize, variant: effectiveVariant }),\r\n              !selectedDate && \"text-muted-foreground\",\r\n              className\r\n            )}\r\n          >\r\n            <CalendarIcon className=\"mr-2 h-4 w-4\" />\r\n            {selectedDate ? format(selectedDate, \"PPP\") : placeholder}\r\n          </Button>\r\n        </PopoverTrigger>\r\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\r\n          <Calendar\r\n            mode=\"single\"\r\n            selected={selectedDate}\r\n            onSelect={(date) => {\r\n              field.onChange(date ?? \"\");\r\n              setOpen(false);\r\n            }}\r\n          />\r\n        </PopoverContent>\r\n      </Popover>\r\n    </FieldLayout>\r\n  );\r\n}\r\n\r\nDatePicker.displayName = \"DatePicker\";\r\n"],"mappings":";;;;;;;;;;;;;;;AAcA,IAAM,qBAAqB,IAAI,8CAA8C;CAC3E,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,SAAS;GACP,SAAS;GACT,OAAO;GACP,SAAS;EACX;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;AACF,CAAC;AAqBD,SAAgB,WAGd,EACA,MACA,OACA,YACA,YAAY,MACZ,OAAO,aACP,MACA,SACA,YAAY,MACZ,cAAc,eACd,UACA,WACA,IAAI,YACJ,SAAS,iBACT,UACA,YACuC;CACvC,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,cAAc;CAC9B,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,oBAAoB,WAAW,iBAAiB;CACtD,MAAM,aAAyB,qBAAqB,CAAC;CACrD,MAAM,aAAa,eAAgC;CACnD,MAAM,UAAU,mBAAmB,YAAY;CAE/C,MAAM,0BAA0B,mBAAmB;CACnD,MAAM,4BAA4B,mBAAmB;CAErD,gBAAgB;EACd,IAAI,yBAAyB;GAC3B,MAAM,QAA8B,CAAC;GACrC,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAC7C,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAE7C,wBAAwB;IAChB;IACN,MAAM;IACN;GACF,CAAC;GAED,aAAa;IACX,4BAA4B,IAAc;GAC5C;EACF;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,OAAO,eAAe,cAAmC;EAC/D;EACA;CACF,CAAC;CAED,MAAM,eAAe,MAAM,QAAQ,IAAI,KAAK,MAAM,KAAK,IAAI,KAAA;CAC3D,MAAM,aAAa,WAAW,OAAO;CACrC,MAAM,eAAe,eAAe;CACpC,MAAM,WAAW,CAAC,CAAC;CACnB,MAAM,gBAAgB,QAAQ,WAAW,QAAQ;CACjD,MAAM,oBAAoB,YAAY,WAAW;CACjD,MAAM,mBAAmB,WAAW,UAAU;CAE9C,OACE,oBAAC,aAAD;EACW;EACF;EACP,UAAU,CAAC,CAAC;EACA;EACZ,cAAc,YAAY,eAAe,KAAA;EAC9B;EACA;EACC;EAEZ,UAAA,qBAAC,SAAD;GAAe;GAAM,cAAc;GAAnC,UAAA,CACE,oBAAC,gBAAD;IAAgB,SAAA;IACd,UAAA,qBAAC,QAAD;KACE,IAAI;KACJ,MAAK;KACL,SAAQ;KACR,UAAU;KACV,gBAAc;KACd,oBACE,WACI,GAAG,QAAQ,UACX,aACE,GAAG,QAAQ,WACX,KAAA;KAER,WAAW,GACT,mBAAmB;MAAE,MAAM;MAAe,SAAS;KAAiB,CAAC,GACrE,CAAC,gBAAgB,yBACjB,SACF;KAjBF,UAAA,CAmBE,oBAAC,cAAD,EAAc,WAAU,eAAgB,CAAA,GACvC,eAAe,OAAO,cAAc,KAAK,IAAI,WACxC;;GACM,CAAA,GAChB,oBAAC,gBAAD;IAAgB,WAAU;IAAa,OAAM;IAC3C,UAAA,oBAAC,UAAD;KACE,MAAK;KACL,UAAU;KACV,WAAW,SAAS;MAClB,MAAM,SAAS,QAAQ,EAAE;MACzB,QAAQ,KAAK;KACf;IACD,CAAA;GACa,CAAA,CACT;;CACE,CAAA;AAEjB;AAEA,WAAW,cAAc"}

package/dist/components/Form/FieldLayout.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { FormConfig } from './context';
+export interface FieldLayoutProps {
+    inputId: string;
+    label?: string;
+    required?: boolean;
+    helperText?: string;
+    errorMessage?: string;
+    showError?: boolean;
+    fullWidth?: boolean;
+    formConfig?: FormConfig;
+    children: ReactNode;
+}
+export declare function FieldLayout({ inputId, label, required, helperText, errorMessage, showError, fullWidth, formConfig, children, }: FieldLayoutProps): import("react").JSX.Element;
+//# sourceMappingURL=FieldLayout.d.ts.map

package/dist/components/Form/FieldLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLayout.d.ts","sourceRoot":"","sources":["../../../src/components/Form/FieldLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAE5C,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAUD,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,SAAgB,EAChB,SAAgB,EAChB,UAAe,EACf,QAAQ,GACT,EAAE,gBAAgB,+BA6ElB"}

package/dist/components/Form/FieldLayout.js

@@ -0,0 +1,65 @@
+"use client";
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Label } from "../../primitives/label.js";
+import { labelVariants } from "./variants.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Form/FieldLayout.tsx
+function resolveLabelWidth(labelWidth) {
+	if (labelWidth === void 0) return;
+	return typeof labelWidth === "number" ? `${labelWidth}px` : labelWidth;
+}
+function FieldLayout({ inputId, label, required, helperText, errorMessage, showError = true, fullWidth = true, formConfig = {}, children }) {
+	const layout = formConfig.layout ?? "vertical";
+	const labelWidth = resolveLabelWidth(formConfig.labelWidth);
+	const hasError = !!errorMessage;
+	const showHelper = !!helperText && !hasError;
+	const labelNode = label ? /* @__PURE__ */ jsxs(Label, {
+		htmlFor: inputId,
+		className: cn(labelVariants({ required: !!required }), layout === "horizontal" && "mb-0 shrink-0 pt-2", layout === "inline" && "mb-0 shrink-0"),
+		style: layout === "horizontal" && labelWidth ? { width: labelWidth } : void 0,
+		children: [label, formConfig.colon && ":"]
+	}) : null;
+	const messages = /* @__PURE__ */ jsxs(Fragment, { children: [showError && hasError && /* @__PURE__ */ jsx("p", {
+		id: `${inputId}-error`,
+		className: "text-sm text-destructive",
+		role: "alert",
+		children: errorMessage
+	}), showHelper && /* @__PURE__ */ jsx("p", {
+		id: `${inputId}-helper`,
+		className: "text-sm text-muted-foreground",
+		children: helperText
+	})] });
+	if (layout === "horizontal") return /* @__PURE__ */ jsx("div", {
+		className: cn("space-y-1.5", fullWidth && "w-full"),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-4",
+			children: [labelNode, /* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1 space-y-1.5",
+				children: [children, messages]
+			})]
+		})
+	});
+	if (layout === "inline") return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-1.5", fullWidth && "w-full"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center gap-3",
+			children: [labelNode, /* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1",
+				children
+			})]
+		}), messages]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-1.5", fullWidth && "w-full"),
+		children: [
+			labelNode,
+			children,
+			messages
+		]
+	});
+}
+//#endregion
+export { FieldLayout };
+
+//# sourceMappingURL=FieldLayout.js.map

package/dist/components/Form/FieldLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLayout.js","names":[],"sources":["../../../src/components/Form/FieldLayout.tsx"],"sourcesContent":["'use client';\r\n\r\nimport type { ReactNode } from \"react\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { Label } from \"../../primitives/label\";\r\nimport { labelVariants } from \"./variants\";\r\nimport type { FormConfig } from \"./context\";\r\n\r\nexport interface FieldLayoutProps {\r\n  inputId: string;\r\n  label?: string;\r\n  required?: boolean;\r\n  helperText?: string;\r\n  errorMessage?: string;\r\n  showError?: boolean;\r\n  fullWidth?: boolean;\r\n  formConfig?: FormConfig;\r\n  children: ReactNode;\r\n}\r\n\r\nfunction resolveLabelWidth(labelWidth?: string | number): string | undefined {\r\n  if (labelWidth === undefined) {\r\n    return undefined;\r\n  }\r\n\r\n  return typeof labelWidth === \"number\" ? `${labelWidth}px` : labelWidth;\r\n}\r\n\r\nexport function FieldLayout({\r\n  inputId,\r\n  label,\r\n  required,\r\n  helperText,\r\n  errorMessage,\r\n  showError = true,\r\n  fullWidth = true,\r\n  formConfig = {},\r\n  children,\r\n}: FieldLayoutProps) {\r\n  const layout = formConfig.layout ?? \"vertical\";\r\n  const labelWidth = resolveLabelWidth(formConfig.labelWidth);\r\n  const hasError = !!errorMessage;\r\n  const showHelper = !!helperText && !hasError;\r\n\r\n  const labelNode = label ? (\r\n    <Label\r\n      htmlFor={inputId}\r\n      className={cn(\r\n        labelVariants({ required: !!required }),\r\n        layout === \"horizontal\" && \"mb-0 shrink-0 pt-2\",\r\n        layout === \"inline\" && \"mb-0 shrink-0\"\r\n      )}\r\n      style={layout === \"horizontal\" && labelWidth ? { width: labelWidth } : undefined}\r\n    >\r\n      {label}\r\n      {formConfig.colon && \":\"}\r\n    </Label>\r\n  ) : null;\r\n\r\n  const messages = (\r\n    <>\r\n      {showError && hasError && (\r\n        <p\r\n          id={`${inputId}-error`}\r\n          className=\"text-sm text-destructive\"\r\n          role=\"alert\"\r\n        >\r\n          {errorMessage}\r\n        </p>\r\n      )}\r\n\r\n      {showHelper && (\r\n        <p\r\n          id={`${inputId}-helper`}\r\n          className=\"text-sm text-muted-foreground\"\r\n        >\r\n          {helperText}\r\n        </p>\r\n      )}\r\n    </>\r\n  );\r\n\r\n  if (layout === \"horizontal\") {\r\n    return (\r\n      <div className={cn(\"space-y-1.5\", fullWidth && \"w-full\")}>\r\n        <div className=\"flex items-start gap-4\">\r\n          {labelNode}\r\n          <div className=\"min-w-0 flex-1 space-y-1.5\">\r\n            {children}\r\n            {messages}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  if (layout === \"inline\") {\r\n    return (\r\n      <div className={cn(\"space-y-1.5\", fullWidth && \"w-full\")}>\r\n        <div className=\"flex flex-wrap items-center gap-3\">\r\n          {labelNode}\r\n          <div className=\"min-w-0 flex-1\">{children}</div>\r\n        </div>\r\n        {messages}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div className={cn(\"space-y-1.5\", fullWidth && \"w-full\")}>\r\n      {labelNode}\r\n      {children}\r\n      {messages}\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":";;;;;;;AAoBA,SAAS,kBAAkB,YAAkD;CAC3E,IAAI,eAAe,KAAA,GACjB;CAGF,OAAO,OAAO,eAAe,WAAW,GAAG,WAAW,MAAM;AAC9D;AAEA,SAAgB,YAAY,EAC1B,SACA,OACA,UACA,YACA,cACA,YAAY,MACZ,YAAY,MACZ,aAAa,CAAC,GACd,YACmB;CACnB,MAAM,SAAS,WAAW,UAAU;CACpC,MAAM,aAAa,kBAAkB,WAAW,UAAU;CAC1D,MAAM,WAAW,CAAC,CAAC;CACnB,MAAM,aAAa,CAAC,CAAC,cAAc,CAAC;CAEpC,MAAM,YAAY,QAChB,qBAAC,OAAD;EACE,SAAS;EACT,WAAW,GACT,cAAc,EAAE,UAAU,CAAC,CAAC,SAAS,CAAC,GACtC,WAAW,gBAAgB,sBAC3B,WAAW,YAAY,eACzB;EACA,OAAO,WAAW,gBAAgB,aAAa,EAAE,OAAO,WAAW,IAAI,KAAA;EAPzE,UAAA,CASG,OACA,WAAW,SAAS,GAChB;CACL,CAAA,IAAA;CAEJ,MAAM,WACJ,qBAAA,UAAA,EAAA,UAAA,CACG,aAAa,YACZ,oBAAC,KAAD;EACE,IAAI,GAAG,QAAQ;EACf,WAAU;EACV,MAAK;EAEJ,UAAA;CACA,CAAA,GAGJ,cACC,oBAAC,KAAD;EACE,IAAI,GAAG,QAAQ;EACf,WAAU;EAET,UAAA;CACA,CAAA,CAEL,EAAA,CAAA;CAGJ,IAAI,WAAW,cACb,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,eAAe,aAAa,QAAQ;EACrD,UAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACG,WACD,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,UACA,QACE;GACF,CAAA,CAAA;;CACF,CAAA;CAIT,IAAI,WAAW,UACb,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,eAAe,aAAa,QAAQ;EAAvD,UAAA,CACE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACG,WACD,oBAAC,OAAD;IAAK,WAAU;IAAkB;GAAc,CAAA,CAC5C;EACJ,CAAA,GAAA,QACE;;CAIT,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,eAAe,aAAa,QAAQ;EAAvD,UAAA;GACG;GACA;GACA;EACE;;AAET"}

package/dist/components/Form/Form.d.ts

@@ -55,7 +55,7 @@ export interface FormProps<TFieldValues extends FieldValues = FieldValues, TCont
  * </Form>
  * ```
  */
-export declare function Form<TFieldValues extends FieldValues = FieldValues, TContext = unknown>({ schema: baseSchema, defaultValues, values, onSubmit, onError, config, children, form: externalForm, mode, reValidateMode, resolver: customResolver, ...formProps }: FormProps<TFieldValues, TContext>): import("react").JSX.Element;
+export declare function Form<TFieldValues extends FieldValues = FieldValues, TContext = unknown>({ schema: baseSchema, defaultValues, values, onSubmit, onError, config, children, form: externalForm, mode: modeProp, reValidateMode: reValidateModeProp, resolver: customResolver, ...formProps }: FormProps<TFieldValues, TContext>): import("react").JSX.Element;
 export declare namespace Form {
     var displayName: string;
 }

package/dist/components/Form/Form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,aAAa,EAClB,KAAK,kBAAkB,EACvB,KAAK,QAAQ,EAEd,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAIL,KAAK,UAAU,EAEhB,MAAM,WAAW,CAAC;AAEnB;;GAEG;AACH,MAAM,WAAW,SAAS,CACxB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,QAAQ,GAAG,OAAO,CAClB,SAAQ,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/E,uEAAuE;IAEvE,MAAM,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,YAAY,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IAC3C,kCAAkC;IAClC,aAAa,CAAC,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,eAAe,CAAC,CAAC;IACtE,kCAAkC;IAClC,MAAM,CAAC,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC;IACxD,qBAAqB;IACrB,QAAQ,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACvC,oBAAoB;IACpB,OAAO,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAC3C,yBAAyB;IACzB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,eAAe;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,oDAAoD;IACpD,IAAI,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACnC,sBAAsB;IACtB,IAAI,CAAC,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;IACpD,wBAAwB;IACxB,cAAc,CAAC,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,gBAAgB,CAAC,CAAC;IACxE,yCAAyC;IACzC,QAAQ,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC;CACnC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,IAAI,CAClB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,QAAQ,GAAG,OAAO,EAClB,EACA,MAAM,EAAE,UAAU,EAClB,aAAa,EACb,MAAM,EACN,QAAQ,EACR,OAAO,EACP,MAAM,EACN,QAAQ,EACR,IAAI,EAAE,YAAY,EAClB,IAAe,EACf,cAA2B,EAC3B,QAAQ,EAAE,cAAc,EACxB,GAAG,SAAS,EACb,EAAE,SAAS,CAAC,YAAY,EAAE,QAAQ,CAAC,+BAmGnC;yBAnHe,IAAI"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,aAAa,EAClB,KAAK,kBAAkB,EACvB,KAAK,QAAQ,EAEd,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAIL,KAAK,UAAU,EAEhB,MAAM,WAAW,CAAC;AAEnB;;GAEG;AACH,MAAM,WAAW,SAAS,CACxB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,QAAQ,GAAG,OAAO,CAClB,SAAQ,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/E,uEAAuE;IAEvE,MAAM,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,YAAY,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IAC3C,kCAAkC;IAClC,aAAa,CAAC,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,eAAe,CAAC,CAAC;IACtE,kCAAkC;IAClC,MAAM,CAAC,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC;IACxD,qBAAqB;IACrB,QAAQ,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACvC,oBAAoB;IACpB,OAAO,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAC3C,yBAAyB;IACzB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,eAAe;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,oDAAoD;IACpD,IAAI,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACnC,sBAAsB;IACtB,IAAI,CAAC,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;IACpD,wBAAwB;IACxB,cAAc,CAAC,EAAE,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,gBAAgB,CAAC,CAAC;IACxE,yCAAyC;IACzC,QAAQ,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC;CACnC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,IAAI,CAClB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,QAAQ,GAAG,OAAO,EAClB,EACA,MAAM,EAAE,UAAU,EAClB,aAAa,EACb,MAAM,EACN,QAAQ,EACR,OAAO,EACP,MAAM,EACN,QAAQ,EACR,IAAI,EAAE,YAAY,EAClB,IAAI,EAAE,QAAQ,EACd,cAAc,EAAE,kBAAkB,EAClC,QAAQ,EAAE,cAAc,EACxB,GAAG,SAAS,EACb,EAAE,SAAS,CAAC,YAAY,EAAE,QAAQ,CAAC,+BA+GnC;yBA/He,IAAI"}

package/dist/components/Form/Form.js

@@ -33,21 +33,24 @@ import { z } from "zod";
 * </Form>
 * ```
 */
-function Form({ schema: baseSchema, defaultValues, values, onSubmit, onError, config, children, form: externalForm, mode = "onBlur", reValidateMode = "onChange", resolver: customResolver, ...formProps }) {
+function Form({ schema: baseSchema, defaultValues, values, onSubmit, onError, config, children, form: externalForm, mode: modeProp, reValidateMode: reValidateModeProp, resolver: customResolver, ...formProps }) {
 	const mergedConfig = {
 		...defaultFormConfig,
 		...config
 	};
+	const mode = modeProp ?? (mergedConfig.validateOnChange ? "onChange" : mergedConfig.validateOnBlur !== false ? "onBlur" : "onSubmit");
+	const reValidateMode = reValidateModeProp ?? (mergedConfig.validateOnChange ? "onChange" : "onBlur");
 	const { registerFieldValidation, unregisterFieldValidation, getValidationSchema } = useFieldValidationRegistry();
+	const dynamicResolver = useCallback(async (vals, context, options) => {
+		if (customResolver) return customResolver(vals, context, options);
+		const fieldSchema = getValidationSchema();
+		let finalSchema;
+		if (baseSchema instanceof z.ZodObject) finalSchema = baseSchema.merge(fieldSchema);
+		else finalSchema = baseSchema ?? fieldSchema;
+		return zodResolver(finalSchema)(vals, context, options);
+	}, [baseSchema, customResolver]);
 	const internalForm = useForm({
-		resolver: useCallback(async (vals, context, options) => {
-			if (customResolver) return customResolver(vals, context, options);
-			const fieldSchema = getValidationSchema();
-			let finalSchema;
-			if (baseSchema instanceof z.ZodObject) finalSchema = baseSchema.merge(fieldSchema);
-			else finalSchema = baseSchema ?? fieldSchema;
-			return zodResolver(finalSchema)(vals, context, options);
-		}, [baseSchema, customResolver]),
+		resolver: dynamicResolver,
 		defaultValues,
 		values,
 		mode,