@skybin-tech/nebula-ui 0.0.29 → 0.0.30

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

package/dist/components/Form/FieldLayout.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"}

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

@@ -1 +1 @@
-{"version":3,"file":"FormSwitch.js","names":[],"sources":["../../../src/components/Form/FormSwitch.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { forwardRef, useId, useContext, useEffect } from \"react\";\r\nimport type { ReactNode, ComponentPropsWithoutRef } from \"react\";\r\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\r\nimport { Switch as ShadcnSwitch } from \"../../primitives/switch\";\r\nimport { Label } from \"../../primitives/label\";\r\nimport type * as SwitchPrimitives from \"@radix-ui/react-switch\";\r\n\r\nconst switchSizeVariants = cva(\r\n  \"\",\r\n  {\r\n    variants: {\r\n      size: {\r\n        sm: \"h-5 w-9\",\r\n        md: \"h-6 w-11\",\r\n        lg: \"h-7 w-14\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      size: \"md\",\r\n    },\r\n  }\r\n);\r\n\r\nconst labelVariants = cva(\r\n  \"text-sm font-medium cursor-pointer select-none\",\r\n  {\r\n    variants: {\r\n      disabled: {\r\n        true: \"cursor-not-allowed opacity-50\",\r\n        false: \"\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      disabled: false,\r\n    },\r\n  }\r\n);\r\n\r\nexport interface FormSwitchProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends Omit<ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, \"name\" | \"checked\" | \"onCheckedChange\" | \"required\">,\r\n    VariantProps<typeof switchSizeVariants> {\r\n  /** Field name - required for form integration */\r\n  name: TName;\r\n  /** Label text for the switch */\r\n  label?: ReactNode;\r\n  /** Helper text displayed below the switch */\r\n  helperText?: string;\r\n  /** Whether to show the error message */\r\n  showError?: boolean;\r\n  /** Custom error message (overrides form error) */\r\n  error?: string;\r\n  /** External control (for use outside Form) */\r\n  control?: Control<TFieldValues>;\r\n  /** Text to show when checked */\r\n  checkedText?: ReactNode;\r\n  /** Text to show when unchecked */\r\n  uncheckedText?: ReactNode;\r\n\r\n  // Validation props\r\n  /** Field is required (must be on) */\r\n  required?: boolean | string;\r\n  /** Custom validation function */\r\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\n/**\r\n * Switch component with form integration\r\n *\r\n * This is a wrapper around the shadcn/ui Switch primitive that adds:\r\n * - Form integration with react-hook-form\r\n * - Automatic validation registration\r\n * - Label, helper text, and error message support\r\n * - Checked/unchecked text display\r\n *\r\n * @example\r\n * ```tsx\r\n * // Inside a Form component\r\n * <FormSwitch name=\"notifications\" label=\"Enable notifications\" />\r\n * <FormSwitch name=\"terms\" label=\"Accept terms\" required=\"You must accept the terms\" />\r\n * <FormSwitch name=\"darkMode\" label=\"Dark mode\" checkedText=\"On\" uncheckedText=\"Off\" />\r\n * ```\r\n */\r\nfunction FormSwitchInner<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\r\n  {\r\n    name,\r\n    label,\r\n    helperText,\r\n    showError = true,\r\n    error: customError,\r\n    size,\r\n    className,\r\n    disabled,\r\n    id: providedId,\r\n    control: externalControl,\r\n    checkedText,\r\n    uncheckedText,\r\n    // Validation props\r\n    required,\r\n    validate,\r\n    ...props\r\n  }: FormSwitchProps<TFieldValues, TName>,\r\n  ref: React.ForwardedRef<React.ElementRef<typeof SwitchPrimitives.Root>>\r\n) {\r\n  const generatedId = useId();\r\n  const inputId = providedId ?? generatedId;\r\n\r\n  // Try to get form context\r\n  const formConfigContext = useContext(FormConfigContext);\r\n  const formConfig: FormConfig = formConfigContext ?? {};\r\n\r\n  // Get form context from react-hook-form\r\n  const rhfContext = useRHFFormContext<TFieldValues>();\r\n  const control = externalControl ?? rhfContext?.control;\r\n\r\n  // Register validation rules with the form\r\n  useEffect(() => {\r\n    if (formConfigContext?.registerFieldValidation) {\r\n      const rules: FieldValidationRules = {};\r\n\r\n      if (required !== undefined) rules.required = required;\r\n      if (validate !== undefined) rules.validate = validate;\r\n\r\n      formConfigContext.registerFieldValidation({\r\n        name: name as string,\r\n        type: \"boolean\",\r\n        rules,\r\n      });\r\n\r\n      return () => {\r\n        formConfigContext.unregisterFieldValidation(name as string);\r\n      };\r\n    }\r\n  }, [formConfigContext, name, required, validate]);\r\n\r\n  // Use controller for form integration\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\r\n  // Merge sizes - prop takes precedence over form config\r\n  const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n  const effectiveDisabled = disabled ?? formConfig.disabled;\r\n  const isChecked = field.value ?? false;\r\n\r\n  return (\r\n    <div className=\"space-y-1.5\">\r\n      <div className=\"flex items-center gap-3\">\r\n        <ShadcnSwitch\r\n          {...props}\r\n          ref={ref}\r\n          id={inputId}\r\n          checked={isChecked}\r\n          onCheckedChange={(checked) => field.onChange(checked)}\r\n          disabled={effectiveDisabled}\r\n          aria-labelledby={label ? `${inputId}-label` : undefined}\r\n          className={cn(\r\n            switchSizeVariants({ size: effectiveSize }),\r\n            className\r\n          )}\r\n        />\r\n\r\n        {(checkedText || uncheckedText) && (\r\n          <span className=\"text-sm text-muted-foreground\">\r\n            {isChecked ? checkedText : uncheckedText}\r\n          </span>\r\n        )}\r\n\r\n        {label && (\r\n          <Label\r\n            id={`${inputId}-label`}\r\n            htmlFor={inputId}\r\n            className={labelVariants({ disabled: effectiveDisabled })}\r\n          >\r\n            {label}\r\n          </Label>\r\n        )}\r\n      </div>\r\n\r\n      {showError && hasError && (\r\n        <p className=\"text-sm text-destructive\" role=\"alert\">\r\n          {errorMessage}\r\n        </p>\r\n      )}\r\n\r\n      {helperText && !hasError && (\r\n        <p className=\"text-sm text-muted-foreground\">\r\n          {helperText}\r\n        </p>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport const FormSwitch = forwardRef(FormSwitchInner) as <\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\r\n  props: FormSwitchProps<TFieldValues, TName> & { ref?: React.ForwardedRef<React.ElementRef<typeof SwitchPrimitives.Root>> }\r\n) => React.ReactElement;\r\n\r\n(FormSwitch as React.FC).displayName = \"FormSwitch\";\r\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,qBAAqB,IACzB,IACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;AAEA,IAAM,gBAAgB,IACpB,kDACA;CACE,UAAU,EACR,UAAU;EACR,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,UAAU,MACZ;AACF,CACF;;;;;;;;;;;;;;;;;;AAgDA,SAAS,gBAIP,EACE,MACA,OACA,YACA,YAAY,MACZ,OAAO,aACP,MACA,WACA,UACA,IAAI,YACJ,SAAS,iBACT,aACA,eAEA,UACA,UACA,GAAG,SAEL,KACA;CACA,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,cAAc;CAG9B,MAAM,oBAAoB,WAAW,iBAAiB;CACtD,MAAM,aAAyB,qBAAqB,CAAC;CAGrD,MAAM,aAAa,eAAgC;CACnD,MAAM,UAAU,mBAAmB,YAAY;CAG/C,gBAAgB;EACd,IAAI,mBAAmB,yBAAyB;GAC9C,MAAM,QAA8B,CAAC;GAErC,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAC7C,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAE7C,kBAAkB,wBAAwB;IAClC;IACN,MAAM;IACN;GACF,CAAC;GAED,aAAa;IACX,kBAAkB,0BAA0B,IAAc;GAC5D;EACF;CACF,GAAG;EAAC;EAAmB;EAAM;EAAU;CAAQ,CAAC;CAGhD,MAAM,EAAE,OAAO,eAAe,cAAmC;EAC/D;EACA;CACF,CAAC;CAED,MAAM,aAAa,WAAW,OAAO;CACrC,MAAM,eAAe,eAAe;CACpC,MAAM,WAAW,CAAC,CAAC;CAGnB,MAAM,gBAAgB,QAAQ,WAAW,QAAQ;CACjD,MAAM,oBAAoB,YAAY,WAAW;CACjD,MAAM,YAAY,MAAM,SAAS;CAEjC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,QAAD;MACE,GAAI;MACC;MACL,IAAI;MACJ,SAAS;MACT,kBAAkB,YAAY,MAAM,SAAS,OAAO;MACpD,UAAU;MACV,mBAAiB,QAAQ,GAAG,QAAQ,UAAU,KAAA;MAC9C,WAAW,GACT,mBAAmB,EAAE,MAAM,cAAc,CAAC,GAC1C,SACF;KACD,CAAA;MAEC,eAAe,kBACf,oBAAC,QAAD;MAAM,WAAU;gBACb,YAAY,cAAc;KACvB,CAAA;KAGP,SACC,oBAAC,OAAD;MACE,IAAI,GAAG,QAAQ;MACf,SAAS;MACT,WAAW,cAAc,EAAE,UAAU,kBAAkB,CAAC;gBAEvD;KACI,CAAA;IAEN;;GAEJ,aAAa,YACZ,oBAAC,KAAD;IAAG,WAAU;IAA2B,MAAK;cAC1C;GACA,CAAA;GAGJ,cAAc,CAAC,YACd,oBAAC,KAAD;IAAG,WAAU;cACV;GACA,CAAA;EAEF;;AAET;AAEA,IAAa,aAAa,WAAW,eAAe;AAOpD,WAAyB,cAAc"}
+{"version":3,"file":"FormSwitch.js","names":[],"sources":["../../../src/components/Form/FormSwitch.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { forwardRef, useId, useContext, useEffect } from \"react\";\r\nimport type { ReactNode, ComponentPropsWithoutRef } from \"react\";\r\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\r\nimport { Switch as ShadcnSwitch } from \"../../primitives/switch\";\r\nimport { Label } from \"../../primitives/label\";\r\nimport type * as SwitchPrimitives from \"@radix-ui/react-switch\";\r\n\r\nconst switchSizeVariants = cva(\r\n  \"\",\r\n  {\r\n    variants: {\r\n      size: {\r\n        sm: \"h-5 w-9\",\r\n        md: \"h-6 w-11\",\r\n        lg: \"h-7 w-14\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      size: \"md\",\r\n    },\r\n  }\r\n);\r\n\r\nconst labelVariants = cva(\r\n  \"text-sm font-medium cursor-pointer select-none\",\r\n  {\r\n    variants: {\r\n      disabled: {\r\n        true: \"cursor-not-allowed opacity-50\",\r\n        false: \"\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      disabled: false,\r\n    },\r\n  }\r\n);\r\n\r\nexport interface FormSwitchProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends Omit<ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, \"name\" | \"checked\" | \"onCheckedChange\" | \"required\">,\r\n    VariantProps<typeof switchSizeVariants> {\r\n  /** Field name - required for form integration */\r\n  name: TName;\r\n  /** Label text for the switch */\r\n  label?: ReactNode;\r\n  /** Helper text displayed below the switch */\r\n  helperText?: string;\r\n  /** Whether to show the error message */\r\n  showError?: boolean;\r\n  /** Custom error message (overrides form error) */\r\n  error?: string;\r\n  /** External control (for use outside Form) */\r\n  control?: Control<TFieldValues>;\r\n  /** Text to show when checked */\r\n  checkedText?: ReactNode;\r\n  /** Text to show when unchecked */\r\n  uncheckedText?: ReactNode;\r\n\r\n  // Validation props\r\n  /** Field is required (must be on) */\r\n  required?: boolean | string;\r\n  /** Custom validation function */\r\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\n/**\r\n * Switch component with form integration\r\n *\r\n * This is a wrapper around the shadcn/ui Switch primitive that adds:\r\n * - Form integration with react-hook-form\r\n * - Automatic validation registration\r\n * - Label, helper text, and error message support\r\n * - Checked/unchecked text display\r\n *\r\n * @example\r\n * ```tsx\r\n * // Inside a Form component\r\n * <FormSwitch name=\"notifications\" label=\"Enable notifications\" />\r\n * <FormSwitch name=\"terms\" label=\"Accept terms\" required=\"You must accept the terms\" />\r\n * <FormSwitch name=\"darkMode\" label=\"Dark mode\" checkedText=\"On\" uncheckedText=\"Off\" />\r\n * ```\r\n */\r\nfunction FormSwitchInner<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\r\n  {\r\n    name,\r\n    label,\r\n    helperText,\r\n    showError = true,\r\n    error: customError,\r\n    size,\r\n    className,\r\n    disabled,\r\n    id: providedId,\r\n    control: externalControl,\r\n    checkedText,\r\n    uncheckedText,\r\n    // Validation props\r\n    required,\r\n    validate,\r\n    ...props\r\n  }: FormSwitchProps<TFieldValues, TName>,\r\n  ref: React.ForwardedRef<React.ElementRef<typeof SwitchPrimitives.Root>>\r\n) {\r\n  const generatedId = useId();\r\n  const inputId = providedId ?? generatedId;\r\n\r\n  // Try to get form context\r\n  const formConfigContext = useContext(FormConfigContext);\r\n  const formConfig: FormConfig = formConfigContext ?? {};\r\n\r\n  // Get form context from react-hook-form\r\n  const rhfContext = useRHFFormContext<TFieldValues>();\r\n  const control = externalControl ?? rhfContext?.control;\r\n\r\n  // Register validation rules with the form\r\n  useEffect(() => {\r\n    if (formConfigContext?.registerFieldValidation) {\r\n      const rules: FieldValidationRules = {};\r\n\r\n      if (required !== undefined) rules.required = required;\r\n      if (validate !== undefined) rules.validate = validate;\r\n\r\n      formConfigContext.registerFieldValidation({\r\n        name: name as string,\r\n        type: \"boolean\",\r\n        rules,\r\n      });\r\n\r\n      return () => {\r\n        formConfigContext.unregisterFieldValidation(name as string);\r\n      };\r\n    }\r\n  }, [formConfigContext, name, required, validate]);\r\n\r\n  // Use controller for form integration\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\r\n  // Merge sizes - prop takes precedence over form config\r\n  const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n  const effectiveDisabled = disabled ?? formConfig.disabled;\r\n  const isChecked = field.value ?? false;\r\n\r\n  return (\r\n    <div className=\"space-y-1.5\">\r\n      <div className=\"flex items-center gap-3\">\r\n        <ShadcnSwitch\r\n          {...props}\r\n          ref={ref}\r\n          id={inputId}\r\n          checked={isChecked}\r\n          onCheckedChange={(checked) => field.onChange(checked)}\r\n          disabled={effectiveDisabled}\r\n          aria-labelledby={label ? `${inputId}-label` : undefined}\r\n          className={cn(\r\n            switchSizeVariants({ size: effectiveSize }),\r\n            className\r\n          )}\r\n        />\r\n\r\n        {(checkedText || uncheckedText) && (\r\n          <span className=\"text-sm text-muted-foreground\">\r\n            {isChecked ? checkedText : uncheckedText}\r\n          </span>\r\n        )}\r\n\r\n        {label && (\r\n          <Label\r\n            id={`${inputId}-label`}\r\n            htmlFor={inputId}\r\n            className={labelVariants({ disabled: effectiveDisabled })}\r\n          >\r\n            {label}\r\n          </Label>\r\n        )}\r\n      </div>\r\n\r\n      {showError && hasError && (\r\n        <p className=\"text-sm text-destructive\" role=\"alert\">\r\n          {errorMessage}\r\n        </p>\r\n      )}\r\n\r\n      {helperText && !hasError && (\r\n        <p className=\"text-sm text-muted-foreground\">\r\n          {helperText}\r\n        </p>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport const FormSwitch = forwardRef(FormSwitchInner) as <\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\r\n  props: FormSwitchProps<TFieldValues, TName> & { ref?: React.ForwardedRef<React.ElementRef<typeof SwitchPrimitives.Root>> }\r\n) => React.ReactElement;\r\n\r\n(FormSwitch as React.FC).displayName = \"FormSwitch\";\r\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,qBAAqB,IACzB,IACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;AAEA,IAAM,gBAAgB,IACpB,kDACA;CACE,UAAU,EACR,UAAU;EACR,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,UAAU,MACZ;AACF,CACF;;;;;;;;;;;;;;;;;;AAgDA,SAAS,gBAIP,EACE,MACA,OACA,YACA,YAAY,MACZ,OAAO,aACP,MACA,WACA,UACA,IAAI,YACJ,SAAS,iBACT,aACA,eAEA,UACA,UACA,GAAG,SAEL,KACA;CACA,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,cAAc;CAG9B,MAAM,oBAAoB,WAAW,iBAAiB;CACtD,MAAM,aAAyB,qBAAqB,CAAC;CAGrD,MAAM,aAAa,eAAgC;CACnD,MAAM,UAAU,mBAAmB,YAAY;CAG/C,gBAAgB;EACd,IAAI,mBAAmB,yBAAyB;GAC9C,MAAM,QAA8B,CAAC;GAErC,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAC7C,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAE7C,kBAAkB,wBAAwB;IAClC;IACN,MAAM;IACN;GACF,CAAC;GAED,aAAa;IACX,kBAAkB,0BAA0B,IAAc;GAC5D;EACF;CACF,GAAG;EAAC;EAAmB;EAAM;EAAU;CAAQ,CAAC;CAGhD,MAAM,EAAE,OAAO,eAAe,cAAmC;EAC/D;EACA;CACF,CAAC;CAED,MAAM,aAAa,WAAW,OAAO;CACrC,MAAM,eAAe,eAAe;CACpC,MAAM,WAAW,CAAC,CAAC;CAGnB,MAAM,gBAAgB,QAAQ,WAAW,QAAQ;CACjD,MAAM,oBAAoB,YAAY,WAAW;CACjD,MAAM,YAAY,MAAM,SAAS;CAEjC,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,QAAD;MACE,GAAI;MACC;MACL,IAAI;MACJ,SAAS;MACT,kBAAkB,YAAY,MAAM,SAAS,OAAO;MACpD,UAAU;MACV,mBAAiB,QAAQ,GAAG,QAAQ,UAAU,KAAA;MAC9C,WAAW,GACT,mBAAmB,EAAE,MAAM,cAAc,CAAC,GAC1C,SACF;KACD,CAAA;MAEC,eAAe,kBACf,oBAAC,QAAD;MAAM,WAAU;MACb,UAAA,YAAY,cAAc;KACvB,CAAA;KAGP,SACC,oBAAC,OAAD;MACE,IAAI,GAAG,QAAQ;MACf,SAAS;MACT,WAAW,cAAc,EAAE,UAAU,kBAAkB,CAAC;MAEvD,UAAA;KACI,CAAA;IAEN;;GAEJ,aAAa,YACZ,oBAAC,KAAD;IAAG,WAAU;IAA2B,MAAK;IAC1C,UAAA;GACA,CAAA;GAGJ,cAAc,CAAC,YACd,oBAAC,KAAD;IAAG,WAAU;IACV,UAAA;GACA,CAAA;EAEF;;AAET;AAEA,IAAa,aAAa,WAAW,eAAe;AAOpD,WAAyB,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"PhoneInput.js","names":[],"sources":["../../../src/components/Form/PhoneInput.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useContext, useEffect, useId, useMemo, useState } 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 {\r\n  formatE164,\r\n  getCountryDialCode,\r\n  parseE164,\r\n} from \"../../data/countries\";\r\nimport { TextBoxPrimitive } from \"../../primitives/textbox\";\r\nimport { FormConfigContext, type FieldValidationRules, type FormConfig } from \"./context\";\r\nimport { FieldLayout } from \"./FieldLayout\";\r\nimport { CountryPicker } from \"./CountryPicker\";\r\n\r\nconst phoneInputVariants = 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-within:ring-ring\",\r\n      error: \"border-destructive focus-within:ring-destructive\",\r\n      success: \"border-green-500 focus-within: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\ntype ValidationRule<T> = T | { value: T; message: string };\r\n\r\nexport interface PhoneInputProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof phoneInputVariants> {\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  defaultCountry?: string;\r\n  priorityCountries?: string[];\r\n  /** Field is required (`true` or custom error message string) */\r\n  required?: boolean | string;\r\n  /** Minimum national number length */\r\n  minLength?: ValidationRule<number>;\r\n  /** Maximum national number length */\r\n  maxLength?: ValidationRule<number>;\r\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\nfunction getValidationRuleValue<T>(\r\n  rule: ValidationRule<T> | undefined,\r\n  defaultMessage: string\r\n): { value: T; message: string } | null {\r\n  if (rule === undefined) {\r\n    return null;\r\n  }\r\n\r\n  if (typeof rule === \"object\" && rule !== null && \"value\" in rule) {\r\n    return rule as { value: T; message: string };\r\n  }\r\n\r\n  return { value: rule as T, message: defaultMessage };\r\n}\r\n\r\nfunction buildPhoneValidate(\r\n  required: boolean | string | undefined,\r\n  minLength: ValidationRule<number> | undefined,\r\n  maxLength: ValidationRule<number> | undefined,\r\n  validate: PhoneInputProps[\"validate\"]\r\n) {\r\n  const requiredMessage =\r\n    typeof required === \"string\" ? required : \"This field is required\";\r\n\r\n  return async (value: unknown) => {\r\n    const parsed = parseE164(String(value ?? \"\"));\r\n    const nationalNumber = parsed?.nationalNumber ?? \"\";\r\n\r\n    if (required !== undefined && !nationalNumber) {\r\n      return requiredMessage;\r\n    }\r\n\r\n    const minLengthRule = getValidationRuleValue(\r\n      minLength,\r\n      `Minimum ${typeof minLength === \"number\" ? minLength : minLength?.value} digits required`\r\n    );\r\n    if (minLengthRule && nationalNumber.length < minLengthRule.value) {\r\n      return minLengthRule.message;\r\n    }\r\n\r\n    const maxLengthRule = getValidationRuleValue(\r\n      maxLength,\r\n      `Maximum ${typeof maxLength === \"number\" ? maxLength : maxLength?.value} digits allowed`\r\n    );\r\n    if (maxLengthRule && nationalNumber.length > maxLengthRule.value) {\r\n      return maxLengthRule.message;\r\n    }\r\n\r\n    if (validate) {\r\n      return validate(value);\r\n    }\r\n\r\n    return true;\r\n  };\r\n}\r\n\r\nexport function PhoneInput<\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 = \"Mobile number\",\r\n  disabled,\r\n  className,\r\n  id: providedId,\r\n  control: externalControl,\r\n  defaultCountry = \"IN\",\r\n  priorityCountries,\r\n  required,\r\n  minLength,\r\n  maxLength,\r\n  validate,\r\n}: PhoneInputProps<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\r\n      if (\r\n        required !== undefined ||\r\n        minLength !== undefined ||\r\n        maxLength !== undefined ||\r\n        validate !== undefined\r\n      ) {\r\n        rules.validate = buildPhoneValidate(required, minLength, maxLength, validate);\r\n      }\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    minLength,\r\n    maxLength,\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 parsedValue = useMemo(() => parseE164(field.value ?? \"\"), [field.value]);\r\n  const [countryCode, setCountryCode] = useState(\r\n    parsedValue?.countryCode ?? defaultCountry\r\n  );\r\n  const [nationalNumber, setNationalNumber] = useState(parsedValue?.nationalNumber ?? \"\");\r\n\r\n  useEffect(() => {\r\n    const parsed = parseE164(field.value ?? \"\");\r\n    if (parsed) {\r\n      setCountryCode(parsed.countryCode);\r\n      setNationalNumber(parsed.nationalNumber);\r\n      return;\r\n    }\r\n\r\n    if (!field.value) {\r\n      setCountryCode(defaultCountry);\r\n      setNationalNumber(\"\");\r\n    }\r\n  }, [field.value, defaultCountry]);\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 dialCode = getCountryDialCode(countryCode);\r\n\r\n  const updateValue = (nextCountryCode: string, nextNationalNumber: string) => {\r\n    setCountryCode(nextCountryCode);\r\n    setNationalNumber(nextNationalNumber);\r\n    field.onChange(formatE164(nextCountryCode, nextNationalNumber));\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      <div\r\n        className={cn(\r\n          \"flex items-stretch overflow-hidden rounded-md border bg-background focus-within:ring-2 focus-within:ring-offset-2\",\r\n          phoneInputVariants({ size: effectiveSize, variant: effectiveVariant }),\r\n          className\r\n        )}\r\n      >\r\n        <CountryPicker\r\n          compact\r\n          value={countryCode}\r\n          onValueChange={(value) => updateValue(value, nationalNumber)}\r\n          disabled={effectiveDisabled}\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        />\r\n\r\n        <div className=\"flex items-center border-l px-3 text-sm text-muted-foreground\">\r\n          {dialCode}\r\n        </div>\r\n\r\n        <TextBoxPrimitive\r\n          id={inputId}\r\n          type=\"tel\"\r\n          inputMode=\"numeric\"\r\n          autoComplete=\"tel-national\"\r\n          value={nationalNumber}\r\n          onChange={(event) => {\r\n            const digits = event.target.value.replace(/\\D/g, \"\");\r\n            updateValue(countryCode, digits);\r\n          }}\r\n          placeholder={placeholder}\r\n          disabled={effectiveDisabled}\r\n          aria-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            \"h-full min-w-0 flex-1 border-0 bg-transparent px-3 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0\"\r\n          )}\r\n        />\r\n      </div>\r\n    </FieldLayout>\r\n  );\r\n}\r\n\r\nPhoneInput.displayName = \"PhoneInput\";\r\n"],"mappings":"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"}
+{"version":3,"file":"PhoneInput.js","names":[],"sources":["../../../src/components/Form/PhoneInput.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useContext, useEffect, useId, useMemo, useState } 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 {\r\n  formatE164,\r\n  getCountryDialCode,\r\n  parseE164,\r\n} from \"../../data/countries\";\r\nimport { TextBoxPrimitive } from \"../../primitives/textbox\";\r\nimport { FormConfigContext, type FieldValidationRules, type FormConfig } from \"./context\";\r\nimport { FieldLayout } from \"./FieldLayout\";\r\nimport { CountryPicker } from \"./CountryPicker\";\r\n\r\nconst phoneInputVariants = 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-within:ring-ring\",\r\n      error: \"border-destructive focus-within:ring-destructive\",\r\n      success: \"border-green-500 focus-within: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\ntype ValidationRule<T> = T | { value: T; message: string };\r\n\r\nexport interface PhoneInputProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof phoneInputVariants> {\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  defaultCountry?: string;\r\n  priorityCountries?: string[];\r\n  /** Field is required (`true` or custom error message string) */\r\n  required?: boolean | string;\r\n  /** Minimum national number length */\r\n  minLength?: ValidationRule<number>;\r\n  /** Maximum national number length */\r\n  maxLength?: ValidationRule<number>;\r\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\nfunction getValidationRuleValue<T>(\r\n  rule: ValidationRule<T> | undefined,\r\n  defaultMessage: string\r\n): { value: T; message: string } | null {\r\n  if (rule === undefined) {\r\n    return null;\r\n  }\r\n\r\n  if (typeof rule === \"object\" && rule !== null && \"value\" in rule) {\r\n    return rule as { value: T; message: string };\r\n  }\r\n\r\n  return { value: rule as T, message: defaultMessage };\r\n}\r\n\r\nfunction buildPhoneValidate(\r\n  required: boolean | string | undefined,\r\n  minLength: ValidationRule<number> | undefined,\r\n  maxLength: ValidationRule<number> | undefined,\r\n  validate: PhoneInputProps[\"validate\"]\r\n) {\r\n  const requiredMessage =\r\n    typeof required === \"string\" ? required : \"This field is required\";\r\n\r\n  return async (value: unknown) => {\r\n    const parsed = parseE164(String(value ?? \"\"));\r\n    const nationalNumber = parsed?.nationalNumber ?? \"\";\r\n\r\n    if (required !== undefined && !nationalNumber) {\r\n      return requiredMessage;\r\n    }\r\n\r\n    const minLengthRule = getValidationRuleValue(\r\n      minLength,\r\n      `Minimum ${typeof minLength === \"number\" ? minLength : minLength?.value} digits required`\r\n    );\r\n    if (minLengthRule && nationalNumber.length < minLengthRule.value) {\r\n      return minLengthRule.message;\r\n    }\r\n\r\n    const maxLengthRule = getValidationRuleValue(\r\n      maxLength,\r\n      `Maximum ${typeof maxLength === \"number\" ? maxLength : maxLength?.value} digits allowed`\r\n    );\r\n    if (maxLengthRule && nationalNumber.length > maxLengthRule.value) {\r\n      return maxLengthRule.message;\r\n    }\r\n\r\n    if (validate) {\r\n      return validate(value);\r\n    }\r\n\r\n    return true;\r\n  };\r\n}\r\n\r\nexport function PhoneInput<\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 = \"Mobile number\",\r\n  disabled,\r\n  className,\r\n  id: providedId,\r\n  control: externalControl,\r\n  defaultCountry = \"IN\",\r\n  priorityCountries,\r\n  required,\r\n  minLength,\r\n  maxLength,\r\n  validate,\r\n}: PhoneInputProps<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\r\n      if (\r\n        required !== undefined ||\r\n        minLength !== undefined ||\r\n        maxLength !== undefined ||\r\n        validate !== undefined\r\n      ) {\r\n        rules.validate = buildPhoneValidate(required, minLength, maxLength, validate);\r\n      }\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    minLength,\r\n    maxLength,\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 parsedValue = useMemo(() => parseE164(field.value ?? \"\"), [field.value]);\r\n  const [countryCode, setCountryCode] = useState(\r\n    parsedValue?.countryCode ?? defaultCountry\r\n  );\r\n  const [nationalNumber, setNationalNumber] = useState(parsedValue?.nationalNumber ?? \"\");\r\n\r\n  useEffect(() => {\r\n    const parsed = parseE164(field.value ?? \"\");\r\n    if (parsed) {\r\n      setCountryCode(parsed.countryCode);\r\n      setNationalNumber(parsed.nationalNumber);\r\n      return;\r\n    }\r\n\r\n    if (!field.value) {\r\n      setCountryCode(defaultCountry);\r\n      setNationalNumber(\"\");\r\n    }\r\n  }, [field.value, defaultCountry]);\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 dialCode = getCountryDialCode(countryCode);\r\n\r\n  const updateValue = (nextCountryCode: string, nextNationalNumber: string) => {\r\n    setCountryCode(nextCountryCode);\r\n    setNationalNumber(nextNationalNumber);\r\n    field.onChange(formatE164(nextCountryCode, nextNationalNumber));\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      <div\r\n        className={cn(\r\n          \"flex items-stretch overflow-hidden rounded-md border bg-background focus-within:ring-2 focus-within:ring-offset-2\",\r\n          phoneInputVariants({ size: effectiveSize, variant: effectiveVariant }),\r\n          className\r\n        )}\r\n      >\r\n        <CountryPicker\r\n          compact\r\n          value={countryCode}\r\n          onValueChange={(value) => updateValue(value, nationalNumber)}\r\n          disabled={effectiveDisabled}\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        />\r\n\r\n        <div className=\"flex items-center border-l px-3 text-sm text-muted-foreground\">\r\n          {dialCode}\r\n        </div>\r\n\r\n        <TextBoxPrimitive\r\n          id={inputId}\r\n          type=\"tel\"\r\n          inputMode=\"numeric\"\r\n          autoComplete=\"tel-national\"\r\n          value={nationalNumber}\r\n          onChange={(event) => {\r\n            const digits = event.target.value.replace(/\\D/g, \"\");\r\n            updateValue(countryCode, digits);\r\n          }}\r\n          placeholder={placeholder}\r\n          disabled={effectiveDisabled}\r\n          aria-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            \"h-full min-w-0 flex-1 border-0 bg-transparent px-3 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0\"\r\n          )}\r\n        />\r\n      </div>\r\n    </FieldLayout>\r\n  );\r\n}\r\n\r\nPhoneInput.displayName = \"PhoneInput\";\r\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAM,qBAAqB,IAAI,IAAI;CACjC,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;AA8BD,SAAS,uBACP,MACA,gBACsC;CACtC,IAAI,SAAS,KAAA,GACX,OAAO;CAGT,IAAI,OAAO,SAAS,YAAY,SAAS,QAAQ,WAAW,MAC1D,OAAO;CAGT,OAAO;EAAE,OAAO;EAAW,SAAS;CAAe;AACrD;AAEA,SAAS,mBACP,UACA,WACA,WACA,UACA;CACA,MAAM,kBACJ,OAAO,aAAa,WAAW,WAAW;CAE5C,OAAO,OAAO,UAAmB;EAE/B,MAAM,iBADS,UAAU,OAAO,SAAS,EAAE,CACpB,CAAA,EAAQ,kBAAkB;EAEjD,IAAI,aAAa,KAAA,KAAa,CAAC,gBAC7B,OAAO;EAGT,MAAM,gBAAgB,uBACpB,WACA,WAAW,OAAO,cAAc,WAAW,YAAY,WAAW,MAAM,iBAC1E;EACA,IAAI,iBAAiB,eAAe,SAAS,cAAc,OACzD,OAAO,cAAc;EAGvB,MAAM,gBAAgB,uBACpB,WACA,WAAW,OAAO,cAAc,WAAW,YAAY,WAAW,MAAM,gBAC1E;EACA,IAAI,iBAAiB,eAAe,SAAS,cAAc,OACzD,OAAO,cAAc;EAGvB,IAAI,UACF,OAAO,SAAS,KAAK;EAGvB,OAAO;CACT;AACF;AAEA,SAAgB,WAGd,EACA,MACA,OACA,YACA,YAAY,MACZ,OAAO,aACP,MACA,SACA,YAAY,MACZ,cAAc,iBACd,UACA,WACA,IAAI,YACJ,SAAS,iBACT,iBAAiB,MACjB,mBACA,UACA,WACA,WACA,YACuC;CACvC,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;GAE7C,IACE,aAAa,KAAA,KACb,cAAc,KAAA,KACd,cAAc,KAAA,KACd,aAAa,KAAA,GAEb,MAAM,WAAW,mBAAmB,UAAU,WAAW,WAAW,QAAQ;GAG9E,wBAAwB;IAChB;IACN,MAAM;IACN;GACF,CAAC;GAED,aAAa;IACX,4BAA4B,IAAc;GAC5C;EACF;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,OAAO,eAAe,cAAmC;EAC/D;EACA;CACF,CAAC;CAED,MAAM,cAAc,cAAc,UAAU,MAAM,SAAS,EAAE,GAAG,CAAC,MAAM,KAAK,CAAC;CAC7E,MAAM,CAAC,aAAa,kBAAkB,SACpC,aAAa,eAAe,cAC9B;CACA,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,aAAa,kBAAkB,EAAE;CAEtF,gBAAgB;EACd,MAAM,SAAS,UAAU,MAAM,SAAS,EAAE;EAC1C,IAAI,QAAQ;GACV,eAAe,OAAO,WAAW;GACjC,kBAAkB,OAAO,cAAc;GACvC;EACF;EAEA,IAAI,CAAC,MAAM,OAAO;GAChB,eAAe,cAAc;GAC7B,kBAAkB,EAAE;EACtB;CACF,GAAG,CAAC,MAAM,OAAO,cAAc,CAAC;CAEhC,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;CAC9C,MAAM,WAAW,mBAAmB,WAAW;CAE/C,MAAM,eAAe,iBAAyB,uBAA+B;EAC3E,eAAe,eAAe;EAC9B,kBAAkB,kBAAkB;EACpC,MAAM,SAAS,WAAW,iBAAiB,kBAAkB,CAAC;CAChE;CAEA,OACE,oBAAC,aAAD;EACW;EACF;EACP,UAAU,CAAC,CAAC;EACA;EACZ,cAAc,YAAY,eAAe,KAAA;EAC9B;EACA;EACC;EAEZ,UAAA,qBAAC,OAAD;GACE,WAAW,GACT,qHACA,mBAAmB;IAAE,MAAM;IAAe,SAAS;GAAiB,CAAC,GACrE,SACF;GALF,UAAA;IAOE,oBAAC,eAAD;KACE,SAAA;KACA,OAAO;KACP,gBAAgB,UAAU,YAAY,OAAO,cAAc;KAC3D,UAAU;KACS;KACnB,UAAU,CAAC,CAAC;KACZ,gBAAc;KACd,oBACE,WACI,GAAG,QAAQ,UACX,aACE,GAAG,QAAQ,WACX,KAAA;IAET,CAAA;IAED,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA;IACE,CAAA;IAEL,oBAAC,kBAAD;KACE,IAAI;KACJ,MAAK;KACL,WAAU;KACV,cAAa;KACb,OAAO;KACP,WAAW,UAAU;MACnB,MAAM,SAAS,MAAM,OAAO,MAAM,QAAQ,OAAO,EAAE;MACnD,YAAY,aAAa,MAAM;KACjC;KACa;KACb,UAAU;KACV,iBAAe,CAAC,CAAC;KACjB,gBAAc;KACd,oBACE,WACI,GAAG,QAAQ,UACX,aACE,GAAG,QAAQ,WACX,KAAA;KAER,WAAW,GACT,iHACF;IACD,CAAA;GACE;;CACM,CAAA;AAEjB;AAEA,WAAW,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":[],"sources":["../../../src/components/Form/Radio.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { forwardRef, useId, useContext, createContext, useEffect } from \"react\";\r\nimport type { ReactNode, ComponentPropsWithoutRef } from \"react\";\r\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\r\nimport { RadioGroup as ShadcnRadioGroup, RadioGroupItem as ShadcnRadioGroupItem } from \"../../primitives/radio-group\";\r\nimport { Label } from \"../../primitives/label\";\r\nimport type * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\r\n\r\nconst radioSizeVariants = cva(\r\n  \"\",\r\n  {\r\n    variants: {\r\n      size: {\r\n        sm: \"h-4 w-4\",\r\n        md: \"h-5 w-5\",\r\n        lg: \"h-6 w-6\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      size: \"md\",\r\n    },\r\n  }\r\n);\r\n\r\nconst labelVariants = cva(\r\n  \"text-sm font-medium cursor-pointer select-none\",\r\n  {\r\n    variants: {\r\n      disabled: {\r\n        true: \"cursor-not-allowed opacity-50\",\r\n        false: \"\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      disabled: false,\r\n    },\r\n  }\r\n);\r\n\r\n// Radio Group Context\r\ninterface RadioGroupContextValue {\r\n  name: string;\r\n  value: string | number | undefined;\r\n  onChange: (value: string | number) => void;\r\n  disabled?: boolean;\r\n  size?: \"sm\" | \"md\" | \"lg\";\r\n}\r\n\r\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\r\n\r\nexport interface RadioOption {\r\n  label: ReactNode;\r\n  value: string | number;\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface RadioGroupProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof radioSizeVariants> {\r\n  /** Field name - required for form integration */\r\n  name: TName;\r\n  /** Label text for the radio group */\r\n  label?: string;\r\n  /** Helper text displayed below the radio group */\r\n  helperText?: string;\r\n  /** Whether to show the error message */\r\n  showError?: boolean;\r\n  /** Custom error message (overrides form error) */\r\n  error?: string;\r\n  /** Options for the radio group */\r\n  options?: RadioOption[];\r\n  /** Layout direction */\r\n  direction?: \"horizontal\" | \"vertical\";\r\n  /** External control (for use outside Form) */\r\n  control?: Control<TFieldValues>;\r\n  /** Children (alternative to options prop) */\r\n  children?: ReactNode;\r\n  /** Disabled state */\r\n  disabled?: boolean;\r\n  /** Additional class name */\r\n  className?: string;\r\n  /** Variant style */\r\n  variant?: \"default\" | \"error\";\r\n  \r\n  // Validation props\r\n  /** Field is required */\r\n  required?: boolean | string;\r\n  /** Custom validation function */\r\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\n/**\r\n * RadioGroup component with form integration\r\n * \r\n * This is a wrapper around the shadcn/ui RadioGroup primitive that adds:\r\n * - Form integration with react-hook-form\r\n * - Automatic validation registration\r\n * - Label, helper text, and error message support\r\n * \r\n * @example\r\n * ```tsx\r\n * // Inside a Form component\r\n * <RadioGroup \r\n *   name=\"gender\" \r\n *   label=\"Gender\"\r\n *   required\r\n *   options={[\r\n *     { label: \"Male\", value: \"male\" },\r\n *     { label: \"Female\", value: \"female\" },\r\n *     { label: \"Other\", value: \"other\" },\r\n *   ]} \r\n * />\r\n * ```\r\n */\r\nexport function RadioGroup<\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  options = [],\r\n  direction = \"vertical\",\r\n  control: externalControl,\r\n  children,\r\n  disabled,\r\n  className,\r\n  // Validation props\r\n  required,\r\n  validate,\r\n}: RadioGroupProps<TFieldValues, TName>) {\r\n  const generatedId = useId();\r\n  \r\n  // Try to get form context\r\n  const formConfigContext = useContext(FormConfigContext);\r\n  const formConfig: FormConfig = formConfigContext ?? {};\r\n  \r\n  // Get form context from react-hook-form\r\n  const rhfContext = useRHFFormContext<TFieldValues>();\r\n  const control = externalControl ?? rhfContext?.control;\r\n\r\n  // Register validation rules with the form\r\n  useEffect(() => {\r\n    if (formConfigContext?.registerFieldValidation) {\r\n      const rules: FieldValidationRules = {};\r\n      \r\n      if (required !== undefined) rules.required = required;\r\n      if (validate !== undefined) rules.validate = validate;\r\n\r\n      formConfigContext.registerFieldValidation({\r\n        name: name as string,\r\n        type: \"string\",\r\n        rules,\r\n      });\r\n\r\n      return () => {\r\n        formConfigContext.unregisterFieldValidation(name as string);\r\n      };\r\n    }\r\n  }, [formConfigContext, name, required, validate]);\r\n\r\n  // Use controller for form integration\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  \r\n  // Merge sizes - prop takes precedence over form config\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  const contextValue: RadioGroupContextValue = {\r\n    name: name as string,\r\n    value: field.value,\r\n    onChange: field.onChange,\r\n    disabled: effectiveDisabled,\r\n    size: effectiveSize,\r\n  };\r\n\r\n  return (\r\n    <div className={cn(\"space-y-2\", className)}>\r\n      {label && (\r\n        <Label className={cn(\r\n          \"block\",\r\n          required && \"after:content-['*'] after:ml-0.5 after:text-destructive\"\r\n        )}>\r\n          {label}\r\n          {formConfig.colon && \":\"}\r\n        </Label>\r\n      )}\r\n      \r\n      <RadioGroupContext.Provider value={contextValue}>\r\n        <ShadcnRadioGroup\r\n          value={field.value?.toString()}\r\n          onValueChange={(value) => field.onChange(value)}\r\n          disabled={effectiveDisabled}\r\n          aria-labelledby={label ? `${generatedId}-label` : undefined}\r\n          className={cn(\r\n            direction === \"horizontal\" && \"flex flex-row gap-4\",\r\n            direction === \"vertical\" && \"flex flex-col gap-2\"\r\n          )}\r\n        >\r\n          {children ?? options.map((option) => (\r\n            <RadioItem\r\n              key={option.value}\r\n              value={option.value}\r\n              disabled={option.disabled}\r\n              size={effectiveSize}\r\n              variant={effectiveVariant}\r\n            >\r\n              {option.label}\r\n            </RadioItem>\r\n          ))}\r\n        </ShadcnRadioGroup>\r\n      </RadioGroupContext.Provider>\r\n\r\n      {showError && hasError && (\r\n        <p className=\"text-sm text-destructive\" role=\"alert\">\r\n          {errorMessage}\r\n        </p>\r\n      )}\r\n      \r\n      {helperText && !hasError && (\r\n        <p className=\"text-sm text-muted-foreground\">\r\n          {helperText}\r\n        </p>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nRadioGroup.displayName = \"RadioGroup\";\r\n\r\nexport interface RadioItemProps extends Omit<ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, \"value\">,\r\n    VariantProps<typeof radioSizeVariants> {\r\n  /** Value for this radio option */\r\n  value: string | number;\r\n  /** Label for this radio option */\r\n  children?: ReactNode;\r\n  /** Variant style */\r\n  variant?: \"default\" | \"error\";\r\n}\r\n\r\n/**\r\n * RadioItem component - must be used within RadioGroup\r\n * \r\n * This is a wrapper around the shadcn/ui RadioGroupItem primitive\r\n */\r\nfunction RadioItemInner(\r\n  {\r\n    value,\r\n    children,\r\n    size,\r\n    variant,\r\n    className,\r\n    disabled,\r\n    id: providedId,\r\n    ...props\r\n  }: RadioItemProps,\r\n  ref: React.ForwardedRef<React.ElementRef<typeof RadioGroupPrimitive.Item>>\r\n) {\r\n  const generatedId = useId();\r\n  const inputId = providedId ?? generatedId;\r\n  \r\n  const groupContext = useContext(RadioGroupContext);\r\n  \r\n  const effectiveSize = size ?? groupContext?.size ?? \"md\";\r\n  const effectiveDisabled = disabled ?? groupContext?.disabled;\r\n\r\n  return (\r\n    <div className=\"flex items-center gap-2\">\r\n      <ShadcnRadioGroupItem\r\n        {...props}\r\n        ref={ref}\r\n        id={inputId}\r\n        value={value.toString()}\r\n        disabled={effectiveDisabled}\r\n        className={cn(\r\n          radioSizeVariants({ size: effectiveSize }),\r\n          variant === \"error\" && \"border-destructive\",\r\n          className\r\n        )}\r\n      />\r\n      \r\n      {children && (\r\n        <Label\r\n          htmlFor={inputId}\r\n          className={labelVariants({ disabled: effectiveDisabled })}\r\n        >\r\n          {children}\r\n        </Label>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport const RadioItem = forwardRef(RadioItemInner);\r\nRadioItem.displayName = \"RadioItem\";\r\n"],"mappings":"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"}
+{"version":3,"file":"Radio.js","names":[],"sources":["../../../src/components/Form/Radio.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { forwardRef, useId, useContext, createContext, useEffect } from \"react\";\r\nimport type { ReactNode, ComponentPropsWithoutRef } from \"react\";\r\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\r\nimport { RadioGroup as ShadcnRadioGroup, RadioGroupItem as ShadcnRadioGroupItem } from \"../../primitives/radio-group\";\r\nimport { Label } from \"../../primitives/label\";\r\nimport type * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\r\n\r\nconst radioSizeVariants = cva(\r\n  \"\",\r\n  {\r\n    variants: {\r\n      size: {\r\n        sm: \"h-4 w-4\",\r\n        md: \"h-5 w-5\",\r\n        lg: \"h-6 w-6\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      size: \"md\",\r\n    },\r\n  }\r\n);\r\n\r\nconst labelVariants = cva(\r\n  \"text-sm font-medium cursor-pointer select-none\",\r\n  {\r\n    variants: {\r\n      disabled: {\r\n        true: \"cursor-not-allowed opacity-50\",\r\n        false: \"\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      disabled: false,\r\n    },\r\n  }\r\n);\r\n\r\n// Radio Group Context\r\ninterface RadioGroupContextValue {\r\n  name: string;\r\n  value: string | number | undefined;\r\n  onChange: (value: string | number) => void;\r\n  disabled?: boolean;\r\n  size?: \"sm\" | \"md\" | \"lg\";\r\n}\r\n\r\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\r\n\r\nexport interface RadioOption {\r\n  label: ReactNode;\r\n  value: string | number;\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface RadioGroupProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof radioSizeVariants> {\r\n  /** Field name - required for form integration */\r\n  name: TName;\r\n  /** Label text for the radio group */\r\n  label?: string;\r\n  /** Helper text displayed below the radio group */\r\n  helperText?: string;\r\n  /** Whether to show the error message */\r\n  showError?: boolean;\r\n  /** Custom error message (overrides form error) */\r\n  error?: string;\r\n  /** Options for the radio group */\r\n  options?: RadioOption[];\r\n  /** Layout direction */\r\n  direction?: \"horizontal\" | \"vertical\";\r\n  /** External control (for use outside Form) */\r\n  control?: Control<TFieldValues>;\r\n  /** Children (alternative to options prop) */\r\n  children?: ReactNode;\r\n  /** Disabled state */\r\n  disabled?: boolean;\r\n  /** Additional class name */\r\n  className?: string;\r\n  /** Variant style */\r\n  variant?: \"default\" | \"error\";\r\n  \r\n  // Validation props\r\n  /** Field is required */\r\n  required?: boolean | string;\r\n  /** Custom validation function */\r\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\n/**\r\n * RadioGroup component with form integration\r\n * \r\n * This is a wrapper around the shadcn/ui RadioGroup primitive that adds:\r\n * - Form integration with react-hook-form\r\n * - Automatic validation registration\r\n * - Label, helper text, and error message support\r\n * \r\n * @example\r\n * ```tsx\r\n * // Inside a Form component\r\n * <RadioGroup \r\n *   name=\"gender\" \r\n *   label=\"Gender\"\r\n *   required\r\n *   options={[\r\n *     { label: \"Male\", value: \"male\" },\r\n *     { label: \"Female\", value: \"female\" },\r\n *     { label: \"Other\", value: \"other\" },\r\n *   ]} \r\n * />\r\n * ```\r\n */\r\nexport function RadioGroup<\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  options = [],\r\n  direction = \"vertical\",\r\n  control: externalControl,\r\n  children,\r\n  disabled,\r\n  className,\r\n  // Validation props\r\n  required,\r\n  validate,\r\n}: RadioGroupProps<TFieldValues, TName>) {\r\n  const generatedId = useId();\r\n  \r\n  // Try to get form context\r\n  const formConfigContext = useContext(FormConfigContext);\r\n  const formConfig: FormConfig = formConfigContext ?? {};\r\n  \r\n  // Get form context from react-hook-form\r\n  const rhfContext = useRHFFormContext<TFieldValues>();\r\n  const control = externalControl ?? rhfContext?.control;\r\n\r\n  // Register validation rules with the form\r\n  useEffect(() => {\r\n    if (formConfigContext?.registerFieldValidation) {\r\n      const rules: FieldValidationRules = {};\r\n      \r\n      if (required !== undefined) rules.required = required;\r\n      if (validate !== undefined) rules.validate = validate;\r\n\r\n      formConfigContext.registerFieldValidation({\r\n        name: name as string,\r\n        type: \"string\",\r\n        rules,\r\n      });\r\n\r\n      return () => {\r\n        formConfigContext.unregisterFieldValidation(name as string);\r\n      };\r\n    }\r\n  }, [formConfigContext, name, required, validate]);\r\n\r\n  // Use controller for form integration\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  \r\n  // Merge sizes - prop takes precedence over form config\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  const contextValue: RadioGroupContextValue = {\r\n    name: name as string,\r\n    value: field.value,\r\n    onChange: field.onChange,\r\n    disabled: effectiveDisabled,\r\n    size: effectiveSize,\r\n  };\r\n\r\n  return (\r\n    <div className={cn(\"space-y-2\", className)}>\r\n      {label && (\r\n        <Label className={cn(\r\n          \"block\",\r\n          required && \"after:content-['*'] after:ml-0.5 after:text-destructive\"\r\n        )}>\r\n          {label}\r\n          {formConfig.colon && \":\"}\r\n        </Label>\r\n      )}\r\n      \r\n      <RadioGroupContext.Provider value={contextValue}>\r\n        <ShadcnRadioGroup\r\n          value={field.value?.toString()}\r\n          onValueChange={(value) => field.onChange(value)}\r\n          disabled={effectiveDisabled}\r\n          aria-labelledby={label ? `${generatedId}-label` : undefined}\r\n          className={cn(\r\n            direction === \"horizontal\" && \"flex flex-row gap-4\",\r\n            direction === \"vertical\" && \"flex flex-col gap-2\"\r\n          )}\r\n        >\r\n          {children ?? options.map((option) => (\r\n            <RadioItem\r\n              key={option.value}\r\n              value={option.value}\r\n              disabled={option.disabled}\r\n              size={effectiveSize}\r\n              variant={effectiveVariant}\r\n            >\r\n              {option.label}\r\n            </RadioItem>\r\n          ))}\r\n        </ShadcnRadioGroup>\r\n      </RadioGroupContext.Provider>\r\n\r\n      {showError && hasError && (\r\n        <p className=\"text-sm text-destructive\" role=\"alert\">\r\n          {errorMessage}\r\n        </p>\r\n      )}\r\n      \r\n      {helperText && !hasError && (\r\n        <p className=\"text-sm text-muted-foreground\">\r\n          {helperText}\r\n        </p>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nRadioGroup.displayName = \"RadioGroup\";\r\n\r\nexport interface RadioItemProps extends Omit<ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, \"value\">,\r\n    VariantProps<typeof radioSizeVariants> {\r\n  /** Value for this radio option */\r\n  value: string | number;\r\n  /** Label for this radio option */\r\n  children?: ReactNode;\r\n  /** Variant style */\r\n  variant?: \"default\" | \"error\";\r\n}\r\n\r\n/**\r\n * RadioItem component - must be used within RadioGroup\r\n * \r\n * This is a wrapper around the shadcn/ui RadioGroupItem primitive\r\n */\r\nfunction RadioItemInner(\r\n  {\r\n    value,\r\n    children,\r\n    size,\r\n    variant,\r\n    className,\r\n    disabled,\r\n    id: providedId,\r\n    ...props\r\n  }: RadioItemProps,\r\n  ref: React.ForwardedRef<React.ElementRef<typeof RadioGroupPrimitive.Item>>\r\n) {\r\n  const generatedId = useId();\r\n  const inputId = providedId ?? generatedId;\r\n  \r\n  const groupContext = useContext(RadioGroupContext);\r\n  \r\n  const effectiveSize = size ?? groupContext?.size ?? \"md\";\r\n  const effectiveDisabled = disabled ?? groupContext?.disabled;\r\n\r\n  return (\r\n    <div className=\"flex items-center gap-2\">\r\n      <ShadcnRadioGroupItem\r\n        {...props}\r\n        ref={ref}\r\n        id={inputId}\r\n        value={value.toString()}\r\n        disabled={effectiveDisabled}\r\n        className={cn(\r\n          radioSizeVariants({ size: effectiveSize }),\r\n          variant === \"error\" && \"border-destructive\",\r\n          className\r\n        )}\r\n      />\r\n      \r\n      {children && (\r\n        <Label\r\n          htmlFor={inputId}\r\n          className={labelVariants({ disabled: effectiveDisabled })}\r\n        >\r\n          {children}\r\n        </Label>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport const RadioItem = forwardRef(RadioItemInner);\r\nRadioItem.displayName = \"RadioItem\";\r\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,oBAAoB,IACxB,IACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;AAEA,IAAM,gBAAgB,IACpB,kDACA;CACE,UAAU,EACR,UAAU;EACR,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,UAAU,MACZ;AACF,CACF;AAWA,IAAM,oBAAoB,cAA6C,IAAI;;;;;;;;;;;;;;;;;;;;;;;;AAmE3E,SAAgB,WAGd,EACA,MACA,OACA,YACA,YAAY,MACZ,OAAO,aACP,MACA,SACA,UAAU,CAAC,GACX,YAAY,YACZ,SAAS,iBACT,UACA,UACA,WAEA,UACA,YACuC;CACvC,MAAM,cAAc,MAAM;CAG1B,MAAM,oBAAoB,WAAW,iBAAiB;CACtD,MAAM,aAAyB,qBAAqB,CAAC;CAGrD,MAAM,aAAa,eAAgC;CACnD,MAAM,UAAU,mBAAmB,YAAY;CAG/C,gBAAgB;EACd,IAAI,mBAAmB,yBAAyB;GAC9C,MAAM,QAA8B,CAAC;GAErC,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAC7C,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAE7C,kBAAkB,wBAAwB;IAClC;IACN,MAAM;IACN;GACF,CAAC;GAED,aAAa;IACX,kBAAkB,0BAA0B,IAAc;GAC5D;EACF;CACF,GAAG;EAAC;EAAmB;EAAM;EAAU;CAAQ,CAAC;CAGhD,MAAM,EAAE,OAAO,eAAe,cAAmC;EAC/D;EACA;CACF,CAAC;CAED,MAAM,aAAa,WAAW,OAAO;CACrC,MAAM,eAAe,eAAe;CACpC,MAAM,WAAW,CAAC,CAAC;CAGnB,MAAM,gBAAgB,QAAQ,WAAW,QAAQ;CACjD,MAAM,oBAAoB,YAAY,WAAW;CACjD,MAAM,mBAAmB,WAAW,UAAU;CAE9C,MAAM,eAAuC;EACrC;EACN,OAAO,MAAM;EACb,UAAU,MAAM;EAChB,UAAU;EACV,MAAM;CACR;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,aAAa,SAAS;EAAzC,UAAA;GACG,SACC,qBAAC,OAAD;IAAO,WAAW,GAChB,SACA,YAAY,yDACd;IAHA,UAAA,CAIG,OACA,WAAW,SAAS,GAChB;;GAGT,oBAAC,kBAAkB,UAAnB;IAA4B,OAAO;IACjC,UAAA,oBAAC,cAAD;KACE,OAAO,MAAM,OAAO,SAAS;KAC7B,gBAAgB,UAAU,MAAM,SAAS,KAAK;KAC9C,UAAU;KACV,mBAAiB,QAAQ,GAAG,YAAY,UAAU,KAAA;KAClD,WAAW,GACT,cAAc,gBAAgB,uBAC9B,cAAc,cAAc,qBAC9B;KAEC,UAAA,YAAY,QAAQ,KAAK,WACxB,oBAAC,WAAD;MAEE,OAAO,OAAO;MACd,UAAU,OAAO;MACjB,MAAM;MACN,SAAS;MAER,UAAA,OAAO;KACC,GAPJ,OAAO,KAOH,CACZ;IACe,CAAA;GACQ,CAAA;GAE3B,aAAa,YACZ,oBAAC,KAAD;IAAG,WAAU;IAA2B,MAAK;IAC1C,UAAA;GACA,CAAA;GAGJ,cAAc,CAAC,YACd,oBAAC,KAAD;IAAG,WAAU;IACV,UAAA;GACA,CAAA;EAEF;;AAET;AAEA,WAAW,cAAc;;;;;;AAiBzB,SAAS,eACP,EACE,OACA,UACA,MACA,SACA,WACA,UACA,IAAI,YACJ,GAAG,SAEL,KACA;CACA,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,cAAc;CAE9B,MAAM,eAAe,WAAW,iBAAiB;CAEjD,MAAM,gBAAgB,QAAQ,cAAc,QAAQ;CACpD,MAAM,oBAAoB,YAAY,cAAc;CAEpD,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,gBAAD;GACE,GAAI;GACC;GACL,IAAI;GACJ,OAAO,MAAM,SAAS;GACtB,UAAU;GACV,WAAW,GACT,kBAAkB,EAAE,MAAM,cAAc,CAAC,GACzC,YAAY,WAAW,sBACvB,SACF;EACD,CAAA,GAEA,YACC,oBAAC,OAAD;GACE,SAAS;GACT,WAAW,cAAc,EAAE,UAAU,kBAAkB,CAAC;GAEvD;EACI,CAAA,CAEN;;AAET;AAEA,IAAa,YAAY,WAAW,cAAc;AAClD,UAAU,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/Form/Select.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useId, useContext, useEffect } from \"react\";\r\nimport type { ReactNode } from \"react\";\r\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\r\nimport { FieldLayout } from \"./FieldLayout\";\r\nimport {\r\n  Select as ShadcnSelect,\r\n  SelectContent,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from \"../../primitives/select\";\r\n\r\nconst selectSizeVariants = cva(\r\n  \"\",\r\n  {\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    },\r\n    defaultVariants: {\r\n      size: \"md\",\r\n    },\r\n  }\r\n);\r\n\r\nexport interface SelectOption {\r\n  label: string;\r\n  value: string | number;\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface SelectProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof selectSizeVariants> {\r\n  /** Field name - required for form integration */\r\n  name: TName;\r\n  /** Label text for the select */\r\n  label?: string;\r\n  /** Helper text displayed below the select */\r\n  helperText?: string;\r\n  /** Whether to show the error message */\r\n  showError?: boolean;\r\n  /** Custom error message (overrides form error) */\r\n  error?: string;\r\n  /** Whether the select should take full width */\r\n  fullWidth?: boolean;\r\n  /** Options for the select */\r\n  options?: SelectOption[];\r\n  /** Placeholder text */\r\n  placeholder?: string;\r\n  /** Allow clear selection */\r\n  allowClear?: boolean;\r\n  /** External control (for use outside Form) */\r\n  control?: Control<TFieldValues>;\r\n  /** Children (alternative to options prop) */\r\n  children?: ReactNode;\r\n  /** Disabled state */\r\n  disabled?: boolean;\r\n  /** Additional class name */\r\n  className?: string;\r\n  /** ID for the select */\r\n  id?: string;\r\n  /** Variant style */\r\n  variant?: \"default\" | \"error\" | \"success\";\r\n  \r\n  // Validation props\r\n  /** Field is required */\r\n  required?: boolean | string;\r\n  /** Custom validation function */\r\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\n/**\r\n * Select component with form integration\r\n * \r\n * This is a wrapper around the shadcn/ui Select primitive that adds:\r\n * - Form integration with react-hook-form\r\n * - Automatic validation registration\r\n * - Label, helper text, and error message support\r\n * \r\n * @example\r\n * ```tsx\r\n * // Inside a Form component\r\n * <Select \r\n *   name=\"country\" \r\n *   label=\"Country\" \r\n *   required\r\n *   options={[\r\n *     { label: \"USA\", value: \"us\" },\r\n *     { label: \"Canada\", value: \"ca\" },\r\n *   ]} \r\n * />\r\n * ```\r\n */\r\nexport function Select<\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  className,\r\n  disabled,\r\n  options = [],\r\n  placeholder,\r\n  allowClear,\r\n  id: providedId,\r\n  control: externalControl,\r\n  children,\r\n  // Validation props\r\n  required,\r\n  validate,\r\n}: SelectProps<TFieldValues, TName>) {\r\n  const generatedId = useId();\r\n  const inputId = providedId ?? generatedId;\r\n  \r\n  // Try to get form context\r\n  const formConfigContext = useContext(FormConfigContext);\r\n  const formConfig: FormConfig = formConfigContext ?? {};\r\n  \r\n  // Get form context from react-hook-form\r\n  const rhfContext = useRHFFormContext<TFieldValues>();\r\n  const control = externalControl ?? rhfContext?.control;\r\n\r\n  // Register validation rules with the form\r\n  useEffect(() => {\r\n    if (formConfigContext?.registerFieldValidation) {\r\n      const rules: FieldValidationRules = {};\r\n      \r\n      if (required !== undefined) rules.required = required;\r\n      if (validate !== undefined) rules.validate = validate;\r\n\r\n      formConfigContext.registerFieldValidation({\r\n        name: name as string,\r\n        type: \"string\",\r\n        rules,\r\n      });\r\n\r\n      return () => {\r\n        formConfigContext.unregisterFieldValidation(name as string);\r\n      };\r\n    }\r\n  }, [formConfigContext, name, required, validate]);\r\n\r\n  // Use controller for form integration\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  \r\n  // Merge sizes - prop takes precedence over form config\r\n  const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n  const effectiveDisabled = disabled ?? formConfig.disabled;\r\n  \r\n  // Determine variant based on error state\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      <ShadcnSelect\r\n        value={field.value?.toString() ?? \"\"}\r\n        onValueChange={(value) => {\r\n          if (value === \"\" && allowClear) {\r\n            field.onChange(\"\");\r\n          } else {\r\n            field.onChange(value);\r\n          }\r\n        }}\r\n        disabled={effectiveDisabled}\r\n      >\r\n        <SelectTrigger\r\n          id={inputId}\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            selectSizeVariants({ size: effectiveSize }),\r\n            effectiveVariant === \"error\" && \"border-destructive focus:ring-destructive\",\r\n            effectiveVariant === \"success\" && \"border-green-500 focus:ring-green-500\",\r\n            className\r\n          )}\r\n        >\r\n          <SelectValue placeholder={placeholder} />\r\n        </SelectTrigger>\r\n        <SelectContent>\r\n          {allowClear && field.value && (\r\n            <SelectItem value=\"\">\r\n              <span className=\"text-muted-foreground\">Clear selection</span>\r\n            </SelectItem>\r\n          )}\r\n          {children ?? options.map((option) => (\r\n            <SelectItem\r\n              key={option.value}\r\n              value={option.value.toString()}\r\n              disabled={option.disabled}\r\n            >\r\n              {option.label}\r\n            </SelectItem>\r\n          ))}\r\n        </SelectContent>\r\n      </ShadcnSelect>\r\n    </FieldLayout>\r\n  );\r\n}\r\n\r\nSelect.displayName = \"Select\";\r\n"],"mappings":";;;;;;;;;;;AAiBA,IAAM,qBAAqB,IACzB,IACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;;;;;;;;;;;;;;;;;;;;;;;AAwEA,SAAgB,OAGd,EACA,MACA,OACA,YACA,YAAY,MACZ,OAAO,aACP,MACA,SACA,YAAY,MACZ,WACA,UACA,UAAU,CAAC,GACX,aACA,YACA,IAAI,YACJ,SAAS,iBACT,UAEA,UACA,YACmC;CACnC,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,cAAc;CAG9B,MAAM,oBAAoB,WAAW,iBAAiB;CACtD,MAAM,aAAyB,qBAAqB,CAAC;CAGrD,MAAM,aAAa,eAAgC;CACnD,MAAM,UAAU,mBAAmB,YAAY;CAG/C,gBAAgB;EACd,IAAI,mBAAmB,yBAAyB;GAC9C,MAAM,QAA8B,CAAC;GAErC,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAC7C,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAE7C,kBAAkB,wBAAwB;IAClC;IACN,MAAM;IACN;GACF,CAAC;GAED,aAAa;IACX,kBAAkB,0BAA0B,IAAc;GAC5D;EACF;CACF,GAAG;EAAC;EAAmB;EAAM;EAAU;CAAQ,CAAC;CAGhD,MAAM,EAAE,OAAO,eAAe,cAAmC;EAC/D;EACA;CACF,CAAC;CAED,MAAM,aAAa,WAAW,OAAO;CACrC,MAAM,eAAe,eAAe;CACpC,MAAM,WAAW,CAAC,CAAC;CAGnB,MAAM,gBAAgB,QAAQ,WAAW,QAAQ;CACjD,MAAM,oBAAoB,YAAY,WAAW;CAGjD,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,UAAD;GACE,OAAO,MAAM,OAAO,SAAS,KAAK;GAClC,gBAAgB,UAAU;IACxB,IAAI,UAAU,MAAM,YAClB,MAAM,SAAS,EAAE;SAEjB,MAAM,SAAS,KAAK;GAExB;GACA,UAAU;aATZ,CAWE,oBAAC,eAAD;IACE,IAAI;IACJ,gBAAc;IACd,oBACE,WACI,GAAG,QAAQ,UACX,aACE,GAAG,QAAQ,WACX,KAAA;IAER,WAAW,GACT,mBAAmB,EAAE,MAAM,cAAc,CAAC,GAC1C,qBAAqB,WAAW,6CAChC,qBAAqB,aAAa,yCAClC,SACF;cAEA,oBAAC,aAAD,EAA0B,YAAc,CAAA;GAC3B,CAAA,GACf,qBAAC,eAAD,EAAA,UAAA,CACG,cAAc,MAAM,SACnB,oBAAC,YAAD;IAAY,OAAM;cAChB,oBAAC,QAAD;KAAM,WAAU;eAAwB;IAAqB,CAAA;GACnD,CAAA,GAEb,YAAY,QAAQ,KAAK,WACxB,oBAAC,YAAD;IAEE,OAAO,OAAO,MAAM,SAAS;IAC7B,UAAU,OAAO;cAEhB,OAAO;GACE,GALL,OAAO,KAKF,CACb,CACY,EAAA,CAAA,CACH;;CACH,CAAA;AAEjB;AAEA,OAAO,cAAc"}
+{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/Form/Select.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useId, useContext, useEffect } from \"react\";\r\nimport type { ReactNode } from \"react\";\r\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\r\nimport { FieldLayout } from \"./FieldLayout\";\r\nimport {\r\n  Select as ShadcnSelect,\r\n  SelectContent,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from \"../../primitives/select\";\r\n\r\nconst selectSizeVariants = cva(\r\n  \"\",\r\n  {\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    },\r\n    defaultVariants: {\r\n      size: \"md\",\r\n    },\r\n  }\r\n);\r\n\r\nexport interface SelectOption {\r\n  label: string;\r\n  value: string | number;\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface SelectProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends VariantProps<typeof selectSizeVariants> {\r\n  /** Field name - required for form integration */\r\n  name: TName;\r\n  /** Label text for the select */\r\n  label?: string;\r\n  /** Helper text displayed below the select */\r\n  helperText?: string;\r\n  /** Whether to show the error message */\r\n  showError?: boolean;\r\n  /** Custom error message (overrides form error) */\r\n  error?: string;\r\n  /** Whether the select should take full width */\r\n  fullWidth?: boolean;\r\n  /** Options for the select */\r\n  options?: SelectOption[];\r\n  /** Placeholder text */\r\n  placeholder?: string;\r\n  /** Allow clear selection */\r\n  allowClear?: boolean;\r\n  /** External control (for use outside Form) */\r\n  control?: Control<TFieldValues>;\r\n  /** Children (alternative to options prop) */\r\n  children?: ReactNode;\r\n  /** Disabled state */\r\n  disabled?: boolean;\r\n  /** Additional class name */\r\n  className?: string;\r\n  /** ID for the select */\r\n  id?: string;\r\n  /** Variant style */\r\n  variant?: \"default\" | \"error\" | \"success\";\r\n  \r\n  // Validation props\r\n  /** Field is required */\r\n  required?: boolean | string;\r\n  /** Custom validation function */\r\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\n/**\r\n * Select component with form integration\r\n * \r\n * This is a wrapper around the shadcn/ui Select primitive that adds:\r\n * - Form integration with react-hook-form\r\n * - Automatic validation registration\r\n * - Label, helper text, and error message support\r\n * \r\n * @example\r\n * ```tsx\r\n * // Inside a Form component\r\n * <Select \r\n *   name=\"country\" \r\n *   label=\"Country\" \r\n *   required\r\n *   options={[\r\n *     { label: \"USA\", value: \"us\" },\r\n *     { label: \"Canada\", value: \"ca\" },\r\n *   ]} \r\n * />\r\n * ```\r\n */\r\nexport function Select<\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  className,\r\n  disabled,\r\n  options = [],\r\n  placeholder,\r\n  allowClear,\r\n  id: providedId,\r\n  control: externalControl,\r\n  children,\r\n  // Validation props\r\n  required,\r\n  validate,\r\n}: SelectProps<TFieldValues, TName>) {\r\n  const generatedId = useId();\r\n  const inputId = providedId ?? generatedId;\r\n  \r\n  // Try to get form context\r\n  const formConfigContext = useContext(FormConfigContext);\r\n  const formConfig: FormConfig = formConfigContext ?? {};\r\n  \r\n  // Get form context from react-hook-form\r\n  const rhfContext = useRHFFormContext<TFieldValues>();\r\n  const control = externalControl ?? rhfContext?.control;\r\n\r\n  // Register validation rules with the form\r\n  useEffect(() => {\r\n    if (formConfigContext?.registerFieldValidation) {\r\n      const rules: FieldValidationRules = {};\r\n      \r\n      if (required !== undefined) rules.required = required;\r\n      if (validate !== undefined) rules.validate = validate;\r\n\r\n      formConfigContext.registerFieldValidation({\r\n        name: name as string,\r\n        type: \"string\",\r\n        rules,\r\n      });\r\n\r\n      return () => {\r\n        formConfigContext.unregisterFieldValidation(name as string);\r\n      };\r\n    }\r\n  }, [formConfigContext, name, required, validate]);\r\n\r\n  // Use controller for form integration\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  \r\n  // Merge sizes - prop takes precedence over form config\r\n  const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n  const effectiveDisabled = disabled ?? formConfig.disabled;\r\n  \r\n  // Determine variant based on error state\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      <ShadcnSelect\r\n        value={field.value?.toString() ?? \"\"}\r\n        onValueChange={(value) => {\r\n          if (value === \"\" && allowClear) {\r\n            field.onChange(\"\");\r\n          } else {\r\n            field.onChange(value);\r\n          }\r\n        }}\r\n        disabled={effectiveDisabled}\r\n      >\r\n        <SelectTrigger\r\n          id={inputId}\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            selectSizeVariants({ size: effectiveSize }),\r\n            effectiveVariant === \"error\" && \"border-destructive focus:ring-destructive\",\r\n            effectiveVariant === \"success\" && \"border-green-500 focus:ring-green-500\",\r\n            className\r\n          )}\r\n        >\r\n          <SelectValue placeholder={placeholder} />\r\n        </SelectTrigger>\r\n        <SelectContent>\r\n          {allowClear && field.value && (\r\n            <SelectItem value=\"\">\r\n              <span className=\"text-muted-foreground\">Clear selection</span>\r\n            </SelectItem>\r\n          )}\r\n          {children ?? options.map((option) => (\r\n            <SelectItem\r\n              key={option.value}\r\n              value={option.value.toString()}\r\n              disabled={option.disabled}\r\n            >\r\n              {option.label}\r\n            </SelectItem>\r\n          ))}\r\n        </SelectContent>\r\n      </ShadcnSelect>\r\n    </FieldLayout>\r\n  );\r\n}\r\n\r\nSelect.displayName = \"Select\";\r\n"],"mappings":";;;;;;;;;;;AAiBA,IAAM,qBAAqB,IACzB,IACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;;;;;;;;;;;;;;;;;;;;;;;AAwEA,SAAgB,OAGd,EACA,MACA,OACA,YACA,YAAY,MACZ,OAAO,aACP,MACA,SACA,YAAY,MACZ,WACA,UACA,UAAU,CAAC,GACX,aACA,YACA,IAAI,YACJ,SAAS,iBACT,UAEA,UACA,YACmC;CACnC,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,cAAc;CAG9B,MAAM,oBAAoB,WAAW,iBAAiB;CACtD,MAAM,aAAyB,qBAAqB,CAAC;CAGrD,MAAM,aAAa,eAAgC;CACnD,MAAM,UAAU,mBAAmB,YAAY;CAG/C,gBAAgB;EACd,IAAI,mBAAmB,yBAAyB;GAC9C,MAAM,QAA8B,CAAC;GAErC,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAC7C,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAE7C,kBAAkB,wBAAwB;IAClC;IACN,MAAM;IACN;GACF,CAAC;GAED,aAAa;IACX,kBAAkB,0BAA0B,IAAc;GAC5D;EACF;CACF,GAAG;EAAC;EAAmB;EAAM;EAAU;CAAQ,CAAC;CAGhD,MAAM,EAAE,OAAO,eAAe,cAAmC;EAC/D;EACA;CACF,CAAC;CAED,MAAM,aAAa,WAAW,OAAO;CACrC,MAAM,eAAe,eAAe;CACpC,MAAM,WAAW,CAAC,CAAC;CAGnB,MAAM,gBAAgB,QAAQ,WAAW,QAAQ;CACjD,MAAM,oBAAoB,YAAY,WAAW;CAGjD,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,UAAD;GACE,OAAO,MAAM,OAAO,SAAS,KAAK;GAClC,gBAAgB,UAAU;IACxB,IAAI,UAAU,MAAM,YAClB,MAAM,SAAS,EAAE;SAEjB,MAAM,SAAS,KAAK;GAExB;GACA,UAAU;GATZ,UAAA,CAWE,oBAAC,eAAD;IACE,IAAI;IACJ,gBAAc;IACd,oBACE,WACI,GAAG,QAAQ,UACX,aACE,GAAG,QAAQ,WACX,KAAA;IAER,WAAW,GACT,mBAAmB,EAAE,MAAM,cAAc,CAAC,GAC1C,qBAAqB,WAAW,6CAChC,qBAAqB,aAAa,yCAClC,SACF;IAEA,UAAA,oBAAC,aAAD,EAA0B,YAAc,CAAA;GAC3B,CAAA,GACf,qBAAC,eAAD,EAAA,UAAA,CACG,cAAc,MAAM,SACnB,oBAAC,YAAD;IAAY,OAAM;IAChB,UAAA,oBAAC,QAAD;KAAM,WAAU;KAAwB,UAAA;IAAqB,CAAA;GACnD,CAAA,GAEb,YAAY,QAAQ,KAAK,WACxB,oBAAC,YAAD;IAEE,OAAO,OAAO,MAAM,SAAS;IAC7B,UAAU,OAAO;IAEhB,UAAA,OAAO;GACE,GALL,OAAO,KAKF,CACb,CACY,EAAA,CAAA,CACH;;CACH,CAAA;AAEjB;AAEA,OAAO,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","names":[],"sources":["../../../src/components/Form/TextArea.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { forwardRef, useId, useContext, useEffect } from \"react\";\r\nimport type { TextareaHTMLAttributes } from \"react\";\r\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\r\nimport { labelVariants } from \"./variants\";\r\nimport { Textarea } from \"../../primitives/textarea\";\r\nimport { Label } from \"../../primitives/label\";\r\n\r\nconst textAreaSizeVariants = cva(\r\n  \"\",\r\n  {\r\n    variants: {\r\n      size: {\r\n        sm: \"text-xs px-2 py-1.5 min-h-[60px]\",\r\n        md: \"text-sm px-3 py-2 min-h-[80px]\",\r\n        lg: \"text-base px-4 py-3 min-h-[100px]\",\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\n\r\n/**\r\n * Validation rule with optional custom message\r\n */\r\ntype ValidationRule<T> = T | { value: T; message: string };\r\n\r\nexport interface TextAreaProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, \"name\" | \"required\" | \"minLength\" | \"maxLength\">,\r\n    VariantProps<typeof textAreaSizeVariants> {\r\n  /** Field name - required for form integration */\r\n  name: TName;\r\n  /** Label text for the textarea */\r\n  label?: string;\r\n  /** Helper text displayed below the textarea */\r\n  helperText?: string;\r\n  /** Whether to show the error message */\r\n  showError?: boolean;\r\n  /** Custom error message (overrides form error) */\r\n  error?: string;\r\n  /** Whether the textarea should take full width */\r\n  fullWidth?: boolean;\r\n  /** Show character count */\r\n  showCount?: boolean;\r\n  /** Maximum character count (for display) */\r\n  maxCount?: number;\r\n  /** External control (for use outside Form) */\r\n  control?: Control<TFieldValues>;\r\n  \r\n  // Validation props\r\n  /** Field is required */\r\n  required?: boolean | string;\r\n  /** Minimum length */\r\n  minLength?: ValidationRule<number>;\r\n  /** Maximum length */\r\n  maxLength?: ValidationRule<number>;\r\n  /** Custom validation function */\r\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\n/**\r\n * TextArea component with form integration\r\n * \r\n * This is a wrapper around the shadcn/ui Textarea primitive that adds:\r\n * - Form integration with react-hook-form\r\n * - Automatic validation registration\r\n * - Label, helper text, and error message support\r\n * - Character count display\r\n * \r\n * @example\r\n * ```tsx\r\n * // Inside a Form component\r\n * <TextArea name=\"description\" label=\"Description\" required minLength={10} />\r\n * <TextArea name=\"bio\" label=\"Bio\" showCount maxCount={500} maxLength={500} />\r\n * ```\r\n */\r\nfunction TextAreaInner<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\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    className,\r\n    disabled,\r\n    showCount,\r\n    maxCount,\r\n    id: providedId,\r\n    control: externalControl,\r\n    // Validation props\r\n    required,\r\n    minLength,\r\n    maxLength,\r\n    validate,\r\n    ...props\r\n  }: TextAreaProps<TFieldValues, TName>,\r\n  ref: React.ForwardedRef<HTMLTextAreaElement>\r\n) {\r\n  const generatedId = useId();\r\n  const inputId = providedId ?? generatedId;\r\n  \r\n  // Try to get form context\r\n  const formConfigContext = useContext(FormConfigContext);\r\n  const formConfig: FormConfig = formConfigContext ?? {};\r\n  \r\n  // Get form context from react-hook-form\r\n  const rhfContext = useRHFFormContext<TFieldValues>();\r\n  const control = externalControl ?? rhfContext?.control;\r\n\r\n  // Register validation rules with the form\r\n  useEffect(() => {\r\n    if (formConfigContext?.registerFieldValidation) {\r\n      const rules: FieldValidationRules = {};\r\n      \r\n      if (required !== undefined) rules.required = required;\r\n      if (minLength !== undefined) rules.minLength = minLength;\r\n      if (maxLength !== undefined) rules.maxLength = maxLength;\r\n      if (validate !== undefined) rules.validate = validate;\r\n\r\n      formConfigContext.registerFieldValidation({\r\n        name: name as string,\r\n        type: \"string\",\r\n        rules,\r\n      });\r\n\r\n      return () => {\r\n        formConfigContext.unregisterFieldValidation(name as string);\r\n      };\r\n    }\r\n  }, [formConfigContext, name, required, minLength, maxLength, validate]);\r\n\r\n  // Use controller for form integration\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  \r\n  // Merge sizes - prop takes precedence over form config\r\n  const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n  const effectiveDisabled = disabled ?? formConfig.disabled;\r\n  \r\n  // Determine variant based on error state\r\n  const effectiveVariant = hasError ? \"error\" : variant;\r\n\r\n  const currentLength = typeof field.value === \"string\" ? field.value.length : 0;\r\n  \r\n  // Get maxLength value for HTML attribute\r\n  const maxLengthValue = maxCount ?? (typeof maxLength === \"number\" ? maxLength : (maxLength as { value: number })?.value);\r\n\r\n  return (\r\n    <div className={cn(\"space-y-1.5\", fullWidth && \"w-full\")}>\r\n      {label && (\r\n        <Label\r\n          htmlFor={inputId}\r\n          className={labelVariants({ required: !!required })}\r\n        >\r\n          {label}\r\n          {formConfig.colon && \":\"}\r\n        </Label>\r\n      )}\r\n      \r\n      <div className=\"relative\">\r\n        <Textarea\r\n          {...props}\r\n          {...field}\r\n          ref={(node) => {\r\n            if (typeof ref === \"function\") {\r\n              ref(node);\r\n            } else if (ref) {\r\n              ref.current = node;\r\n            }\r\n            field.ref(node);\r\n          }}\r\n          id={inputId}\r\n          disabled={effectiveDisabled}\r\n          maxLength={maxLengthValue}\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            textAreaSizeVariants({ size: effectiveSize, variant: effectiveVariant }),\r\n            showCount && \"pb-6\",\r\n            className\r\n          )}\r\n        />\r\n        \r\n        {showCount && (\r\n          <div className=\"absolute bottom-2 right-2 text-xs text-muted-foreground\">\r\n            {currentLength}{maxCount ? `/${maxCount}` : \"\"}\r\n          </div>\r\n        )}\r\n      </div>\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      {helperText && !hasError && (\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    </div>\r\n  );\r\n}\r\n\r\n// Use forwardRef with generic support\r\nexport const TextArea = forwardRef(TextAreaInner) as <\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\r\n  props: TextAreaProps<TFieldValues, TName> & { ref?: React.ForwardedRef<HTMLTextAreaElement> }\r\n) => React.ReactElement;\r\n\r\n(TextArea as React.FC).displayName = \"TextArea\";\r\n"],"mappings":";;;;;;;;;;;;AAYA,IAAM,uBAAuB,IAC3B,IACA;CACE,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,CACF;;;;;;;;;;;;;;;;;AA0DA,SAAS,cAIP,EACE,MACA,OACA,YACA,YAAY,MACZ,OAAO,aACP,MACA,SACA,YAAY,MACZ,WACA,UACA,WACA,UACA,IAAI,YACJ,SAAS,iBAET,UACA,WACA,WACA,UACA,GAAG,SAEL,KACA;CACA,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,cAAc;CAG9B,MAAM,oBAAoB,WAAW,iBAAiB;CACtD,MAAM,aAAyB,qBAAqB,CAAC;CAGrD,MAAM,aAAa,eAAgC;CACnD,MAAM,UAAU,mBAAmB,YAAY;CAG/C,gBAAgB;EACd,IAAI,mBAAmB,yBAAyB;GAC9C,MAAM,QAA8B,CAAC;GAErC,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAC7C,IAAI,cAAc,KAAA,GAAW,MAAM,YAAY;GAC/C,IAAI,cAAc,KAAA,GAAW,MAAM,YAAY;GAC/C,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAE7C,kBAAkB,wBAAwB;IAClC;IACN,MAAM;IACN;GACF,CAAC;GAED,aAAa;IACX,kBAAkB,0BAA0B,IAAc;GAC5D;EACF;CACF,GAAG;EAAC;EAAmB;EAAM;EAAU;EAAW;EAAW;CAAQ,CAAC;CAGtE,MAAM,EAAE,OAAO,eAAe,cAAmC;EAC/D;EACA;CACF,CAAC;CAED,MAAM,aAAa,WAAW,OAAO;CACrC,MAAM,eAAe,eAAe;CACpC,MAAM,WAAW,CAAC,CAAC;CAGnB,MAAM,gBAAgB,QAAQ,WAAW,QAAQ;CACjD,MAAM,oBAAoB,YAAY,WAAW;CAGjD,MAAM,mBAAmB,WAAW,UAAU;CAE9C,MAAM,gBAAgB,OAAO,MAAM,UAAU,WAAW,MAAM,MAAM,SAAS;CAG7E,MAAM,iBAAiB,aAAa,OAAO,cAAc,WAAW,YAAa,WAAiC;CAElH,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,eAAe,aAAa,QAAQ;YAAvD;GACG,SACC,qBAAC,OAAD;IACE,SAAS;IACT,WAAW,cAAc,EAAE,UAAU,CAAC,CAAC,SAAS,CAAC;cAFnD,CAIG,OACA,WAAW,SAAS,GAChB;;GAGT,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,UAAD;KACE,GAAI;KACJ,GAAI;KACJ,MAAM,SAAS;MACb,IAAI,OAAO,QAAQ,YACjB,IAAI,IAAI;WACH,IAAI,KACT,IAAI,UAAU;MAEhB,MAAM,IAAI,IAAI;KAChB;KACA,IAAI;KACJ,UAAU;KACV,WAAW;KACX,gBAAc;KACd,oBACE,WACI,GAAG,QAAQ,UACX,aACA,GAAG,QAAQ,WACX,KAAA;KAEN,WAAW,GACT,qBAAqB;MAAE,MAAM;MAAe,SAAS;KAAiB,CAAC,GACvE,aAAa,QACb,SACF;IACD,CAAA,GAEA,aACC,qBAAC,OAAD;KAAK,WAAU;eAAf,CACG,eAAe,WAAW,IAAI,aAAa,EACzC;MAEJ;;GAEJ,aAAa,YACZ,oBAAC,KAAD;IACE,IAAI,GAAG,QAAQ;IACf,WAAU;IACV,MAAK;cAEJ;GACA,CAAA;GAGJ,cAAc,CAAC,YACd,oBAAC,KAAD;IACE,IAAI,GAAG,QAAQ;IACf,WAAU;cAET;GACA,CAAA;EAEF;;AAET;AAGA,IAAa,WAAW,WAAW,aAAa;AAOhD,SAAuB,cAAc"}
+{"version":3,"file":"TextArea.js","names":[],"sources":["../../../src/components/Form/TextArea.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { forwardRef, useId, useContext, useEffect } from \"react\";\r\nimport type { TextareaHTMLAttributes } from \"react\";\r\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\r\nimport { labelVariants } from \"./variants\";\r\nimport { Textarea } from \"../../primitives/textarea\";\r\nimport { Label } from \"../../primitives/label\";\r\n\r\nconst textAreaSizeVariants = cva(\r\n  \"\",\r\n  {\r\n    variants: {\r\n      size: {\r\n        sm: \"text-xs px-2 py-1.5 min-h-[60px]\",\r\n        md: \"text-sm px-3 py-2 min-h-[80px]\",\r\n        lg: \"text-base px-4 py-3 min-h-[100px]\",\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\n\r\n/**\r\n * Validation rule with optional custom message\r\n */\r\ntype ValidationRule<T> = T | { value: T; message: string };\r\n\r\nexport interface TextAreaProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, \"name\" | \"required\" | \"minLength\" | \"maxLength\">,\r\n    VariantProps<typeof textAreaSizeVariants> {\r\n  /** Field name - required for form integration */\r\n  name: TName;\r\n  /** Label text for the textarea */\r\n  label?: string;\r\n  /** Helper text displayed below the textarea */\r\n  helperText?: string;\r\n  /** Whether to show the error message */\r\n  showError?: boolean;\r\n  /** Custom error message (overrides form error) */\r\n  error?: string;\r\n  /** Whether the textarea should take full width */\r\n  fullWidth?: boolean;\r\n  /** Show character count */\r\n  showCount?: boolean;\r\n  /** Maximum character count (for display) */\r\n  maxCount?: number;\r\n  /** External control (for use outside Form) */\r\n  control?: Control<TFieldValues>;\r\n  \r\n  // Validation props\r\n  /** Field is required */\r\n  required?: boolean | string;\r\n  /** Minimum length */\r\n  minLength?: ValidationRule<number>;\r\n  /** Maximum length */\r\n  maxLength?: ValidationRule<number>;\r\n  /** Custom validation function */\r\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\n/**\r\n * TextArea component with form integration\r\n * \r\n * This is a wrapper around the shadcn/ui Textarea primitive that adds:\r\n * - Form integration with react-hook-form\r\n * - Automatic validation registration\r\n * - Label, helper text, and error message support\r\n * - Character count display\r\n * \r\n * @example\r\n * ```tsx\r\n * // Inside a Form component\r\n * <TextArea name=\"description\" label=\"Description\" required minLength={10} />\r\n * <TextArea name=\"bio\" label=\"Bio\" showCount maxCount={500} maxLength={500} />\r\n * ```\r\n */\r\nfunction TextAreaInner<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\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    className,\r\n    disabled,\r\n    showCount,\r\n    maxCount,\r\n    id: providedId,\r\n    control: externalControl,\r\n    // Validation props\r\n    required,\r\n    minLength,\r\n    maxLength,\r\n    validate,\r\n    ...props\r\n  }: TextAreaProps<TFieldValues, TName>,\r\n  ref: React.ForwardedRef<HTMLTextAreaElement>\r\n) {\r\n  const generatedId = useId();\r\n  const inputId = providedId ?? generatedId;\r\n  \r\n  // Try to get form context\r\n  const formConfigContext = useContext(FormConfigContext);\r\n  const formConfig: FormConfig = formConfigContext ?? {};\r\n  \r\n  // Get form context from react-hook-form\r\n  const rhfContext = useRHFFormContext<TFieldValues>();\r\n  const control = externalControl ?? rhfContext?.control;\r\n\r\n  // Register validation rules with the form\r\n  useEffect(() => {\r\n    if (formConfigContext?.registerFieldValidation) {\r\n      const rules: FieldValidationRules = {};\r\n      \r\n      if (required !== undefined) rules.required = required;\r\n      if (minLength !== undefined) rules.minLength = minLength;\r\n      if (maxLength !== undefined) rules.maxLength = maxLength;\r\n      if (validate !== undefined) rules.validate = validate;\r\n\r\n      formConfigContext.registerFieldValidation({\r\n        name: name as string,\r\n        type: \"string\",\r\n        rules,\r\n      });\r\n\r\n      return () => {\r\n        formConfigContext.unregisterFieldValidation(name as string);\r\n      };\r\n    }\r\n  }, [formConfigContext, name, required, minLength, maxLength, validate]);\r\n\r\n  // Use controller for form integration\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  \r\n  // Merge sizes - prop takes precedence over form config\r\n  const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n  const effectiveDisabled = disabled ?? formConfig.disabled;\r\n  \r\n  // Determine variant based on error state\r\n  const effectiveVariant = hasError ? \"error\" : variant;\r\n\r\n  const currentLength = typeof field.value === \"string\" ? field.value.length : 0;\r\n  \r\n  // Get maxLength value for HTML attribute\r\n  const maxLengthValue = maxCount ?? (typeof maxLength === \"number\" ? maxLength : (maxLength as { value: number })?.value);\r\n\r\n  return (\r\n    <div className={cn(\"space-y-1.5\", fullWidth && \"w-full\")}>\r\n      {label && (\r\n        <Label\r\n          htmlFor={inputId}\r\n          className={labelVariants({ required: !!required })}\r\n        >\r\n          {label}\r\n          {formConfig.colon && \":\"}\r\n        </Label>\r\n      )}\r\n      \r\n      <div className=\"relative\">\r\n        <Textarea\r\n          {...props}\r\n          {...field}\r\n          ref={(node) => {\r\n            if (typeof ref === \"function\") {\r\n              ref(node);\r\n            } else if (ref) {\r\n              ref.current = node;\r\n            }\r\n            field.ref(node);\r\n          }}\r\n          id={inputId}\r\n          disabled={effectiveDisabled}\r\n          maxLength={maxLengthValue}\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            textAreaSizeVariants({ size: effectiveSize, variant: effectiveVariant }),\r\n            showCount && \"pb-6\",\r\n            className\r\n          )}\r\n        />\r\n        \r\n        {showCount && (\r\n          <div className=\"absolute bottom-2 right-2 text-xs text-muted-foreground\">\r\n            {currentLength}{maxCount ? `/${maxCount}` : \"\"}\r\n          </div>\r\n        )}\r\n      </div>\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      {helperText && !hasError && (\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    </div>\r\n  );\r\n}\r\n\r\n// Use forwardRef with generic support\r\nexport const TextArea = forwardRef(TextAreaInner) as <\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\r\n  props: TextAreaProps<TFieldValues, TName> & { ref?: React.ForwardedRef<HTMLTextAreaElement> }\r\n) => React.ReactElement;\r\n\r\n(TextArea as React.FC).displayName = \"TextArea\";\r\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"TextBox.js","names":[],"sources":["../../../src/components/Form/TextBox.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { forwardRef, useId, useContext, useEffect } from \"react\";\r\nimport type { InputHTMLAttributes, ReactNode } from \"react\";\r\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\r\nimport { FieldLayout } from \"./FieldLayout\";\r\nimport { TextBoxPrimitive } from \"../../primitives/textbox\";\r\nimport { X } from \"lucide-react\";\r\n\r\nconst textBoxVariants = cva(\r\n  \"\",\r\n  {\r\n    variants: {\r\n      size: {\r\n        sm: \"h-8 text-xs px-2\",\r\n        md: \"h-10 text-sm px-3\",\r\n        lg: \"h-12 text-base px-4\",\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\n\r\n/**\r\n * Validation rule with optional custom message\r\n */\r\ntype ValidationRule<T> = T | { value: T; message: string };\r\n\r\nexport interface TextBoxProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"name\" | \"prefix\" | \"pattern\" | \"required\" | \"minLength\" | \"maxLength\">,\r\n    VariantProps<typeof textBoxVariants> {\r\n  /** Field name - required for form integration */\r\n  name: TName;\r\n  /** Label text for the input */\r\n  label?: string;\r\n  /** Helper text displayed below the input */\r\n  helperText?: string;\r\n  /** Whether to show the error message */\r\n  showError?: boolean;\r\n  /** Custom error message (overrides form error) */\r\n  error?: string;\r\n  /** Whether the input should take full width */\r\n  fullWidth?: boolean;\r\n  /** Prefix element */\r\n  prefix?: ReactNode;\r\n  /** Suffix element */\r\n  suffix?: ReactNode;\r\n  /** Allow clear button */\r\n  allowClear?: boolean;\r\n  /** Callback when clear is clicked */\r\n  onClear?: () => void;\r\n  /** External control (for use outside Form) */\r\n  control?: Control<TFieldValues>;\r\n  \r\n  // Validation props\r\n  /** Field is required */\r\n  required?: boolean | string;\r\n  /** Minimum length for strings */\r\n  minLength?: ValidationRule<number>;\r\n  /** Maximum length for strings */\r\n  maxLength?: ValidationRule<number>;\r\n  /** Minimum value for numbers */\r\n  minValue?: ValidationRule<number>;\r\n  /** Maximum value for numbers */\r\n  maxValue?: ValidationRule<number>;\r\n  /** Regex pattern for validation */\r\n  pattern?: ValidationRule<RegExp>;\r\n  /** Email validation */\r\n  email?: boolean | string;\r\n  /** URL validation */\r\n  url?: boolean | string;\r\n  /** Custom validation function */\r\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\n/**\r\n * TextBox component with form integration and automatic validation registration\r\n * \r\n * This is a wrapper around the shadcn/ui Input primitive that adds:\r\n * - Form integration with react-hook-form\r\n * - Automatic validation registration\r\n * - Label, helper text, and error message support\r\n * - Prefix/suffix elements\r\n * - Clear button functionality\r\n * \r\n * @example\r\n * ```tsx\r\n * // Inside a Form component - validation is automatically registered\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 *   <TextBox name=\"website\" label=\"Website\" url />\r\n *   <Button type=\"submit\">Submit</Button>\r\n * </Form>\r\n * ```\r\n */\r\nfunction TextBoxInner<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\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    className,\r\n    disabled,\r\n    prefix,\r\n    suffix,\r\n    allowClear,\r\n    onClear,\r\n    id: providedId,\r\n    control: externalControl,\r\n    // Validation props\r\n    required,\r\n    minLength,\r\n    maxLength,\r\n    minValue,\r\n    maxValue,\r\n    pattern,\r\n    email,\r\n    url,\r\n    validate,\r\n    ...props\r\n  }: TextBoxProps<TFieldValues, TName>,\r\n  ref: React.ForwardedRef<HTMLInputElement>\r\n) {\r\n  const generatedId = useId();\r\n  const inputId = providedId ?? generatedId;\r\n  \r\n  // Try to get form context\r\n  const formConfigContext = useContext(FormConfigContext);\r\n  const formConfig: FormConfig = formConfigContext ?? {};\r\n\r\n  // Get form context from react-hook-form\r\n  const rhfContext = useRHFFormContext<TFieldValues>();\r\n  const control = externalControl ?? rhfContext?.control;\r\n\r\n  // Destructure stable function references so the effect doesn't depend on the\r\n  // context object identity (which changes every render due to inline construction).\r\n  const registerFieldValidation = formConfigContext?.registerFieldValidation;\r\n  const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;\r\n\r\n  // Register validation rules with the form\r\n  useEffect(() => {\r\n    if (registerFieldValidation) {\r\n      const rules: FieldValidationRules = {};\r\n\r\n      if (required !== undefined) rules.required = required;\r\n      if (minLength !== undefined) rules.minLength = minLength;\r\n      if (maxLength !== undefined) rules.maxLength = maxLength;\r\n      if (minValue !== undefined) rules.min = minValue;\r\n      if (maxValue !== undefined) rules.max = maxValue;\r\n      if (pattern !== undefined) rules.pattern = pattern;\r\n      if (email !== undefined) rules.email = email;\r\n      if (url !== undefined) rules.url = url;\r\n      if (validate !== undefined) rules.validate = validate;\r\n\r\n      // Determine field type and auto-infer rules from input type\r\n      const inputType = props.type ?? \"text\";\r\n      let fieldType: \"string\" | \"number\" | \"date\" = \"string\";\r\n\r\n      if (inputType === \"number\") {\r\n        fieldType = \"number\";\r\n      } else if (inputType === \"date\") {\r\n        fieldType = \"date\";\r\n      } else if (inputType === \"email\" && rules.email === undefined) {\r\n        rules.email = true;\r\n      } else if (inputType === \"url\" && rules.url === undefined) {\r\n        rules.url = true;\r\n      } else if (inputType === \"tel\" && rules.pattern === undefined) {\r\n        rules.pattern = { value: /^\\+?[\\d\\s\\-().]{7,}$/, message: \"Invalid phone number\" };\r\n      }\r\n\r\n      registerFieldValidation({\r\n        name: name as string,\r\n        type: fieldType,\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    minLength,\r\n    maxLength,\r\n    minValue,\r\n    maxValue,\r\n    pattern,\r\n    email,\r\n    url,\r\n    validate,\r\n    props.type,\r\n  ]);\r\n\r\n  // Use controller for form integration\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  \r\n  // Merge sizes - prop takes precedence over form config\r\n  const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n  const effectiveDisabled = disabled ?? formConfig.disabled;\r\n  \r\n  // Determine variant based on error state\r\n  const effectiveVariant = hasError ? \"error\" : variant;\r\n\r\n  const handleClear = () => {\r\n    field.onChange(\"\");\r\n    onClear?.();\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      <div className=\"relative\">\r\n        {prefix && (\r\n          <div className=\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground\">\r\n            {prefix}\r\n          </div>\r\n        )}\r\n\r\n        <TextBoxPrimitive\r\n          {...props}\r\n          {...field}\r\n          ref={(node) => {\r\n            if (typeof ref === \"function\") {\r\n              ref(node);\r\n            } else if (ref) {\r\n              ref.current = node;\r\n            }\r\n            field.ref(node);\r\n          }}\r\n          id={inputId}\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            textBoxVariants({ size: effectiveSize, variant: effectiveVariant }),\r\n            prefix && \"pl-10\",\r\n            (suffix || allowClear) && \"pr-10\",\r\n            className\r\n          )}\r\n        />\r\n\r\n        {(suffix || (allowClear && field.value)) && (\r\n          <div className=\"absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1\">\r\n            {allowClear && field.value && (\r\n              <button\r\n                type=\"button\"\r\n                onClick={handleClear}\r\n                className=\"text-muted-foreground hover:text-foreground transition-colors\"\r\n                tabIndex={-1}\r\n                aria-label=\"Clear\"\r\n              >\r\n                <X className=\"h-4 w-4\" />\r\n              </button>\r\n            )}\r\n            {suffix && (\r\n              <span className=\"text-muted-foreground\">{suffix}</span>\r\n            )}\r\n          </div>\r\n        )}\r\n      </div>\r\n    </FieldLayout>\r\n  );\r\n}\r\n\r\n// Use forwardRef with generic support\r\nexport const TextBox = forwardRef(TextBoxInner) as <\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\r\n  props: TextBoxProps<TFieldValues, TName> & { ref?: React.ForwardedRef<HTMLInputElement> }\r\n) => React.ReactElement;\r\n\r\n(TextBox as React.FC).displayName = \"TextBox\";\r\n"],"mappings":"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"}
+{"version":3,"file":"TextBox.js","names":[],"sources":["../../../src/components/Form/TextBox.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { forwardRef, useId, useContext, useEffect } from \"react\";\r\nimport type { InputHTMLAttributes, ReactNode } from \"react\";\r\nimport { useController, useFormContext as useRHFFormContext, type FieldValues, type FieldPath, type Control } from \"react-hook-form\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { FormConfigContext, type FormConfig, type FieldValidationRules } from \"../Form/context\";\r\nimport { FieldLayout } from \"./FieldLayout\";\r\nimport { TextBoxPrimitive } from \"../../primitives/textbox\";\r\nimport { X } from \"lucide-react\";\r\n\r\nconst textBoxVariants = cva(\r\n  \"\",\r\n  {\r\n    variants: {\r\n      size: {\r\n        sm: \"h-8 text-xs px-2\",\r\n        md: \"h-10 text-sm px-3\",\r\n        lg: \"h-12 text-base px-4\",\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\n\r\n/**\r\n * Validation rule with optional custom message\r\n */\r\ntype ValidationRule<T> = T | { value: T; message: string };\r\n\r\nexport interface TextBoxProps<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"name\" | \"prefix\" | \"pattern\" | \"required\" | \"minLength\" | \"maxLength\">,\r\n    VariantProps<typeof textBoxVariants> {\r\n  /** Field name - required for form integration */\r\n  name: TName;\r\n  /** Label text for the input */\r\n  label?: string;\r\n  /** Helper text displayed below the input */\r\n  helperText?: string;\r\n  /** Whether to show the error message */\r\n  showError?: boolean;\r\n  /** Custom error message (overrides form error) */\r\n  error?: string;\r\n  /** Whether the input should take full width */\r\n  fullWidth?: boolean;\r\n  /** Prefix element */\r\n  prefix?: ReactNode;\r\n  /** Suffix element */\r\n  suffix?: ReactNode;\r\n  /** Allow clear button */\r\n  allowClear?: boolean;\r\n  /** Callback when clear is clicked */\r\n  onClear?: () => void;\r\n  /** External control (for use outside Form) */\r\n  control?: Control<TFieldValues>;\r\n  \r\n  // Validation props\r\n  /** Field is required */\r\n  required?: boolean | string;\r\n  /** Minimum length for strings */\r\n  minLength?: ValidationRule<number>;\r\n  /** Maximum length for strings */\r\n  maxLength?: ValidationRule<number>;\r\n  /** Minimum value for numbers */\r\n  minValue?: ValidationRule<number>;\r\n  /** Maximum value for numbers */\r\n  maxValue?: ValidationRule<number>;\r\n  /** Regex pattern for validation */\r\n  pattern?: ValidationRule<RegExp>;\r\n  /** Email validation */\r\n  email?: boolean | string;\r\n  /** URL validation */\r\n  url?: boolean | string;\r\n  /** Custom validation function */\r\n  validate?: (value: unknown) => boolean | string | Promise<boolean | string>;\r\n}\r\n\r\n/**\r\n * TextBox component with form integration and automatic validation registration\r\n * \r\n * This is a wrapper around the shadcn/ui Input primitive that adds:\r\n * - Form integration with react-hook-form\r\n * - Automatic validation registration\r\n * - Label, helper text, and error message support\r\n * - Prefix/suffix elements\r\n * - Clear button functionality\r\n * \r\n * @example\r\n * ```tsx\r\n * // Inside a Form component - validation is automatically registered\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 *   <TextBox name=\"website\" label=\"Website\" url />\r\n *   <Button type=\"submit\">Submit</Button>\r\n * </Form>\r\n * ```\r\n */\r\nfunction TextBoxInner<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\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    className,\r\n    disabled,\r\n    prefix,\r\n    suffix,\r\n    allowClear,\r\n    onClear,\r\n    id: providedId,\r\n    control: externalControl,\r\n    // Validation props\r\n    required,\r\n    minLength,\r\n    maxLength,\r\n    minValue,\r\n    maxValue,\r\n    pattern,\r\n    email,\r\n    url,\r\n    validate,\r\n    ...props\r\n  }: TextBoxProps<TFieldValues, TName>,\r\n  ref: React.ForwardedRef<HTMLInputElement>\r\n) {\r\n  const generatedId = useId();\r\n  const inputId = providedId ?? generatedId;\r\n  \r\n  // Try to get form context\r\n  const formConfigContext = useContext(FormConfigContext);\r\n  const formConfig: FormConfig = formConfigContext ?? {};\r\n\r\n  // Get form context from react-hook-form\r\n  const rhfContext = useRHFFormContext<TFieldValues>();\r\n  const control = externalControl ?? rhfContext?.control;\r\n\r\n  // Destructure stable function references so the effect doesn't depend on the\r\n  // context object identity (which changes every render due to inline construction).\r\n  const registerFieldValidation = formConfigContext?.registerFieldValidation;\r\n  const unregisterFieldValidation = formConfigContext?.unregisterFieldValidation;\r\n\r\n  // Register validation rules with the form\r\n  useEffect(() => {\r\n    if (registerFieldValidation) {\r\n      const rules: FieldValidationRules = {};\r\n\r\n      if (required !== undefined) rules.required = required;\r\n      if (minLength !== undefined) rules.minLength = minLength;\r\n      if (maxLength !== undefined) rules.maxLength = maxLength;\r\n      if (minValue !== undefined) rules.min = minValue;\r\n      if (maxValue !== undefined) rules.max = maxValue;\r\n      if (pattern !== undefined) rules.pattern = pattern;\r\n      if (email !== undefined) rules.email = email;\r\n      if (url !== undefined) rules.url = url;\r\n      if (validate !== undefined) rules.validate = validate;\r\n\r\n      // Determine field type and auto-infer rules from input type\r\n      const inputType = props.type ?? \"text\";\r\n      let fieldType: \"string\" | \"number\" | \"date\" = \"string\";\r\n\r\n      if (inputType === \"number\") {\r\n        fieldType = \"number\";\r\n      } else if (inputType === \"date\") {\r\n        fieldType = \"date\";\r\n      } else if (inputType === \"email\" && rules.email === undefined) {\r\n        rules.email = true;\r\n      } else if (inputType === \"url\" && rules.url === undefined) {\r\n        rules.url = true;\r\n      } else if (inputType === \"tel\" && rules.pattern === undefined) {\r\n        rules.pattern = { value: /^\\+?[\\d\\s\\-().]{7,}$/, message: \"Invalid phone number\" };\r\n      }\r\n\r\n      registerFieldValidation({\r\n        name: name as string,\r\n        type: fieldType,\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    minLength,\r\n    maxLength,\r\n    minValue,\r\n    maxValue,\r\n    pattern,\r\n    email,\r\n    url,\r\n    validate,\r\n    props.type,\r\n  ]);\r\n\r\n  // Use controller for form integration\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  \r\n  // Merge sizes - prop takes precedence over form config\r\n  const effectiveSize = size ?? formConfig.size ?? \"md\";\r\n  const effectiveDisabled = disabled ?? formConfig.disabled;\r\n  \r\n  // Determine variant based on error state\r\n  const effectiveVariant = hasError ? \"error\" : variant;\r\n\r\n  const handleClear = () => {\r\n    field.onChange(\"\");\r\n    onClear?.();\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      <div className=\"relative\">\r\n        {prefix && (\r\n          <div className=\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground\">\r\n            {prefix}\r\n          </div>\r\n        )}\r\n\r\n        <TextBoxPrimitive\r\n          {...props}\r\n          {...field}\r\n          ref={(node) => {\r\n            if (typeof ref === \"function\") {\r\n              ref(node);\r\n            } else if (ref) {\r\n              ref.current = node;\r\n            }\r\n            field.ref(node);\r\n          }}\r\n          id={inputId}\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            textBoxVariants({ size: effectiveSize, variant: effectiveVariant }),\r\n            prefix && \"pl-10\",\r\n            (suffix || allowClear) && \"pr-10\",\r\n            className\r\n          )}\r\n        />\r\n\r\n        {(suffix || (allowClear && field.value)) && (\r\n          <div className=\"absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1\">\r\n            {allowClear && field.value && (\r\n              <button\r\n                type=\"button\"\r\n                onClick={handleClear}\r\n                className=\"text-muted-foreground hover:text-foreground transition-colors\"\r\n                tabIndex={-1}\r\n                aria-label=\"Clear\"\r\n              >\r\n                <X className=\"h-4 w-4\" />\r\n              </button>\r\n            )}\r\n            {suffix && (\r\n              <span className=\"text-muted-foreground\">{suffix}</span>\r\n            )}\r\n          </div>\r\n        )}\r\n      </div>\r\n    </FieldLayout>\r\n  );\r\n}\r\n\r\n// Use forwardRef with generic support\r\nexport const TextBox = forwardRef(TextBoxInner) as <\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>(\r\n  props: TextBoxProps<TFieldValues, TName> & { ref?: React.ForwardedRef<HTMLInputElement> }\r\n) => React.ReactElement;\r\n\r\n(TextBox as React.FC).displayName = \"TextBox\";\r\n"],"mappings":";;;;;;;;;;;;AAYA,IAAM,kBAAkB,IACtB,IACA;CACE,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,CACF;;;;;;;;;;;;;;;;;;;;;;AA6EA,SAAS,aAIP,EACE,MACA,OACA,YACA,YAAY,MACZ,OAAO,aACP,MACA,SACA,YAAY,MACZ,WACA,UACA,QACA,QACA,YACA,SACA,IAAI,YACJ,SAAS,iBAET,UACA,WACA,WACA,UACA,UACA,SACA,OACA,KACA,UACA,GAAG,SAEL,KACA;CACA,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,cAAc;CAG9B,MAAM,oBAAoB,WAAW,iBAAiB;CACtD,MAAM,aAAyB,qBAAqB,CAAC;CAGrD,MAAM,aAAa,eAAgC;CACnD,MAAM,UAAU,mBAAmB,YAAY;CAI/C,MAAM,0BAA0B,mBAAmB;CACnD,MAAM,4BAA4B,mBAAmB;CAGrD,gBAAgB;EACd,IAAI,yBAAyB;GAC3B,MAAM,QAA8B,CAAC;GAErC,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAC7C,IAAI,cAAc,KAAA,GAAW,MAAM,YAAY;GAC/C,IAAI,cAAc,KAAA,GAAW,MAAM,YAAY;GAC/C,IAAI,aAAa,KAAA,GAAW,MAAM,MAAM;GACxC,IAAI,aAAa,KAAA,GAAW,MAAM,MAAM;GACxC,IAAI,YAAY,KAAA,GAAW,MAAM,UAAU;GAC3C,IAAI,UAAU,KAAA,GAAW,MAAM,QAAQ;GACvC,IAAI,QAAQ,KAAA,GAAW,MAAM,MAAM;GACnC,IAAI,aAAa,KAAA,GAAW,MAAM,WAAW;GAG7C,MAAM,YAAY,MAAM,QAAQ;GAChC,IAAI,YAA0C;GAE9C,IAAI,cAAc,UAChB,YAAY;QACP,IAAI,cAAc,QACvB,YAAY;QACP,IAAI,cAAc,WAAW,MAAM,UAAU,KAAA,GAClD,MAAM,QAAQ;QACT,IAAI,cAAc,SAAS,MAAM,QAAQ,KAAA,GAC9C,MAAM,MAAM;QACP,IAAI,cAAc,SAAS,MAAM,YAAY,KAAA,GAClD,MAAM,UAAU;IAAE,OAAO;IAAwB,SAAS;GAAuB;GAGnF,wBAAwB;IAChB;IACN,MAAM;IACN;GACF,CAAC;GAED,aAAa;IACX,4BAA4B,IAAc;GAC5C;EACF;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAM;CACR,CAAC;CAGD,MAAM,EAAE,OAAO,eAAe,cAAmC;EAC/D;EACA;CACF,CAAC;CAED,MAAM,aAAa,WAAW,OAAO;CACrC,MAAM,eAAe,eAAe;CACpC,MAAM,WAAW,CAAC,CAAC;CAGnB,MAAM,gBAAgB,QAAQ,WAAW,QAAQ;CACjD,MAAM,oBAAoB,YAAY,WAAW;CAGjD,MAAM,mBAAmB,WAAW,UAAU;CAE9C,MAAM,oBAAoB;EACxB,MAAM,SAAS,EAAE;EACjB,UAAU;CACZ;CAEA,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;IACG,UACC,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA;IACE,CAAA;IAGP,oBAAC,kBAAD;KACE,GAAI;KACJ,GAAI;KACJ,MAAM,SAAS;MACb,IAAI,OAAO,QAAQ,YACjB,IAAI,IAAI;WACH,IAAI,KACT,IAAI,UAAU;MAEhB,MAAM,IAAI,IAAI;KAChB;KACA,IAAI;KACJ,UAAU;KACV,gBAAc;KACd,oBACE,WACI,GAAG,QAAQ,UACX,aACE,GAAG,QAAQ,WACX,KAAA;KAER,WAAW,GACT,gBAAgB;MAAE,MAAM;MAAe,SAAS;KAAiB,CAAC,GAClE,UAAU,UACT,UAAU,eAAe,SAC1B,SACF;IACD,CAAA;KAEC,UAAW,cAAc,MAAM,UAC/B,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACG,cAAc,MAAM,SACnB,oBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;MACV,UAAU;MACV,cAAW;MAEX,UAAA,oBAAC,GAAD,EAAG,WAAU,UAAW,CAAA;KAClB,CAAA,GAET,UACC,oBAAC,QAAD;MAAM,WAAU;MAAyB,UAAA;KAAa,CAAA,CAErD;;GAEJ;;CACM,CAAA;AAEjB;AAGA,IAAa,UAAU,WAAW,YAAY;AAO9C,QAAsB,cAAc"}