@skybin-tech/nebula-ui 0.0.29 → 0.0.31

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","names":[],"sources":["../../../src/components/Form/Combobox.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useContext, useEffect, useId, useMemo, useState } from \"react\";\r\nimport { Check, ChevronsUpDown } 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 {\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 { FormConfigContext, type FieldValidationRules, type FormConfig } from \"./context\";\r\nimport { FieldLayout } from \"./FieldLayout\";\r\nimport type { SelectOption } from \"./Select\";\r\n\r\nconst comboboxVariants = cva(\"w-full justify-between 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 ComboboxProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof comboboxVariants> {\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  searchPlaceholder?: string;\r\n  emptyText?: string;\r\n  options?: SelectOption[];\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 Combobox<\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 option\",\r\n  searchPlaceholder = \"Search...\",\r\n  emptyText = \"No option found.\",\r\n  options = [],\r\n  disabled,\r\n  className,\r\n  id: providedId,\r\n  control: externalControl,\r\n  required,\r\n  validate,\r\n}: ComboboxProps<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: \"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 selectedOption = useMemo(\r\n    () => options.find((option) => option.value.toString() === field.value?.toString()),\r\n    [field.value, options]\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      <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            role=\"combobox\"\r\n            aria-expanded={open}\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              comboboxVariants({ size: effectiveSize, variant: effectiveVariant }),\r\n              !field.value && \"text-muted-foreground\",\r\n              className\r\n            )}\r\n          >\r\n            {selectedOption?.label ?? placeholder}\r\n            <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            <CommandInput placeholder={searchPlaceholder} />\r\n            <CommandList>\r\n              <CommandEmpty>{emptyText}</CommandEmpty>\r\n              <CommandGroup>\r\n                {options.map((option) => (\r\n                  <CommandItem\r\n                    key={option.value}\r\n                    value={option.label}\r\n                    disabled={option.disabled}\r\n                    onSelect={() => {\r\n                      field.onChange(option.value.toString());\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                        field.value?.toString() === option.value.toString()\r\n                          ? \"opacity-100\"\r\n                          : \"opacity-0\"\r\n                      )}\r\n                    />\r\n                    {option.label}\r\n                  </CommandItem>\r\n                ))}\r\n              </CommandGroup>\r\n            </CommandList>\r\n          </Command>\r\n        </PopoverContent>\r\n      </Popover>\r\n    </FieldLayout>\r\n  );\r\n}\r\n\r\nCombobox.displayName = \"Combobox\";\r\n"],"mappings":"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"}
+{"version":3,"file":"Combobox.js","names":[],"sources":["../../../src/components/Form/Combobox.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useContext, useEffect, useId, useMemo, useState } from \"react\";\r\nimport { Check, ChevronsUpDown } 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 {\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 { FormConfigContext, type FieldValidationRules, type FormConfig } from \"./context\";\r\nimport { FieldLayout } from \"./FieldLayout\";\r\nimport type { SelectOption } from \"./Select\";\r\n\r\nconst comboboxVariants = cva(\"w-full justify-between 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 ComboboxProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof comboboxVariants> {\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  searchPlaceholder?: string;\r\n  emptyText?: string;\r\n  options?: SelectOption[];\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 Combobox<\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 option\",\r\n  searchPlaceholder = \"Search...\",\r\n  emptyText = \"No option found.\",\r\n  options = [],\r\n  disabled,\r\n  className,\r\n  id: providedId,\r\n  control: externalControl,\r\n  required,\r\n  validate,\r\n}: ComboboxProps<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: \"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 selectedOption = useMemo(\r\n    () => options.find((option) => option.value.toString() === field.value?.toString()),\r\n    [field.value, options]\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      <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            role=\"combobox\"\r\n            aria-expanded={open}\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              comboboxVariants({ size: effectiveSize, variant: effectiveVariant }),\r\n              !field.value && \"text-muted-foreground\",\r\n              className\r\n            )}\r\n          >\r\n            {selectedOption?.label ?? placeholder}\r\n            <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            <CommandInput placeholder={searchPlaceholder} />\r\n            <CommandList>\r\n              <CommandEmpty>{emptyText}</CommandEmpty>\r\n              <CommandGroup>\r\n                {options.map((option) => (\r\n                  <CommandItem\r\n                    key={option.value}\r\n                    value={option.label}\r\n                    disabled={option.disabled}\r\n                    onSelect={() => {\r\n                      field.onChange(option.value.toString());\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                        field.value?.toString() === option.value.toString()\r\n                          ? \"opacity-100\"\r\n                          : \"opacity-0\"\r\n                      )}\r\n                    />\r\n                    {option.label}\r\n                  </CommandItem>\r\n                ))}\r\n              </CommandGroup>\r\n            </CommandList>\r\n          </Command>\r\n        </PopoverContent>\r\n      </Popover>\r\n    </FieldLayout>\r\n  );\r\n}\r\n\r\nCombobox.displayName = \"Combobox\";\r\n"],"mappings":";;;;;;;;;;;;;;AAqBA,IAAM,mBAAmB,IAAI,sCAAsC;CACjE,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;AAwBD,SAAgB,SAGd,EACA,MACA,OACA,YACA,YAAY,MACZ,OAAO,aACP,MACA,SACA,YAAY,MACZ,cAAc,iBACd,oBAAoB,aACpB,YAAY,oBACZ,UAAU,CAAC,GACX,UACA,WACA,IAAI,YACJ,SAAS,iBACT,UACA,YACqC;CACrC,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,iBAAiB,cACf,QAAQ,MAAM,WAAW,OAAO,MAAM,SAAS,MAAM,MAAM,OAAO,SAAS,CAAC,GAClF,CAAC,MAAM,OAAO,OAAO,CACvB;CAEA,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,MAAK;KACL,iBAAe;KACf,UAAU;KACV,gBAAc;KACd,oBACE,WACI,GAAG,QAAQ,UACX,aACE,GAAG,QAAQ,WACX,KAAA;KAER,WAAW,GACT,iBAAiB;MAAE,MAAM;MAAe,SAAS;KAAiB,CAAC,GACnE,CAAC,MAAM,SAAS,yBAChB,SACF;KAnBF,UAAA,CAqBG,gBAAgB,SAAS,aAC1B,oBAAC,gBAAD,EAAgB,WAAU,mCAAoC,CAAA,CACxD;;GACM,CAAA,GAChB,oBAAC,gBAAD;IAAgB,WAAU;IAAgB,OAAM;IAC9C,UAAA,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,cAAD,EAAc,aAAa,kBAAoB,CAAA,GAC/C,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,cAAD,EAAA,UAAe,UAAwB,CAAA,GACvC,oBAAC,cAAD,EAAA,UACG,QAAQ,KAAK,WACZ,qBAAC,aAAD;KAEE,OAAO,OAAO;KACd,UAAU,OAAO;KACjB,gBAAgB;MACd,MAAM,SAAS,OAAO,MAAM,SAAS,CAAC;MACtC,QAAQ,KAAK;KACf;KAPF,UAAA,CASE,oBAAC,OAAD,EACE,WAAW,GACT,gBACA,MAAM,OAAO,SAAS,MAAM,OAAO,MAAM,SAAS,IAC9C,gBACA,WACN,EACD,CAAA,GACA,OAAO,KACG;IAjBN,GAAA,OAAO,KAiBD,CACd,EACW,CAAA,CACH,EAAA,CAAA,CACN,EAAA,CAAA;GACK,CAAA,CACT;;CACE,CAAA;AAEjB;AAEA,SAAS,cAAc"}

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

@@ -1 +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;YAAnC,CACE,oBAAC,gBAAD;GAAgB,SAAA;aACd,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;cAfF,CAiBG,kBACC,qBAAC,QAAD;KAAM,WAAU;eAAhB,CACE,oBAAC,QAAD;MAAM,eAAY;gBAAQ,eAAe,gBAAgB,IAAI;KAAQ,CAAA,GACpE,CAAC,WAAW,oBAAC,QAAD;MAAM,WAAU;gBAAY,gBAAgB;KAAW,CAAA,CAChE;SAEN,oBAAC,QAAD;KAAM,WAAU;eAAY,UAAU,MAAM;IAAkB,CAAA,GAE/D,CAAC,WAAW,oBAAC,gBAAD,EAAgB,WAAU,mCAAoC,CAAA,CACrE;;EACM,CAAA,GAChB,oBAAC,gBAAD;GAAgB,WAAU;GAAgB,OAAM;aAC9C,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;cAVF,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;eANF;MAQE,oBAAC,OAAD,EACE,WAAW,GACT,gBACA,UAAU,QAAQ,OAAO,gBAAgB,WAC3C,EACD,CAAA;MACD,oBAAC,QAAD;OAAM,eAAY;OAAO,WAAU;iBAChC,eAAe,QAAQ,IAAI;MACxB,CAAA;MACN,oBAAC,QAAD;OAAM,WAAU;iBAAY,QAAQ;MAAW,CAAA;MAC/C,oBAAC,QAAD;OAAM,WAAU;iBACb,QAAQ;MACL,CAAA;KACK;OApBN,QAAQ,IAoBF,CACd,EACW,CAAA,CACH,EAAA,CAAA,CACN;;EACK,CAAA,CACT;;AAEb"}
+{"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":"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"}

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

@@ -1 +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;YAEZ,qBAAC,OAAD;GAAK,WAAU;aAAf,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;cACX;GAEO,CAAA,CAEP;;CACM,CAAA;AAEjB;AAEA,cAAc,cAAc"}
+{"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.map

@@ -1 +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"}
+{"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;AAqBlE,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

@@ -11,8 +11,14 @@ 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";
+import { format, startOfDay } from "date-fns";
 //#region src/components/Form/DatePicker.tsx
+function toStartOfDay(value) {
+	if (!value || value === "") return;
+	const date = value instanceof Date ? value : new Date(value);
+	if (Number.isNaN(date.getTime())) return;
+	return startOfDay(date);
+}
 var datePickerVariants = cva("w-full justify-start text-left font-normal", {
 	variants: {
 		size: {
@@ -66,7 +72,7 @@ function DatePicker({ name, label, helperText, showError = true, error: customEr
 		name,
 		control
 	});
-	const selectedDate = field.value ? new Date(field.value) : void 0;
+	const selectedDate = toStartOfDay(field.value);
 	const fieldError = fieldState.error?.message;
 	const errorMessage = customError ?? fieldError;
 	const hasError = !!errorMessage;
@@ -107,7 +113,7 @@ function DatePicker({ name, label, helperText, showError = true, error: customEr
 					mode: "single",
 					selected: selectedDate,
 					onSelect: (date) => {
-						field.onChange(date ?? "");
+						field.onChange(date ? startOfDay(date) : "");
 						setOpen(false);
 					}
 				})

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

@@ -1 +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;YAEZ,qBAAC,SAAD;GAAe;GAAM,cAAc;aAAnC,CACE,oBAAC,gBAAD;IAAgB,SAAA;cACd,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;eAjBF,CAmBE,oBAAC,cAAD,EAAc,WAAU,eAAgB,CAAA,GACvC,eAAe,OAAO,cAAc,KAAK,IAAI,WACxC;;GACM,CAAA,GAChB,oBAAC,gBAAD;IAAgB,WAAU;IAAa,OAAM;cAC3C,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"}
+{"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, startOfDay } 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\nfunction toStartOfDay(value: unknown): Date | undefined {\r\n  if (!value || value === \"\") {\r\n    return undefined;\r\n  }\r\n\r\n  const date = value instanceof Date ? value : new Date(value as string | number);\r\n  if (Number.isNaN(date.getTime())) {\r\n    return undefined;\r\n  }\r\n\r\n  return startOfDay(date);\r\n}\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 = toStartOfDay(field.value);\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 ? startOfDay(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,SAAS,aAAa,OAAkC;CACtD,IAAI,CAAC,SAAS,UAAU,IACtB;CAGF,MAAM,OAAO,iBAAiB,OAAO,QAAQ,IAAI,KAAK,KAAwB;CAC9E,IAAI,OAAO,MAAM,KAAK,QAAQ,CAAC,GAC7B;CAGF,OAAO,WAAW,IAAI;AACxB;AAEA,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,aAAa,MAAM,KAAK;CAC7C,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,OAAO,WAAW,IAAI,IAAI,EAAE;MAC3C,QAAQ,KAAK;KACf;IACD,CAAA;GACa,CAAA,CACT;;CACE,CAAA;AAEjB;AAEA,WAAW,cAAc"}

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

@@ -0,0 +1,28 @@
+import { Control, FieldPath, FieldValues } from 'react-hook-form';
+import { VariantProps } from 'class-variance-authority';
+declare const dateTimePickerVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | null | undefined;
+    variant?: "default" | "error" | "success" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface DateTimePickerProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends VariantProps<typeof dateTimePickerVariants> {
+    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>;
+    minuteStep?: number;
+}
+export declare function DateTimePicker<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, minuteStep, }: DateTimePickerProps<TFieldValues, TName>): import("react").JSX.Element;
+export declare namespace DateTimePicker {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=DateTimePicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/Form/DateTimePicker.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;AAUlE,QAAA,MAAM,sBAAsB;;;8EAiB1B,CAAC;AAEH,MAAM,WAAW,mBAAmB,CAClC,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,CAC/D,SAAQ,YAAY,CAAC,OAAO,sBAAsB,CAAC;IACnD,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;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAkCD,wBAAgB,cAAc,CAC5B,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,EACR,UAAc,GACf,EAAE,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,+BAuL1C;yBA3Me,cAAc"}

package/dist/components/Form/DateTimePicker.js

@@ -0,0 +1,202 @@
+"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 { Separator } from "../../primitives/separator.js";
+import { TimePicker } from "./TimePicker.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, Clock } from "lucide-react";
+import { format, startOfDay } from "date-fns";
+//#region src/components/Form/DateTimePicker.tsx
+var dateTimePickerVariants = 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 toValidDate(value) {
+	if (!value || value === "") return;
+	const date = value instanceof Date ? value : new Date(value);
+	if (Number.isNaN(date.getTime())) return;
+	return date;
+}
+function hasTimePart(date) {
+	return date.getHours() !== 0 || date.getMinutes() !== 0 || date.getSeconds() !== 0 || date.getMilliseconds() !== 0;
+}
+function withPreservedTime(nextDay, previous) {
+	const next = new Date(nextDay);
+	next.setHours(previous.getHours(), previous.getMinutes(), previous.getSeconds(), previous.getMilliseconds());
+	return next;
+}
+function isSelectEventTarget(target) {
+	return target instanceof Element && Boolean(target.closest("[data-radix-select-content]"));
+}
+function DateTimePicker({ name, label, helperText, showError = true, error: customError, size, variant, fullWidth = true, placeholder = "Pick a date", disabled, className, id: providedId, control: externalControl, required, validate, minuteStep = 5 }) {
+	const generatedId = useId();
+	const inputId = providedId ?? generatedId;
+	const [open, setOpen] = useState(false);
+	const [timeOpen, setTimeOpen] = useState(false);
+	const [timeSet, setTimeSet] = 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: "datetime",
+				rules
+			});
+			return () => {
+				unregisterFieldValidation?.(name);
+			};
+		}
+	}, [
+		registerFieldValidation,
+		unregisterFieldValidation,
+		name,
+		required,
+		validate
+	]);
+	const { field, fieldState } = useController({
+		name,
+		control
+	});
+	const selectedDate = toValidDate(field.value);
+	useEffect(() => {
+		const date = toValidDate(field.value);
+		if (!date) {
+			setTimeSet(false);
+			return;
+		}
+		if (hasTimePart(date)) setTimeSet(true);
+	}, [field.value]);
+	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;
+	const displayHasTime = timeSet && !!selectedDate;
+	const handleOpenChange = (nextOpen) => {
+		setOpen(nextOpen);
+		if (nextOpen && timeSet) {
+			setTimeOpen(true);
+			return;
+		}
+		if (!nextOpen) setTimeOpen(false);
+	};
+	return /* @__PURE__ */ jsx(FieldLayout, {
+		inputId,
+		label,
+		required: !!required,
+		helperText,
+		errorMessage: showError ? errorMessage : void 0,
+		showError,
+		fullWidth,
+		formConfig,
+		children: /* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: handleOpenChange,
+			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(dateTimePickerVariants({
+						size: effectiveSize,
+						variant: effectiveVariant
+					}), !selectedDate && "text-muted-foreground", className),
+					children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }), selectedDate ? format(selectedDate, displayHasTime ? "PPP p" : "PPP") : placeholder]
+				})
+			}), /* @__PURE__ */ jsxs(PopoverContent, {
+				className: "w-auto p-0",
+				align: "start",
+				onPointerDownOutside: (event) => {
+					if (isSelectEventTarget(event.target)) event.preventDefault();
+				},
+				onFocusOutside: (event) => {
+					if (isSelectEventTarget(event.target)) event.preventDefault();
+				},
+				children: [
+					/* @__PURE__ */ jsx(Calendar, {
+						mode: "single",
+						selected: selectedDate,
+						onSelect: (date) => {
+							if (!date) {
+								field.onChange("");
+								setTimeSet(false);
+								return;
+							}
+							if (selectedDate && timeSet) {
+								field.onChange(withPreservedTime(date, selectedDate));
+								setOpen(false);
+								return;
+							}
+							field.onChange(startOfDay(date));
+						}
+					}),
+					/* @__PURE__ */ jsx(Separator, {}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "p-3",
+						children: [/* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							variant: "ghost",
+							disabled: effectiveDisabled,
+							className: "h-8 w-full justify-start px-2 font-normal",
+							onClick: () => setTimeOpen((current) => !current),
+							children: [/* @__PURE__ */ jsx(Clock, { className: "mr-2 h-4 w-4" }), displayHasTime && selectedDate ? format(selectedDate, "p") : "Add time"]
+						}), timeOpen ? /* @__PURE__ */ jsx(TimePicker, {
+							className: "mt-2",
+							value: selectedDate,
+							minuteStep,
+							disabled: effectiveDisabled,
+							onChange: (date) => {
+								field.onChange(date);
+								setTimeSet(true);
+							},
+							onClear: () => {
+								if (selectedDate) field.onChange(startOfDay(selectedDate));
+								setTimeSet(false);
+							}
+						}) : null]
+					})
+				]
+			})]
+		})
+	});
+}
+DateTimePicker.displayName = "DateTimePicker";
+//#endregion
+export { DateTimePicker };
+
+//# sourceMappingURL=DateTimePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.js","names":[],"sources":["../../../src/components/Form/DateTimePicker.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useContext, useEffect, useId, useState } from \"react\";\r\nimport { format, startOfDay } from \"date-fns\";\r\nimport { CalendarIcon, Clock } 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 { Separator } from \"../../primitives/separator\";\r\nimport { FormConfigContext, type FieldValidationRules, type FormConfig } from \"./context\";\r\nimport { FieldLayout } from \"./FieldLayout\";\r\nimport { TimePicker } from \"./TimePicker\";\r\n\r\nconst dateTimePickerVariants = 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 DateTimePickerProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof dateTimePickerVariants> {\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  minuteStep?: number;\r\n}\r\n\r\nfunction toValidDate(value: unknown): Date | undefined {\r\n  if (!value || value === \"\") {\r\n    return undefined;\r\n  }\r\n\r\n  const date = value instanceof Date ? value : new Date(value as string | number);\r\n  if (Number.isNaN(date.getTime())) {\r\n    return undefined;\r\n  }\r\n\r\n  return date;\r\n}\r\n\r\nfunction hasTimePart(date: Date): boolean {\r\n  return date.getHours() !== 0 || date.getMinutes() !== 0 || date.getSeconds() !== 0 || date.getMilliseconds() !== 0;\r\n}\r\n\r\nfunction withPreservedTime(nextDay: Date, previous: Date): Date {\r\n  const next = new Date(nextDay);\r\n  next.setHours(\r\n    previous.getHours(),\r\n    previous.getMinutes(),\r\n    previous.getSeconds(),\r\n    previous.getMilliseconds()\r\n  );\r\n  return next;\r\n}\r\n\r\nfunction isSelectEventTarget(target: EventTarget | null): boolean {\r\n  return target instanceof Element && Boolean(target.closest(\"[data-radix-select-content]\"));\r\n}\r\n\r\nexport function DateTimePicker<\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  minuteStep = 5,\r\n}: DateTimePickerProps<TFieldValues, TName>) {\r\n  const generatedId = useId();\r\n  const inputId = providedId ?? generatedId;\r\n  const [open, setOpen] = useState(false);\r\n  const [timeOpen, setTimeOpen] = useState(false);\r\n  const [timeSet, setTimeSet] = 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: \"datetime\",\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 = toValidDate(field.value);\r\n\r\n  useEffect(() => {\r\n    const date = toValidDate(field.value);\r\n    if (!date) {\r\n      setTimeSet(false);\r\n      return;\r\n    }\r\n\r\n    if (hasTimePart(date)) {\r\n      setTimeSet(true);\r\n    }\r\n  }, [field.value]);\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  const displayHasTime = timeSet && !!selectedDate;\r\n\r\n  const handleOpenChange = (nextOpen: boolean) => {\r\n    setOpen(nextOpen);\r\n    if (nextOpen && timeSet) {\r\n      setTimeOpen(true);\r\n      return;\r\n    }\r\n\r\n    if (!nextOpen) {\r\n      setTimeOpen(false);\r\n    }\r\n  };\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={handleOpenChange}>\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              dateTimePickerVariants({ 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\r\n              ? format(selectedDate, displayHasTime ? \"PPP p\" : \"PPP\")\r\n              : placeholder}\r\n          </Button>\r\n        </PopoverTrigger>\r\n        <PopoverContent\r\n          className=\"w-auto p-0\"\r\n          align=\"start\"\r\n          onPointerDownOutside={(event) => {\r\n            if (isSelectEventTarget(event.target)) {\r\n              event.preventDefault();\r\n            }\r\n          }}\r\n          onFocusOutside={(event) => {\r\n            if (isSelectEventTarget(event.target)) {\r\n              event.preventDefault();\r\n            }\r\n          }}\r\n        >\r\n          <Calendar\r\n            mode=\"single\"\r\n            selected={selectedDate}\r\n            onSelect={(date) => {\r\n              if (!date) {\r\n                field.onChange(\"\");\r\n                setTimeSet(false);\r\n                return;\r\n              }\r\n\r\n              if (selectedDate && timeSet) {\r\n                field.onChange(withPreservedTime(date, selectedDate));\r\n                setOpen(false);\r\n                return;\r\n              }\r\n\r\n              field.onChange(startOfDay(date));\r\n            }}\r\n          />\r\n          <Separator />\r\n          <div className=\"p-3\">\r\n            <Button\r\n              type=\"button\"\r\n              variant=\"ghost\"\r\n              disabled={effectiveDisabled}\r\n              className=\"h-8 w-full justify-start px-2 font-normal\"\r\n              onClick={() => setTimeOpen((current) => !current)}\r\n            >\r\n              <Clock className=\"mr-2 h-4 w-4\" />\r\n              {displayHasTime && selectedDate ? format(selectedDate, \"p\") : \"Add time\"}\r\n            </Button>\r\n            {timeOpen ? (\r\n              <TimePicker\r\n                className=\"mt-2\"\r\n                value={selectedDate}\r\n                minuteStep={minuteStep}\r\n                disabled={effectiveDisabled}\r\n                onChange={(date) => {\r\n                  field.onChange(date);\r\n                  setTimeSet(true);\r\n                }}\r\n                onClear={() => {\r\n                  if (selectedDate) {\r\n                    field.onChange(startOfDay(selectedDate));\r\n                  }\r\n                  setTimeSet(false);\r\n                }}\r\n              />\r\n            ) : null}\r\n          </div>\r\n        </PopoverContent>\r\n      </Popover>\r\n    </FieldLayout>\r\n  );\r\n}\r\n\r\nDateTimePicker.displayName = \"DateTimePicker\";\r\n"],"mappings":"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"}

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

@@ -1 +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;YAPzE,CASG,OACA,WAAW,SAAS,GAChB;MACL;CAEJ,MAAM,WACJ,qBAAA,UAAA,EAAA,UAAA,CACG,aAAa,YACZ,oBAAC,KAAD;EACE,IAAI,GAAG,QAAQ;EACf,WAAU;EACV,MAAK;YAEJ;CACA,CAAA,GAGJ,cACC,oBAAC,KAAD;EACE,IAAI,GAAG,QAAQ;EACf,WAAU;YAET;CACA,CAAA,CAEL,EAAA,CAAA;CAGJ,IAAI,WAAW,cACb,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,eAAe,aAAa,QAAQ;YACrD,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,WACD,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,UACA,QACE;KACF;;CACF,CAAA;CAIT,IAAI,WAAW,UACb,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,eAAe,aAAa,QAAQ;YAAvD,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,WACD,oBAAC,OAAD;IAAK,WAAU;IAAkB;GAAc,CAAA,CAC5C;MACJ,QACE;;CAIT,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,eAAe,aAAa,QAAQ;YAAvD;GACG;GACA;GACA;EACE;;AAET"}
+{"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.js

@@ -41,15 +41,16 @@ function Form({ schema: baseSchema, defaultValues, values, onSubmit, onError, co
 	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,

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

@@ -1 +1 @@
-{"version":3,"file":"Form.js","names":[],"sources":["../../../src/components/Form/Form.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useCallback, useMemo, type ReactNode } from \"react\";\r\nimport {\r\n  useForm,\r\n  FormProvider as RHFFormProvider,\r\n  type UseFormReturn,\r\n  type FieldValues,\r\n  type UseFormProps,\r\n  type SubmitHandler,\r\n  type SubmitErrorHandler,\r\n  type Resolver,\r\n  type Path,\r\n} from \"react-hook-form\";\r\nimport { zodResolver } from \"@hookform/resolvers/zod\";\r\nimport { z } from \"zod\";\r\nimport { \r\n  FormConfigContext, \r\n  defaultFormConfig, \r\n  useFieldValidationRegistry,\r\n  type FormConfig, \r\n  type FormContextValue \r\n} from \"./context\";\r\n\r\n/**\r\n * Props for the Form component\r\n */\r\nexport interface FormProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TContext = unknown\r\n> extends Omit<React.FormHTMLAttributes<HTMLFormElement>, \"onSubmit\" | \"onError\"> {\r\n  /** Base Zod schema for validation (will be extended by field props) */\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  schema?: z.ZodType<TFieldValues, any, any>;\r\n  /** Default values for the form */\r\n  defaultValues?: UseFormProps<TFieldValues, TContext>[\"defaultValues\"];\r\n  /** Values to reset the form to */\r\n  values?: UseFormProps<TFieldValues, TContext>[\"values\"];\r\n  /** Submit handler */\r\n  onSubmit?: SubmitHandler<TFieldValues>;\r\n  /** Error handler */\r\n  onError?: SubmitErrorHandler<TFieldValues>;\r\n  /** Form configuration */\r\n  config?: FormConfig;\r\n  /** Children */\r\n  children?: ReactNode;\r\n  /** External form instance (for controlled forms) */\r\n  form?: UseFormReturn<TFieldValues>;\r\n  /** Validation mode */\r\n  mode?: UseFormProps<TFieldValues, TContext>[\"mode\"];\r\n  /** Revalidation mode */\r\n  reValidateMode?: UseFormProps<TFieldValues, TContext>[\"reValidateMode\"];\r\n  /** Custom resolver (overrides schema) */\r\n  resolver?: Resolver<TFieldValues>;\r\n}\r\n\r\n/**\r\n * Form component that provides form context and validation\r\n * \r\n * Child components like TextBox can register their validation rules automatically.\r\n * \r\n * @example\r\n * ```tsx\r\n * // Validation is automatically built from component props\r\n * <Form onSubmit={handleSubmit} defaultValues={{ username: \"\", email: \"\" }}>\r\n *   <TextBox name=\"username\" label=\"Username\" required minLength={3} maxLength={50} />\r\n *   <TextBox name=\"email\" label=\"Email\" type=\"email\" required email />\r\n *   <Button type=\"submit\">Submit</Button>\r\n * </Form>\r\n * \r\n * // Or with a base schema that gets extended\r\n * const baseSchema = z.object({\r\n *   username: z.string(),\r\n *   email: z.string(),\r\n * });\r\n * \r\n * <Form schema={baseSchema} onSubmit={handleSubmit}>\r\n *   <TextBox name=\"username\" required minLength={3} /> // Adds required + minLength\r\n *   <TextBox name=\"email\" required email /> // Adds required + email validation\r\n * </Form>\r\n * ```\r\n */\r\nexport function Form<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TContext = unknown\r\n>({\r\n  schema: baseSchema,\r\n  defaultValues,\r\n  values,\r\n  onSubmit,\r\n  onError,\r\n  config,\r\n  children,\r\n  form: externalForm,\r\n  mode: modeProp,\r\n  reValidateMode: reValidateModeProp,\r\n  resolver: customResolver,\r\n  ...formProps\r\n}: FormProps<TFieldValues, TContext>) {\r\n  const mergedConfig = { ...defaultFormConfig, ...config };\r\n\r\n  const mode =\r\n    modeProp ??\r\n    (mergedConfig.validateOnChange\r\n      ? \"onChange\"\r\n      : mergedConfig.validateOnBlur !== false\r\n        ? \"onBlur\"\r\n        : \"onSubmit\");\r\n\r\n  const reValidateMode =\r\n    reValidateModeProp ??\r\n    (mergedConfig.validateOnChange ? \"onChange\" : \"onBlur\");\r\n\r\n  const {\r\n    registerFieldValidation,\r\n    unregisterFieldValidation,\r\n    getValidationSchema,\r\n  } = useFieldValidationRegistry();\r\n\r\n  // Stable resolver that reads from fieldsRef at validation time — no re-renders\r\n  // needed on field registration, and no race condition with useEffect timing.\r\n  const dynamicResolver = useCallback<Resolver<TFieldValues>>(\r\n    async (vals, context, options) => {\r\n      if (customResolver) {\r\n        return customResolver(vals, context, options);\r\n      }\r\n      const fieldSchema = getValidationSchema();\r\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n      let finalSchema: z.ZodType<any, any, any>;\r\n      if (baseSchema instanceof z.ZodObject) {\r\n        finalSchema = baseSchema.merge(fieldSchema);\r\n      } else {\r\n        finalSchema = baseSchema ?? fieldSchema;\r\n      }\r\n      return zodResolver(finalSchema)(vals, context, options);\r\n    },\r\n    // getValidationSchema reads a ref — always current, intentionally omitted.\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    [baseSchema, customResolver]\r\n  );\r\n\r\n  const internalForm = useForm<TFieldValues>({\r\n    resolver: dynamicResolver,\r\n    defaultValues,\r\n    values,\r\n    mode,\r\n    reValidateMode,\r\n  });\r\n\r\n  const form = externalForm ?? internalForm;\r\n\r\n  // Trigger validation for a specific field\r\n  const triggerValidation = useCallback(async (name: string) => {\r\n    return form.trigger(name as Path<TFieldValues>);\r\n  }, [form]);\r\n\r\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\r\n    e.preventDefault();\r\n    if (onSubmit) {\r\n      form.handleSubmit(onSubmit, onError)(e);\r\n    }\r\n  };\r\n\r\n  const contextValue = useMemo<FormContextValue<TFieldValues>>(\r\n    () => ({\r\n      form,\r\n      registerFieldValidation,\r\n      unregisterFieldValidation,\r\n      getValidationSchema,\r\n      triggerValidation,\r\n      showInlineErrors: mergedConfig.showInlineErrors,\r\n      validateOnBlur: mergedConfig.validateOnBlur,\r\n      validateOnChange: mergedConfig.validateOnChange,\r\n      size: mergedConfig.size,\r\n      layout: mergedConfig.layout,\r\n      labelWidth: mergedConfig.labelWidth,\r\n      disabled: mergedConfig.disabled,\r\n      colon: mergedConfig.colon,\r\n    }),\r\n    [\r\n      form,\r\n      registerFieldValidation,\r\n      unregisterFieldValidation,\r\n      getValidationSchema,\r\n      triggerValidation,\r\n      mergedConfig.showInlineErrors,\r\n      mergedConfig.validateOnBlur,\r\n      mergedConfig.validateOnChange,\r\n      mergedConfig.size,\r\n      mergedConfig.layout,\r\n      mergedConfig.labelWidth,\r\n      mergedConfig.disabled,\r\n      mergedConfig.colon,\r\n    ]\r\n  );\r\n\r\n  return (\r\n    <FormConfigContext.Provider value={contextValue as FormContextValue}>\r\n      <RHFFormProvider {...form}>\r\n        <form\r\n          {...formProps}\r\n          onSubmit={handleSubmit}\r\n          noValidate\r\n        >\r\n          {children}\r\n        </form>\r\n      </RHFFormProvider>\r\n    </FormConfigContext.Provider>\r\n  );\r\n}\r\n\r\nForm.displayName = \"Form\";\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkFA,SAAgB,KAGd,EACA,QAAQ,YACR,eACA,QACA,UACA,SACA,QACA,UACA,MAAM,cACN,MAAM,UACN,gBAAgB,oBAChB,UAAU,gBACV,GAAG,aACiC;CACpC,MAAM,eAAe;EAAE,GAAG;EAAmB,GAAG;CAAO;CAEvD,MAAM,OACJ,aACC,aAAa,mBACV,aACA,aAAa,mBAAmB,QAC9B,WACA;CAER,MAAM,iBACJ,uBACC,aAAa,mBAAmB,aAAa;CAEhD,MAAM,EACJ,yBACA,2BACA,wBACE,2BAA2B;CAwB/B,MAAM,eAAe,QAAsB;EACzC,UArBsB,YACtB,OAAO,MAAM,SAAS,YAAY;GAChC,IAAI,gBACF,OAAO,eAAe,MAAM,SAAS,OAAO;GAE9C,MAAM,cAAc,oBAAoB;GAExC,IAAI;GACJ,IAAI,sBAAsB,EAAE,WAC1B,cAAc,WAAW,MAAM,WAAW;QAE1C,cAAc,cAAc;GAE9B,OAAO,YAAY,WAAW,CAAC,CAAC,MAAM,SAAS,OAAO;EACxD,GAGA,CAAC,YAAY,cAAc,CAIjB;EACV;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,OAAO,gBAAgB;CAG7B,MAAM,oBAAoB,YAAY,OAAO,SAAiB;EAC5D,OAAO,KAAK,QAAQ,IAA0B;CAChD,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,gBAAgB,MAAwC;EAC5D,EAAE,eAAe;EACjB,IAAI,UACF,KAAK,aAAa,UAAU,OAAO,CAAC,CAAC,CAAC;CAE1C;CAEA,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACA;EACA,kBAAkB,aAAa;EAC/B,gBAAgB,aAAa;EAC7B,kBAAkB,aAAa;EAC/B,MAAM,aAAa;EACnB,QAAQ,aAAa;EACrB,YAAY,aAAa;EACzB,UAAU,aAAa;EACvB,OAAO,aAAa;CACtB,IACA;EACE;EACA;EACA;EACA;EACA;EACA,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;CACf,CACF;CAEA,OACE,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;YACjC,oBAAC,cAAD;GAAiB,GAAI;aACnB,oBAAC,QAAD;IACE,GAAI;IACJ,UAAU;IACV,YAAA;IAEC;GACG,CAAA;EACS,CAAA;CACS,CAAA;AAEhC;AAEA,KAAK,cAAc"}
+{"version":3,"file":"Form.js","names":[],"sources":["../../../src/components/Form/Form.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useCallback, useMemo, type ReactNode } from \"react\";\r\nimport {\r\n  useForm,\r\n  FormProvider as RHFFormProvider,\r\n  type UseFormReturn,\r\n  type FieldValues,\r\n  type UseFormProps,\r\n  type SubmitHandler,\r\n  type SubmitErrorHandler,\r\n  type Resolver,\r\n  type Path,\r\n} from \"react-hook-form\";\r\nimport { zodResolver } from \"@hookform/resolvers/zod\";\r\nimport { z } from \"zod\";\r\nimport { \r\n  FormConfigContext, \r\n  defaultFormConfig, \r\n  useFieldValidationRegistry,\r\n  type FormConfig, \r\n  type FormContextValue \r\n} from \"./context\";\r\n\r\n/**\r\n * Props for the Form component\r\n */\r\nexport interface FormProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TContext = unknown\r\n> extends Omit<React.FormHTMLAttributes<HTMLFormElement>, \"onSubmit\" | \"onError\"> {\r\n  /** Base Zod schema for validation (will be extended by field props) */\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  schema?: z.ZodType<TFieldValues, any, any>;\r\n  /** Default values for the form */\r\n  defaultValues?: UseFormProps<TFieldValues, TContext>[\"defaultValues\"];\r\n  /** Values to reset the form to */\r\n  values?: UseFormProps<TFieldValues, TContext>[\"values\"];\r\n  /** Submit handler */\r\n  onSubmit?: SubmitHandler<TFieldValues>;\r\n  /** Error handler */\r\n  onError?: SubmitErrorHandler<TFieldValues>;\r\n  /** Form configuration */\r\n  config?: FormConfig;\r\n  /** Children */\r\n  children?: ReactNode;\r\n  /** External form instance (for controlled forms) */\r\n  form?: UseFormReturn<TFieldValues>;\r\n  /** Validation mode */\r\n  mode?: UseFormProps<TFieldValues, TContext>[\"mode\"];\r\n  /** Revalidation mode */\r\n  reValidateMode?: UseFormProps<TFieldValues, TContext>[\"reValidateMode\"];\r\n  /** Custom resolver (overrides schema) */\r\n  resolver?: Resolver<TFieldValues>;\r\n}\r\n\r\n/**\r\n * Form component that provides form context and validation\r\n * \r\n * Child components like TextBox can register their validation rules automatically.\r\n * \r\n * @example\r\n * ```tsx\r\n * // Validation is automatically built from component props\r\n * <Form onSubmit={handleSubmit} defaultValues={{ username: \"\", email: \"\" }}>\r\n *   <TextBox name=\"username\" label=\"Username\" required minLength={3} maxLength={50} />\r\n *   <TextBox name=\"email\" label=\"Email\" type=\"email\" required email />\r\n *   <Button type=\"submit\">Submit</Button>\r\n * </Form>\r\n * \r\n * // Or with a base schema that gets extended\r\n * const baseSchema = z.object({\r\n *   username: z.string(),\r\n *   email: z.string(),\r\n * });\r\n * \r\n * <Form schema={baseSchema} onSubmit={handleSubmit}>\r\n *   <TextBox name=\"username\" required minLength={3} /> // Adds required + minLength\r\n *   <TextBox name=\"email\" required email /> // Adds required + email validation\r\n * </Form>\r\n * ```\r\n */\r\nexport function Form<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TContext = unknown\r\n>({\r\n  schema: baseSchema,\r\n  defaultValues,\r\n  values,\r\n  onSubmit,\r\n  onError,\r\n  config,\r\n  children,\r\n  form: externalForm,\r\n  mode: modeProp,\r\n  reValidateMode: reValidateModeProp,\r\n  resolver: customResolver,\r\n  ...formProps\r\n}: FormProps<TFieldValues, TContext>) {\r\n  const mergedConfig = { ...defaultFormConfig, ...config };\r\n\r\n  const mode =\r\n    modeProp ??\r\n    (mergedConfig.validateOnChange\r\n      ? \"onChange\"\r\n      : mergedConfig.validateOnBlur !== false\r\n        ? \"onBlur\"\r\n        : \"onSubmit\");\r\n\r\n  const reValidateMode =\r\n    reValidateModeProp ??\r\n    (mergedConfig.validateOnChange ? \"onChange\" : \"onBlur\");\r\n\r\n  const {\r\n    registerFieldValidation,\r\n    unregisterFieldValidation,\r\n    getValidationSchema,\r\n  } = useFieldValidationRegistry();\r\n\r\n  // Stable resolver that reads from fieldsRef at validation time — no re-renders\r\n  // needed on field registration, and no race condition with useEffect timing.\r\n  const dynamicResolver = useCallback<Resolver<TFieldValues>>(\r\n    async (vals, context, options) => {\r\n      if (customResolver) {\r\n        return customResolver(vals, context, options);\r\n      }\r\n      const fieldSchema = getValidationSchema();\r\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n      let finalSchema: z.ZodType<any, any, any>;\r\n      if (baseSchema instanceof z.ZodObject) {\r\n        finalSchema = baseSchema.merge(fieldSchema);\r\n      } else {\r\n        finalSchema = baseSchema ?? fieldSchema;\r\n      }\r\n      return zodResolver(finalSchema)(vals, context, options);\r\n    },\r\n    // getValidationSchema reads a ref — always current, intentionally omitted.\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    [baseSchema, customResolver]\r\n  );\r\n\r\n  const internalForm = useForm<TFieldValues>({\r\n    resolver: dynamicResolver,\r\n    defaultValues,\r\n    values,\r\n    mode,\r\n    reValidateMode,\r\n  });\r\n\r\n  const form = externalForm ?? internalForm;\r\n\r\n  // Trigger validation for a specific field\r\n  const triggerValidation = useCallback(async (name: string) => {\r\n    return form.trigger(name as Path<TFieldValues>);\r\n  }, [form]);\r\n\r\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\r\n    e.preventDefault();\r\n    if (onSubmit) {\r\n      form.handleSubmit(onSubmit, onError)(e);\r\n    }\r\n  };\r\n\r\n  const contextValue = useMemo<FormContextValue<TFieldValues>>(\r\n    () => ({\r\n      form,\r\n      registerFieldValidation,\r\n      unregisterFieldValidation,\r\n      getValidationSchema,\r\n      triggerValidation,\r\n      showInlineErrors: mergedConfig.showInlineErrors,\r\n      validateOnBlur: mergedConfig.validateOnBlur,\r\n      validateOnChange: mergedConfig.validateOnChange,\r\n      size: mergedConfig.size,\r\n      layout: mergedConfig.layout,\r\n      labelWidth: mergedConfig.labelWidth,\r\n      disabled: mergedConfig.disabled,\r\n      colon: mergedConfig.colon,\r\n    }),\r\n    [\r\n      form,\r\n      registerFieldValidation,\r\n      unregisterFieldValidation,\r\n      getValidationSchema,\r\n      triggerValidation,\r\n      mergedConfig.showInlineErrors,\r\n      mergedConfig.validateOnBlur,\r\n      mergedConfig.validateOnChange,\r\n      mergedConfig.size,\r\n      mergedConfig.layout,\r\n      mergedConfig.labelWidth,\r\n      mergedConfig.disabled,\r\n      mergedConfig.colon,\r\n    ]\r\n  );\r\n\r\n  return (\r\n    <FormConfigContext.Provider value={contextValue as FormContextValue}>\r\n      <RHFFormProvider {...form}>\r\n        <form\r\n          {...formProps}\r\n          onSubmit={handleSubmit}\r\n          noValidate\r\n        >\r\n          {children}\r\n        </form>\r\n      </RHFFormProvider>\r\n    </FormConfigContext.Provider>\r\n  );\r\n}\r\n\r\nForm.displayName = \"Form\";\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkFA,SAAgB,KAGd,EACA,QAAQ,YACR,eACA,QACA,UACA,SACA,QACA,UACA,MAAM,cACN,MAAM,UACN,gBAAgB,oBAChB,UAAU,gBACV,GAAG,aACiC;CACpC,MAAM,eAAe;EAAE,GAAG;EAAmB,GAAG;CAAO;CAEvD,MAAM,OACJ,aACC,aAAa,mBACV,aACA,aAAa,mBAAmB,QAC9B,WACA;CAER,MAAM,iBACJ,uBACC,aAAa,mBAAmB,aAAa;CAEhD,MAAM,EACJ,yBACA,2BACA,wBACE,2BAA2B;CAI/B,MAAM,kBAAkB,YACtB,OAAO,MAAM,SAAS,YAAY;EAChC,IAAI,gBACF,OAAO,eAAe,MAAM,SAAS,OAAO;EAE9C,MAAM,cAAc,oBAAoB;EAExC,IAAI;EACJ,IAAI,sBAAsB,EAAE,WAC1B,cAAc,WAAW,MAAM,WAAW;OAE1C,cAAc,cAAc;EAE9B,OAAO,YAAY,WAAW,CAAC,CAAC,MAAM,SAAS,OAAO;CACxD,GAGA,CAAC,YAAY,cAAc,CAC7B;CAEA,MAAM,eAAe,QAAsB;EACzC,UAAU;EACV;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,OAAO,gBAAgB;CAG7B,MAAM,oBAAoB,YAAY,OAAO,SAAiB;EAC5D,OAAO,KAAK,QAAQ,IAA0B;CAChD,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,gBAAgB,MAAwC;EAC5D,EAAE,eAAe;EACjB,IAAI,UACF,KAAK,aAAa,UAAU,OAAO,CAAC,CAAC,CAAC;CAE1C;CAEA,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACA;EACA,kBAAkB,aAAa;EAC/B,gBAAgB,aAAa;EAC7B,kBAAkB,aAAa;EAC/B,MAAM,aAAa;EACnB,QAAQ,aAAa;EACrB,YAAY,aAAa;EACzB,UAAU,aAAa;EACvB,OAAO,aAAa;CACtB,IACA;EACE;EACA;EACA;EACA;EACA;EACA,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;CACf,CACF;CAEA,OACE,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;EACjC,UAAA,oBAAC,cAAD;GAAiB,GAAI;GACnB,UAAA,oBAAC,QAAD;IACE,GAAI;IACJ,UAAU;IACV,YAAA;IAEC;GACG,CAAA;EACS,CAAA;CACS,CAAA;AAEhC;AAEA,KAAK,cAAc"}