@px-ui/forms 18.0.0 → 18.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -315,7 +315,7 @@ function CurrencySelectField({ currencies, value, onValueChange, placeholder = "
|
|
|
315
315
|
disabled,
|
|
316
316
|
invalid,
|
|
317
317
|
isLoading,
|
|
318
|
-
isItemEqualToValue: (item, val) => item.id === val.id,
|
|
318
|
+
isItemEqualToValue: (item, val) => item.id ? item.id === val.id : item.abbr ? item.abbr === val.abbr : item.value === val.value,
|
|
319
319
|
itemToStringLabel: (item) => `${item.abbr} - ${item.name}`,
|
|
320
320
|
inputRef,
|
|
321
321
|
readOnly,
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["CURRENCY_FLAG_CODE: Record<string, string>","React","FileUploadField","fieldVariants: FieldVariantsType","Label","LabelPrimitive","Separator","SeperatorPrimitive","Field.Label","Field.Description","control","Field.Error","Field.Root","FormInput: FormControlFunc","FormTextarea: FormControlFunc","FormCheckbox: FormControlFunc"],"sources":["../src/components/select-field.tsx","../src/constants/currency-flag-code.ts","../src/components/currency-select-field.tsx","../src/components/file-upload-field.tsx","../src/components/field.tsx","../src/components/form.tsx","../src/components/phone-input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Select } from \"@px-ui/core\";\n\ntype AllRootProps<\n TItem = any,\n TMultiple extends boolean | undefined = false,\n> = React.ComponentProps<typeof Select.Root<TItem, TMultiple>>;\n\ntype RootProps<TItem = any> = Pick<\n AllRootProps<TItem, false>,\n | \"value\"\n | \"onValueChange\"\n | \"disabled\"\n | \"invalid\"\n | \"isItemEqualToValue\"\n | \"inputRef\"\n | \"readOnly\"\n | \"name\"\n>;\n\ninterface SelectFieldProps<TItem = any> extends RootProps<TItem> {\n /**\n * Array of items to display in the select dropdown\n */\n items: ReadonlyArray<TItem>;\n /**\n * Function to render the label in the trigger for the selected item\n * If not provided and item has a 'label' property, it will be used automatically\n */\n renderLabel?: (item: TItem) => React.ReactNode;\n\n /**\n * Function to render each option in the dropdown\n * If not provided and item has a 'label' property, it will be used automatically\n */\n renderOption?: (item: TItem) => React.ReactNode;\n\n /**\n * Placeholder text when no value is selected\n */\n placeholder?: string;\n\n size?: React.ComponentProps<typeof Select.Trigger>[\"size\"];\n\n widthVariant?: React.ComponentProps<typeof Select.Trigger>[\"widthVariant\"];\n\n /**\n * Width variant for the dropdown content\n */\n contentWidthVariant?: React.ComponentProps<\n typeof Select.Content\n >[\"widthVariant\"];\n\n triggerClassName?: string;\n\n /**\n * Additional props for Select.Content\n */\n contentProps?: Omit<\n React.ComponentProps<typeof Select.Content>,\n \"children\" | \"widthVariant\"\n >;\n}\n\n/**\n * A simplified Select component for common use cases.\n * For advanced customization, use the composable Select.* components from @px-ui/core.\n *\n * @example\n * ```tsx\n * const items = [\n * { id: 1, label: 'Option 1' },\n * { id: 2, label: 'Option 2' },\n * ];\n *\n * <SelectField\n * items={items}\n * value={selected}\n * onValueChange={setSelected}\n * renderLabel={(item) => item.label}\n * renderOption={(item) => item.label}\n * />\n * ```\n */\nexport function SelectField<TItem = any>(props: SelectFieldProps<TItem>) {\n const {\n items,\n value,\n onValueChange,\n renderLabel,\n renderOption,\n placeholder,\n disabled,\n invalid,\n name,\n isItemEqualToValue,\n size,\n widthVariant,\n contentWidthVariant,\n contentProps,\n triggerClassName,\n inputRef,\n readOnly,\n } = props;\n\n // Helper to get the key for an item\n const getItemKey = (item: TItem, index: number): string => {\n if (item && typeof item === \"object\") {\n if (\"value\" in item) {\n const val = (item as any).value;\n return typeof val === \"string\" || typeof val === \"number\"\n ? String(val)\n : index.toString();\n }\n if (\"id\" in item) {\n const id = (item as any).id;\n return typeof id === \"string\" || typeof id === \"number\"\n ? String(id)\n : index.toString();\n }\n }\n return index.toString();\n };\n\n // Helper to render item content\n const renderItemContent = (item: TItem): React.ReactNode => {\n if (renderOption) {\n return renderOption(item);\n }\n // Auto-detect label property\n if (item && typeof item === \"object\" && \"label\" in item) {\n return (item as any).label;\n }\n // Fallback to string representation\n return String(item);\n };\n\n // Helper to render selected value label\n const renderValueLabel = (item: TItem): React.ReactNode => {\n if (renderLabel) {\n return renderLabel(item);\n }\n // Use same logic as renderOption\n return renderItemContent(item);\n };\n\n return (\n <Select.Root<TItem, false>\n value={value}\n onValueChange={onValueChange}\n disabled={disabled}\n invalid={invalid}\n name={name}\n isItemEqualToValue={isItemEqualToValue}\n inputRef={inputRef}\n readOnly={readOnly}\n >\n <Select.Trigger\n size={size}\n widthVariant={widthVariant}\n className={triggerClassName}\n >\n <Select.Value placeholder={placeholder}>\n {(selectedValue: any) => {\n if (selectedValue == null) {\n return placeholder || null;\n }\n return renderValueLabel(selectedValue as TItem);\n }}\n </Select.Value>\n </Select.Trigger>\n\n <Select.Content widthVariant={contentWidthVariant} {...contentProps}>\n <Select.List>\n {(items as any[])?.map((item, index) => {\n const key = getItemKey(item, index);\n return (\n <Select.Item key={key} value={item}>\n {renderItemContent(item)}\n </Select.Item>\n );\n })}\n </Select.List>\n </Select.Content>\n </Select.Root>\n );\n}\n","/**\n * Mapping of currency abbreviations to country codes for flag display.\n * Used internally by CurrencySelectField to display country flags.\n */\nexport const CURRENCY_FLAG_CODE: Record<string, string> = {\n USD: \"US\",\n CAD: \"CA\",\n EUR: \"EU\",\n GBP: \"GB\",\n INR: \"IN\",\n AFN: \"AF\",\n ALL: \"AL\",\n ANG: \"MY\",\n ARS: \"AR\",\n AUD: \"AU\",\n AZN: \"AZ\",\n BBD: \"BB\",\n BGN: \"BG\",\n BMD: \"BM\",\n BOB: \"BO\",\n BRL: \"BR\",\n BSD: \"BS\",\n BWP: \"BW\",\n BYN: \"BY\",\n CHF: \"CH\",\n CLP: \"CL\",\n COP: \"CO\",\n CRC: \"CR\",\n CUP: \"CU\",\n CZK: \"CZ\",\n DKK: \"DK\",\n DOP: \"DO\",\n EGP: \"EG\",\n FJD: \"FJ\",\n GGP: \"GG\",\n GHS: \"US\",\n GIP: \"GI\",\n GTQ: \"GT\",\n GYD: \"GY\",\n HKD: \"HK\",\n HNL: \"HN\",\n HRK: \"HR\",\n HUF: \"HU\",\n ILS: \"IL\",\n IMP: \"IM\",\n IRR: \"IR\",\n ISK: \"IS\",\n JEP: \"JE\",\n JMD: \"JM\",\n JPY: \"JP\",\n KHR: \"KM\",\n KPW: \"KP\",\n KRW: \"KR\",\n KYD: \"KY\",\n LAK: \"LA\",\n LBP: \"LB\",\n LKR: \"LK\",\n LRD: \"LR\",\n MKD: \"MK\",\n MNT: \"MN\",\n MXN: \"MX\",\n MYR: \"MY\",\n MZN: \"MZ\",\n NGN: \"NG\",\n NIO: \"NI\",\n NOK: \"NO\",\n NPR: \"NP\",\n NZD: \"NZ\",\n PAB: \"PA\",\n PEN: \"PE\",\n PHP: \"PH\",\n PKR: \"PK\",\n PLN: \"PL\",\n PYG: \"PY\",\n QAR: \"QA\",\n RON: \"RO\",\n RSD: \"RS\",\n RUB: \"RU\",\n SAR: \"SA\",\n SBD: \"SB\",\n SCR: \"SC\",\n SEK: \"SE\",\n SGD: \"SG\",\n SHP: \"SH\",\n SOS: \"SO\",\n SRD: \"SR\",\n SVC: \"SV\",\n THB: \"TH\",\n TRY: \"TR\",\n TVD: \"TV\",\n TWD: \"TW\",\n UAH: \"UA\",\n UYU: \"UY\",\n UZS: \"UZ\",\n VEF: \"VE\",\n VND: \"VN\",\n XCD: \"EC\",\n YEN: \"YE\",\n YER: \"YE\",\n ZAR: \"ZA\",\n ZWD: \"ZW\",\n AED: \"AE\",\n AMD: \"AD\",\n BDT: \"BD\",\n BTN: \"BT\",\n AOA: \"AO\",\n AWG: \"AW\",\n BAM: \"BA\",\n BHD: \"BH\",\n BIF: \"BI\",\n BND: \"BN\",\n BZD: \"BZ\",\n CNY: \"CN\",\n CVE: \"CV\",\n DJF: \"DJ\",\n DZD: \"DZ\",\n ETB: \"ET\",\n FKP: \"FK\",\n GEL: \"GE\",\n GMD: \"GM\",\n GNF: \"GN\",\n HTG: \"HT\",\n IDR: \"ID\",\n IQD: \"IQ\",\n JOD: \"JO\",\n KES: \"KE\",\n KGS: \"KG\",\n KMF: \"KM\",\n KWD: \"KW\",\n MWK: \"MW\",\n ZMW: \"ZM\",\n LSL: \"LS\",\n LYD: \"LY\",\n MAD: \"MA\",\n MDL: \"MD\",\n MGA: \"MG\",\n MMK: \"MM\",\n KZT: \"KZ\",\n MOP: \"MO\",\n MRU: \"MR\",\n MUR: \"MU\",\n MVR: \"MV\",\n NAD: \"NA\",\n OMR: \"OM\",\n PGK: \"PG\",\n RWF: \"RW\",\n SDG: \"SD\",\n SLL: \"SL\",\n STD: \"ST\",\n SYP: \"SY\",\n SZL: \"SZ\",\n TJS: \"TJ\",\n TMT: \"TM\",\n TND: \"TN\",\n TOP: \"TO\",\n TTD: \"TT\",\n TZS: \"TZ\",\n UGX: \"UG\",\n VES: \"VE\",\n VUV: \"VU\",\n WST: \"WS\",\n XAF: \"CF\",\n XOF: \"NG\",\n XPF: \"CF\",\n};\n\n","import * as React from \"react\";\nimport { Combobox, cn, InputGroup } from \"@px-ui/core\";\nimport ReactCountryFlag from \"react-country-flag\";\nimport { CURRENCY_FLAG_CODE } from \"../constants/currency-flag-code\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/**\n * Currency type representing a currency option\n */\nexport interface Currency {\n /** Unique identifier for the currency */\n id: string;\n /** Full currency name (e.g., \"United States dollar\") */\n name: string;\n /** Currency abbreviation (e.g., \"USD\", \"EUR\") */\n abbr: string;\n /** Currency value/code used for form submission */\n value: string;\n}\n\ntype AllRootProps = React.ComponentProps<typeof Combobox.Root<Currency, false>>;\n\ntype RootProps = Pick<\n AllRootProps,\n | \"value\"\n | \"onValueChange\"\n | \"disabled\"\n | \"invalid\"\n | \"inputRef\"\n | \"readOnly\"\n | \"name\"\n>;\n\nexport interface CurrencySelectFieldProps extends RootProps {\n /**\n * Array of currency options to display\n */\n currencies: ReadonlyArray<Currency>;\n\n /**\n * Placeholder text when no currency is selected\n * @default \"Select currency\"\n */\n placeholder?: string;\n\n /**\n * Size variant for the trigger\n */\n size?: React.ComponentProps<typeof InputGroup.Root>[\"size\"];\n\n /**\n * Width variant for trigger\n */\n widthVariant?: React.ComponentProps<typeof InputGroup.Root>[\"widthVariant\"];\n\n /**\n * Width variant for the dropdown content\n */\n contentWidthVariant?: React.ComponentProps<\n typeof Combobox.Content\n >[\"widthVariant\"];\n\n /**\n * Additional className for the trigger\n */\n triggerClassName?: string;\n\n /**\n * Whether the select is loading\n */\n isLoading?: boolean;\n\n /**\n * Additional props for Combobox.Content\n */\n contentProps?: Omit<\n React.ComponentProps<typeof Combobox.Content>,\n \"children\" | \"widthVariant\" | \"empty\"\n >;\n}\n\n// ============================================================================\n// Sub-components\n// ============================================================================\n\ninterface CurrencyFlagProps {\n countryCode: string | null | undefined;\n className?: string;\n}\n\nfunction CurrencyFlag({ countryCode, className }: CurrencyFlagProps) {\n if (!countryCode) {\n return <span className={cn(\"inline-block w-4\", className)} />;\n }\n\n return (\n <div\n className={cn(\"relative -top-px flex shrink-0 items-center\", className)}\n >\n <ReactCountryFlag\n countryCode={countryCode}\n svg\n style={{\n width: \"14px\",\n height: \"14px\",\n }}\n aria-label={`Flag of ${countryCode}`}\n />\n </div>\n );\n}\n\ninterface CurrencyOptionContentProps {\n currency: Currency;\n}\n\nfunction CurrencyOptionContent({ currency }: CurrencyOptionContentProps) {\n const countryCode = CURRENCY_FLAG_CODE[currency.abbr];\n\n return (\n <div className=\"flex items-center gap-2.5\">\n <CurrencyFlag countryCode={countryCode} />\n <span>\n <span className=\"text-ppx-foreground font-medium\">{currency.abbr}</span>\n <span className=\"text-ppx-muted-foreground\"> - {currency.name}</span>\n </span>\n </div>\n );\n}\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\n/**\n * A currency select component with search functionality and flag display.\n * Country flags are automatically displayed based on the currency abbreviation\n * using the built-in CURRENCY_FLAG_CODE mapping.\n *\n * @example\n * ```tsx\n * const currencies = [\n * { id: \"1\", abbr: \"USD\", name: \"United States dollar\", value: \"USD\" },\n * { id: \"2\", abbr: \"EUR\", name: \"Euro\", value: \"EUR\" },\n * { id: \"3\", abbr: \"GBP\", name: \"British Pound\", value: \"GBP\" },\n * ];\n *\n * <CurrencySelectField\n * currencies={currencies}\n * value={selectedCurrency}\n * onValueChange={setSelectedCurrency}\n * placeholder=\"Select currency\"\n * />\n * ```\n */\nexport function CurrencySelectField({\n currencies,\n value,\n onValueChange,\n placeholder = \"Select currency\",\n disabled,\n invalid,\n name,\n size,\n widthVariant,\n contentWidthVariant = \"trigger\",\n triggerClassName,\n isLoading,\n contentProps,\n inputRef,\n readOnly,\n}: CurrencySelectFieldProps) {\n return (\n <Combobox.Root<Currency, false>\n items={currencies as Currency[]}\n value={value}\n onValueChange={onValueChange}\n disabled={disabled}\n invalid={invalid}\n isLoading={isLoading}\n isItemEqualToValue={(item, val) => item.id === val.id}\n itemToStringLabel={(item) => `${item.abbr} - ${item.name}`}\n inputRef={inputRef}\n readOnly={readOnly}\n name={name}\n >\n <Combobox.SearchableTrigger\n className={triggerClassName}\n widthVariant={widthVariant}\n size={size}\n placeholder={placeholder}\n addons={\n value ? (\n <InputGroup.Addon align=\"inline-start\">\n <CurrencyFlag\n countryCode={CURRENCY_FLAG_CODE[value.abbr]}\n className=\"w-fit\"\n />\n </InputGroup.Addon>\n ) : undefined\n }\n />\n\n <Combobox.Content\n widthVariant={contentWidthVariant}\n empty=\"No currencies found\"\n {...contentProps}\n >\n <Combobox.List>\n {(currency: Currency) => (\n <Combobox.Item key={currency.id} value={currency}>\n <CurrencyOptionContent currency={currency} />\n </Combobox.Item>\n )}\n </Combobox.List>\n </Combobox.Content>\n </Combobox.Root>\n );\n}\n","import * as React from \"react\";\nimport {\n FileUpload,\n useFileUpload,\n type UseFileUploadOptions,\n type FileUploadItem,\n type DropzoneRenderProps,\n type DropzoneState,\n type FileMetadata,\n} from \"@px-ui/core\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface FileUploadFieldRef {\n /** Reset the file upload state, optionally with new initial files */\n reset: (newFiles?: FileMetadata[]) => void;\n /** Clear all files */\n clearFiles: () => void;\n /** Get current files */\n getFiles: () => FileUploadItem[];\n}\n\nexport interface FileUploadFieldProps\n extends Omit<UseFileUploadOptions, \"initialFiles\"> {\n /** Size of the dropzone (ignored when using render prop) */\n size?: \"sm\" | \"default\" | \"lg\";\n /** Text displayed in the dropzone (ignored when using render prop) */\n dropzoneText?: string;\n /** Text for the browse/upload button (ignored when using render prop) */\n buttonText?: string;\n /** Show file list below the dropzone */\n showFileList?: boolean;\n /** Initial files (already uploaded) */\n initialFiles?: Array<{\n id: string;\n name: string;\n size: number;\n type: string;\n url: string;\n }>;\n /** Whether the upload is disabled */\n disabled?: boolean;\n /** Custom className */\n className?: string;\n /**\n * Render prop for complete dropzone customization.\n * Receives props to spread and state for conditional styling.\n */\n render?: (\n props: DropzoneRenderProps,\n state: DropzoneState,\n ) => React.ReactElement;\n /** Render prop for custom file item rendering */\n renderFileItem?: (\n file: FileUploadItem,\n actions: { remove: () => void; retry: () => void },\n ) => React.ReactNode;\n /** Click handler for file list items (for preview, etc.) */\n onItemClick?: (file: FileUploadItem) => void;\n /** Error handler */\n onError?: (error: { type: string; message: string; files?: File[] }) => void;\n}\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\nexport const FileUploadField = React.forwardRef<\n FileUploadFieldRef,\n FileUploadFieldProps\n>(function FileUploadField(\n {\n size = \"default\",\n dropzoneText = \"Paste Or Drag & Drop Files Here\",\n buttonText = \"Browse for files\",\n showFileList = true,\n initialFiles = [],\n disabled = false,\n className,\n render,\n renderFileItem,\n onItemClick,\n onError,\n // Hook options\n maxFiles,\n maxSize,\n accept,\n multiple = false,\n onFilesChange,\n onFileAdd,\n onFileRemove,\n upload: uploadConfig,\n },\n ref,\n) {\n const uploadHook = useFileUpload({\n maxFiles,\n maxSize,\n accept,\n multiple,\n initialFiles: initialFiles.map((f) => ({\n ...f,\n id: f.id,\n name: f.name,\n size: f.size,\n type: f.type,\n url: f.url,\n })),\n onFilesChange,\n onFileAdd,\n onFileRemove,\n upload: uploadConfig,\n });\n\n const { files, errors, retryUpload, removeFile, reset, clearFiles } =\n uploadHook;\n\n // Expose reset method via ref\n React.useImperativeHandle(\n ref,\n () => ({\n reset: (newFiles?: FileMetadata[]) => reset(newFiles),\n clearFiles: () => clearFiles(),\n getFiles: () => files,\n }),\n [reset, clearFiles, files],\n );\n\n // Handle errors\n React.useEffect(() => {\n if (errors.length > 0 && onError) {\n onError({\n type: \"validation\",\n message: errors[0],\n });\n }\n }, [errors, onError]);\n\n // Render file item using ListItem or custom render prop\n const renderDefaultFileItem = (file: FileUploadItem) => {\n if (renderFileItem) {\n return renderFileItem(file, {\n remove: () => removeFile(file.id),\n retry: () => retryUpload(file.id),\n });\n }\n\n return (\n <FileUpload.ListItem\n key={file.id}\n file={file}\n onItemClick={onItemClick}\n />\n );\n };\n\n return (\n <FileUpload.Root\n key={uploadHook.instanceKey}\n upload={uploadHook}\n accept={accept}\n multiple={multiple}\n disabled={disabled}\n className={className}\n >\n <FileUpload.Dropzone\n size={size}\n dropzoneText={dropzoneText}\n browseText={buttonText}\n render={render}\n />\n\n {/* Errors */}\n {errors.length > 0 && (\n <div className=\"text-ppx-red-5 text-sm\">\n {errors.map((error, i) => (\n <p key={i}>{error}</p>\n ))}\n </div>\n )}\n\n {/* File List */}\n {showFileList && files.length > 0 && (\n <div>\n <div className=\"mb-2 flex items-center justify-between\">\n <span className=\"text-ppx-neutral-14 text-sm font-medium\">\n {multiple ? `Files (${files.length})` : \"Selected file\"}\n </span>\n {multiple && files.length > 1 && (\n <FileUpload.ClearAll\n size=\"sm\"\n className=\"text-ppx-red-5 hover:text-ppx-red-6\"\n >\n Remove all\n </FileUpload.ClearAll>\n )}\n </div>\n\n <FileUpload.List>{files.map(renderDefaultFileItem)}</FileUpload.List>\n </div>\n )}\n </FileUpload.Root>\n );\n});\n\nexport type {\n FileUploadItem,\n UploadConfig,\n UseFileUploadOptions as FileUploadWithUploaderOptions,\n DropzoneRenderProps,\n DropzoneState,\n FileMetadata,\n} from \"@px-ui/core\";\n","import { useMemo } from \"react\";\nimport {\n cn,\n cva,\n type VariantProps,\n Label as LabelPrimitive,\n Separator as SeperatorPrimitive,\n} from \"@px-ui/core\";\n\nexport function Set({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n return (\n <fieldset\n data-slot=\"field-set\"\n className={cn(\n \"flex flex-col gap-6\",\n \"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport function Legend({\n className,\n variant = \"legend\",\n ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n return (\n <legend\n data-slot=\"field-legend\"\n data-variant={variant}\n className={cn(\n \"mb-3 font-medium\",\n \"data-[variant=legend]:text-base\",\n \"data-[variant=label]:text-sm\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport function Group({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"field-group\"\n className={cn(\n \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4\",\n className,\n )}\n {...props}\n />\n );\n}\n\ntype FieldVariantsType = (\n props?:\n | {\n orientation?: \"vertical\" | \"horizontal\" | \"responsive\";\n }\n | undefined,\n) => string;\n\nconst fieldVariants: FieldVariantsType = cva(\n \"group/field flex w-full gap-2 data-[invalid=true]:text-ppx-red-5\",\n {\n variants: {\n orientation: {\n vertical: [\"flex-col [&>*]:w-full [&>.sr-only]:w-auto\"],\n horizontal: [\n \"flex-row items-center\",\n \"[&>[data-slot=field-label]]:flex-auto\",\n \"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n ],\n responsive: [\n \"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto\",\n \"@md/field-group:[&>[data-slot=field-label]]:flex-auto\",\n \"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n ],\n },\n },\n defaultVariants: {\n orientation: \"vertical\",\n },\n },\n) as FieldVariantsType;\n\nexport function Root({\n className,\n orientation = \"vertical\",\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n return (\n <div\n role=\"group\"\n data-slot=\"field\"\n data-orientation={orientation}\n className={cn(fieldVariants({ orientation }), className)}\n {...props}\n />\n );\n}\n\nexport function Content({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"field-content\"\n className={cn(\n \"group/field-content flex flex-1 flex-col gap-1.5 leading-snug\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport function Label({\n className,\n ...props\n}: React.ComponentProps<typeof LabelPrimitive>) {\n return (\n <LabelPrimitive\n data-slot=\"field-label\"\n className={cn(\n \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50\",\n \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport function Title({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"field-label\"\n className={cn(\n \"text-ppx-sm flex w-fit items-center gap-2 font-medium leading-snug group-data-[disabled=true]/field:opacity-50\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport function Description({\n className,\n ...props\n}: React.ComponentProps<\"p\">) {\n return (\n <p\n data-slot=\"field-description\"\n className={cn(\n \"text-ppx-sm text-ppx-muted-foreground font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance\",\n \"nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport function Separator({\n children,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & {\n children?: React.ReactNode;\n}) {\n return (\n <div\n data-slot=\"field-separator\"\n data-content={!!children}\n className={cn(\n \"text-ppx-sm relative -my-2 h-5 group-data-[variant=outline]/field-group:-mb-2\",\n className,\n )}\n {...props}\n >\n <SeperatorPrimitive\n orientation=\"horizontal\"\n className=\"absolute inset-0 top-1/2\"\n />\n {children && (\n <span\n className=\"bg-ppx-background text-ppx-muted-foreground relative mx-auto block w-fit px-2\"\n data-slot=\"field-separator-content\"\n >\n {children}\n </span>\n )}\n </div>\n );\n}\n\nexport function Error({\n className,\n children,\n errors,\n ...props\n}: React.ComponentProps<\"div\"> & {\n errors?: Array<{ message?: string } | undefined>;\n}) {\n const content = useMemo(() => {\n if (children) {\n return children;\n }\n\n if (!errors?.length) {\n return null;\n }\n\n const uniqueErrors = [\n ...new Map(errors.map((error) => [error?.message, error])).values(),\n ];\n\n if (uniqueErrors?.length == 1) {\n return uniqueErrors[0]?.message;\n }\n\n return (\n <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n {uniqueErrors.map(\n (error, index) =>\n error?.message && <li key={index}>{error.message}</li>,\n )}\n </ul>\n );\n }, [children, errors]);\n\n if (!content) {\n return null;\n }\n\n return (\n <div\n role=\"alert\"\n data-slot=\"field-error\"\n className={cn(\"text-ppx-sm text-ppx-red-5 font-normal\", className)}\n {...props}\n >\n {content}\n </div>\n );\n}\n","import {\n Controller,\n type ControllerProps,\n type FieldPath,\n type FieldValues,\n} from \"react-hook-form\";\nimport * as Field from \"./field\";\nimport { type ReactNode } from \"react\";\nimport { Textarea, Checkbox, Input } from \"@px-ui/core\";\n\ntype FormControlProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n TTransformedValues = TFieldValues,\n> = {\n name: TName;\n label: ReactNode;\n description?: ReactNode;\n control: ControllerProps<TFieldValues, TName, TTransformedValues>[\"control\"];\n required?: boolean;\n placeholder?: string;\n};\n\ntype FormBaseProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n TTransformedValues = TFieldValues,\n> = FormControlProps<TFieldValues, TName, TTransformedValues> & {\n horizontal?: boolean;\n controlFirst?: boolean;\n children: (\n field: Parameters<\n ControllerProps<TFieldValues, TName, TTransformedValues>[\"render\"]\n >[0][\"field\"] & {\n invalid?: boolean;\n id: string;\n },\n ) => ReactNode;\n};\n\ntype FormControlFunc<\n ExtraProps extends Record<string, unknown> = Record<never, never>,\n> = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n TTransformedValues = TFieldValues,\n>(\n props: FormControlProps<TFieldValues, TName, TTransformedValues> & ExtraProps,\n) => ReactNode;\n\nfunction FormBase<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n TTransformedValues = TFieldValues,\n>({\n children,\n control,\n label,\n name,\n required,\n description,\n controlFirst,\n horizontal,\n}: FormBaseProps<TFieldValues, TName, TTransformedValues>) {\n return (\n <Controller\n control={control}\n name={name}\n render={({ field, fieldState }) => {\n const labelElement = (\n <Field.Label\n className={required ? \"required\" : \"\"}\n htmlFor={field.name}\n >\n {label}\n </Field.Label>\n );\n\n const descriptionElement = description ? (\n <Field.Description>{description}</Field.Description>\n ) : null;\n\n const control = children({\n ...field,\n id: field.name,\n invalid: fieldState.invalid,\n });\n\n const errorElement = fieldState.invalid && (\n <Field.Error errors={[fieldState.error]} />\n );\n\n return (\n <Field.Root orientation={horizontal ? \"horizontal\" : undefined}>\n {controlFirst ? (\n <>\n {control}\n {labelElement}\n {descriptionElement}\n {errorElement}\n </>\n ) : (\n <>\n {labelElement}\n {control}\n {descriptionElement}\n {errorElement}\n </>\n )}\n </Field.Root>\n );\n }}\n />\n );\n}\n\nexport const FormInput: FormControlFunc = ({ placeholder, ...props }) => {\n return (\n <FormBase {...props}>\n {(field) => <Input {...field} placeholder={placeholder} />}\n </FormBase>\n );\n};\n\nexport const FormTextarea: FormControlFunc = ({ placeholder, ...props }) => {\n return (\n <FormBase {...props}>\n {(field) => <Textarea {...field} placeholder={placeholder} />}\n </FormBase>\n );\n};\n\nexport const FormCheckbox: FormControlFunc = (props) => {\n return (\n <FormBase {...props} horizontal controlFirst>\n {({ onChange, value, ...field }) => (\n <Checkbox {...field} checked={value} onCheckedChange={onChange} />\n )}\n </FormBase>\n );\n};\n\n// Note: FormRadioItem is not included in the abstractions because radio buttons\n// work as a group and require a different pattern. Use the verbose Controller\n// approach with RadioGroup for radio buttons. See the stories for examples.\n","import React, { useState } from \"react\";\nimport { cn } from \"@px-ui/core\";\nimport PhoneInputLib from \"react-phone-input-2\";\nimport \"react-phone-input-2/lib/style.css\";\nimport GoogleLibPhoneNumber from \"google-libphonenumber\";\n\nconst phoneUtil = GoogleLibPhoneNumber.PhoneNumberUtil.getInstance();\nconst PNF = GoogleLibPhoneNumber.PhoneNumberFormat;\n\ninterface PhoneInputProps {\n value: string;\n onChange: (value: string) => void;\n country?: string;\n error?: boolean;\n placeholder?: string;\n disabled?: boolean;\n className?: string;\n}\n\nexport const PhoneInput = ({\n value,\n onChange,\n country = \"us\",\n error,\n placeholder,\n disabled,\n className,\n}: PhoneInputProps) => {\n const [isValid, setIsValid] = useState(true);\n\n const handleChange = (inputValue: string, data: any) => {\n if (!inputValue) {\n setIsValid(true);\n onChange(\"\");\n return;\n }\n\n try {\n const phoneValue = inputValue.startsWith(\"+\")\n ? inputValue\n : \"+\" + inputValue;\n const parsedNumber = phoneUtil.parseAndKeepRawInput(\n phoneValue,\n data.countryCode,\n );\n const isNumberValid = phoneUtil.isValidNumberForRegion(\n parsedNumber,\n data.countryCode,\n );\n\n setIsValid(isNumberValid);\n\n if (isNumberValid) {\n const formatted = phoneUtil.format(parsedNumber, PNF.E164);\n onChange(formatted);\n } else {\n onChange(phoneValue);\n }\n } catch (e) {\n setIsValid(false);\n onChange(inputValue.startsWith(\"+\") ? inputValue : \"+\" + inputValue);\n }\n };\n\n return (\n <div className={cn(\"flex w-full flex-col gap-1\", className)}>\n <div\n className={`relative ${!isValid || error ? \"phone-input-error\" : \"\"}`}\n >\n <PhoneInputLib\n country={country}\n value={value}\n onChange={handleChange}\n disabled={disabled}\n placeholder={placeholder}\n inputClass={`!w-full !h-11 !text-base !rounded-lg !border ${\n !isValid || error\n ? \"!border-red-500 !bg-red-50\"\n : \"!border-gray-300 focus:!border-blue-500 focus:!ring-1 focus:!ring-blue-500\"\n }`}\n buttonClass={`!rounded-l-lg !border-y !border-l ${\n !isValid || error\n ? \"!border-red-500 !bg-red-50\"\n : \"!border-gray-300\"\n }`}\n containerClass=\"!w-full\"\n />\n </div>\n\n {(!isValid || error) && (\n <p className=\"mt-1 text-xs font-medium text-red-500\">\n Please enter a valid phone number for this region.\n </p>\n )}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoFA,SAAgB,YAAyB,OAAgC;CACvE,MAAM,EACJ,OACA,OACA,eACA,aACA,cACA,aACA,UACA,SACA,MACA,oBACA,MACA,cACA,qBACA,cACA,kBACA,UACA,aACE;CAGJ,MAAM,cAAc,MAAa,UAA0B;AACzD,MAAI,QAAQ,OAAO,SAAS,UAAU;AACpC,OAAI,WAAW,MAAM;IACnB,MAAM,MAAO,KAAa;AAC1B,WAAO,OAAO,QAAQ,YAAY,OAAO,QAAQ,WAC7C,OAAO,IAAI,GACX,MAAM,UAAU;;AAEtB,OAAI,QAAQ,MAAM;IAChB,MAAM,KAAM,KAAa;AACzB,WAAO,OAAO,OAAO,YAAY,OAAO,OAAO,WAC3C,OAAO,GAAG,GACV,MAAM,UAAU;;;AAGxB,SAAO,MAAM,UAAU;;CAIzB,MAAM,qBAAqB,SAAiC;AAC1D,MAAI,aACF,QAAO,aAAa,KAAK;AAG3B,MAAI,QAAQ,OAAO,SAAS,YAAY,WAAW,KACjD,QAAQ,KAAa;AAGvB,SAAO,OAAO,KAAK;;CAIrB,MAAM,oBAAoB,SAAiC;AACzD,MAAI,YACF,QAAO,YAAY,KAAK;AAG1B,SAAO,kBAAkB,KAAK;;AAGhC,QACE,qBAAC,OAAO;EACC;EACQ;EACL;EACD;EACH;EACc;EACV;EACA;aAEV,oBAAC,OAAO;GACA;GACQ;GACd,WAAW;aAEX,oBAAC,OAAO;IAAmB;eACvB,kBAAuB;AACvB,SAAI,iBAAiB,KACnB,QAAO,eAAe;AAExB,YAAO,iBAAiB,cAAuB;;KAEpC;IACA,EAEjB,oBAAC,OAAO;GAAQ,cAAc;GAAqB,GAAI;aACrD,oBAAC,OAAO,kBACJ,OAAiB,KAAK,MAAM,UAAU;IACtC,MAAM,MAAM,WAAW,MAAM,MAAM;AACnC,WACE,oBAAC,OAAO;KAAe,OAAO;eAC3B,kBAAkB,KAAK;OADR,IAEJ;KAEhB,GACU;IACC;GACL;;;;;;;;;ACpLlB,MAAaA,qBAA6C;CACxD,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,K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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["CURRENCY_FLAG_CODE: Record<string, string>","React","FileUploadField","fieldVariants: FieldVariantsType","Label","LabelPrimitive","Separator","SeperatorPrimitive","Field.Label","Field.Description","control","Field.Error","Field.Root","FormInput: FormControlFunc","FormTextarea: FormControlFunc","FormCheckbox: FormControlFunc"],"sources":["../src/components/select-field.tsx","../src/constants/currency-flag-code.ts","../src/components/currency-select-field.tsx","../src/components/file-upload-field.tsx","../src/components/field.tsx","../src/components/form.tsx","../src/components/phone-input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Select } from \"@px-ui/core\";\n\ntype AllRootProps<\n TItem = any,\n TMultiple extends boolean | undefined = false,\n> = React.ComponentProps<typeof Select.Root<TItem, TMultiple>>;\n\ntype RootProps<TItem = any> = Pick<\n AllRootProps<TItem, false>,\n | \"value\"\n | \"onValueChange\"\n | \"disabled\"\n | \"invalid\"\n | \"isItemEqualToValue\"\n | \"inputRef\"\n | \"readOnly\"\n | \"name\"\n>;\n\ninterface SelectFieldProps<TItem = any> extends RootProps<TItem> {\n /**\n * Array of items to display in the select dropdown\n */\n items: ReadonlyArray<TItem>;\n /**\n * Function to render the label in the trigger for the selected item\n * If not provided and item has a 'label' property, it will be used automatically\n */\n renderLabel?: (item: TItem) => React.ReactNode;\n\n /**\n * Function to render each option in the dropdown\n * If not provided and item has a 'label' property, it will be used automatically\n */\n renderOption?: (item: TItem) => React.ReactNode;\n\n /**\n * Placeholder text when no value is selected\n */\n placeholder?: string;\n\n size?: React.ComponentProps<typeof Select.Trigger>[\"size\"];\n\n widthVariant?: React.ComponentProps<typeof Select.Trigger>[\"widthVariant\"];\n\n /**\n * Width variant for the dropdown content\n */\n contentWidthVariant?: React.ComponentProps<\n typeof Select.Content\n >[\"widthVariant\"];\n\n triggerClassName?: string;\n\n /**\n * Additional props for Select.Content\n */\n contentProps?: Omit<\n React.ComponentProps<typeof Select.Content>,\n \"children\" | \"widthVariant\"\n >;\n}\n\n/**\n * A simplified Select component for common use cases.\n * For advanced customization, use the composable Select.* components from @px-ui/core.\n *\n * @example\n * ```tsx\n * const items = [\n * { id: 1, label: 'Option 1' },\n * { id: 2, label: 'Option 2' },\n * ];\n *\n * <SelectField\n * items={items}\n * value={selected}\n * onValueChange={setSelected}\n * renderLabel={(item) => item.label}\n * renderOption={(item) => item.label}\n * />\n * ```\n */\nexport function SelectField<TItem = any>(props: SelectFieldProps<TItem>) {\n const {\n items,\n value,\n onValueChange,\n renderLabel,\n renderOption,\n placeholder,\n disabled,\n invalid,\n name,\n isItemEqualToValue,\n size,\n widthVariant,\n contentWidthVariant,\n contentProps,\n triggerClassName,\n inputRef,\n readOnly,\n } = props;\n\n // Helper to get the key for an item\n const getItemKey = (item: TItem, index: number): string => {\n if (item && typeof item === \"object\") {\n if (\"value\" in item) {\n const val = (item as any).value;\n return typeof val === \"string\" || typeof val === \"number\"\n ? String(val)\n : index.toString();\n }\n if (\"id\" in item) {\n const id = (item as any).id;\n return typeof id === \"string\" || typeof id === \"number\"\n ? String(id)\n : index.toString();\n }\n }\n return index.toString();\n };\n\n // Helper to render item content\n const renderItemContent = (item: TItem): React.ReactNode => {\n if (renderOption) {\n return renderOption(item);\n }\n // Auto-detect label property\n if (item && typeof item === \"object\" && \"label\" in item) {\n return (item as any).label;\n }\n // Fallback to string representation\n return String(item);\n };\n\n // Helper to render selected value label\n const renderValueLabel = (item: TItem): React.ReactNode => {\n if (renderLabel) {\n return renderLabel(item);\n }\n // Use same logic as renderOption\n return renderItemContent(item);\n };\n\n return (\n <Select.Root<TItem, false>\n value={value}\n onValueChange={onValueChange}\n disabled={disabled}\n invalid={invalid}\n name={name}\n isItemEqualToValue={isItemEqualToValue}\n inputRef={inputRef}\n readOnly={readOnly}\n >\n <Select.Trigger\n size={size}\n widthVariant={widthVariant}\n className={triggerClassName}\n >\n <Select.Value placeholder={placeholder}>\n {(selectedValue: any) => {\n if (selectedValue == null) {\n return placeholder || null;\n }\n return renderValueLabel(selectedValue as TItem);\n }}\n </Select.Value>\n </Select.Trigger>\n\n <Select.Content widthVariant={contentWidthVariant} {...contentProps}>\n <Select.List>\n {(items as any[])?.map((item, index) => {\n const key = getItemKey(item, index);\n return (\n <Select.Item key={key} value={item}>\n {renderItemContent(item)}\n </Select.Item>\n );\n })}\n </Select.List>\n </Select.Content>\n </Select.Root>\n );\n}\n","/**\n * Mapping of currency abbreviations to country codes for flag display.\n * Used internally by CurrencySelectField to display country flags.\n */\nexport const CURRENCY_FLAG_CODE: Record<string, string> = {\n USD: \"US\",\n CAD: \"CA\",\n EUR: \"EU\",\n GBP: \"GB\",\n INR: \"IN\",\n AFN: \"AF\",\n ALL: \"AL\",\n ANG: \"MY\",\n ARS: \"AR\",\n AUD: \"AU\",\n AZN: \"AZ\",\n BBD: \"BB\",\n BGN: \"BG\",\n BMD: \"BM\",\n BOB: \"BO\",\n BRL: \"BR\",\n BSD: \"BS\",\n BWP: \"BW\",\n BYN: \"BY\",\n CHF: \"CH\",\n CLP: \"CL\",\n COP: \"CO\",\n CRC: \"CR\",\n CUP: \"CU\",\n CZK: \"CZ\",\n DKK: \"DK\",\n DOP: \"DO\",\n EGP: \"EG\",\n FJD: \"FJ\",\n GGP: \"GG\",\n GHS: \"US\",\n GIP: \"GI\",\n GTQ: \"GT\",\n GYD: \"GY\",\n HKD: \"HK\",\n HNL: \"HN\",\n HRK: \"HR\",\n HUF: \"HU\",\n ILS: \"IL\",\n IMP: \"IM\",\n IRR: \"IR\",\n ISK: \"IS\",\n JEP: \"JE\",\n JMD: \"JM\",\n JPY: \"JP\",\n KHR: \"KM\",\n KPW: \"KP\",\n KRW: \"KR\",\n KYD: \"KY\",\n LAK: \"LA\",\n LBP: \"LB\",\n LKR: \"LK\",\n LRD: \"LR\",\n MKD: \"MK\",\n MNT: \"MN\",\n MXN: \"MX\",\n MYR: \"MY\",\n MZN: \"MZ\",\n NGN: \"NG\",\n NIO: \"NI\",\n NOK: \"NO\",\n NPR: \"NP\",\n NZD: \"NZ\",\n PAB: \"PA\",\n PEN: \"PE\",\n PHP: \"PH\",\n PKR: \"PK\",\n PLN: \"PL\",\n PYG: \"PY\",\n QAR: \"QA\",\n RON: \"RO\",\n RSD: \"RS\",\n RUB: \"RU\",\n SAR: \"SA\",\n SBD: \"SB\",\n SCR: \"SC\",\n SEK: \"SE\",\n SGD: \"SG\",\n SHP: \"SH\",\n SOS: \"SO\",\n SRD: \"SR\",\n SVC: \"SV\",\n THB: \"TH\",\n TRY: \"TR\",\n TVD: \"TV\",\n TWD: \"TW\",\n UAH: \"UA\",\n UYU: \"UY\",\n UZS: \"UZ\",\n VEF: \"VE\",\n VND: \"VN\",\n XCD: \"EC\",\n YEN: \"YE\",\n YER: \"YE\",\n ZAR: \"ZA\",\n ZWD: \"ZW\",\n AED: \"AE\",\n AMD: \"AD\",\n BDT: \"BD\",\n BTN: \"BT\",\n AOA: \"AO\",\n AWG: \"AW\",\n BAM: \"BA\",\n BHD: \"BH\",\n BIF: \"BI\",\n BND: \"BN\",\n BZD: \"BZ\",\n CNY: \"CN\",\n CVE: \"CV\",\n DJF: \"DJ\",\n DZD: \"DZ\",\n ETB: \"ET\",\n FKP: \"FK\",\n GEL: \"GE\",\n GMD: \"GM\",\n GNF: \"GN\",\n HTG: \"HT\",\n IDR: \"ID\",\n IQD: \"IQ\",\n JOD: \"JO\",\n KES: \"KE\",\n KGS: \"KG\",\n KMF: \"KM\",\n KWD: \"KW\",\n MWK: \"MW\",\n ZMW: \"ZM\",\n LSL: \"LS\",\n LYD: \"LY\",\n MAD: \"MA\",\n MDL: \"MD\",\n MGA: \"MG\",\n MMK: \"MM\",\n KZT: \"KZ\",\n MOP: \"MO\",\n MRU: \"MR\",\n MUR: \"MU\",\n MVR: \"MV\",\n NAD: \"NA\",\n OMR: \"OM\",\n PGK: \"PG\",\n RWF: \"RW\",\n SDG: \"SD\",\n SLL: \"SL\",\n STD: \"ST\",\n SYP: \"SY\",\n SZL: \"SZ\",\n TJS: \"TJ\",\n TMT: \"TM\",\n TND: \"TN\",\n TOP: \"TO\",\n TTD: \"TT\",\n TZS: \"TZ\",\n UGX: \"UG\",\n VES: \"VE\",\n VUV: \"VU\",\n WST: \"WS\",\n XAF: \"CF\",\n XOF: \"NG\",\n XPF: \"CF\",\n};\n\n","import * as React from \"react\";\nimport { Combobox, cn, InputGroup } from \"@px-ui/core\";\nimport ReactCountryFlag from \"react-country-flag\";\nimport { CURRENCY_FLAG_CODE } from \"../constants/currency-flag-code\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/**\n * Currency type representing a currency option\n */\nexport interface Currency {\n /** Unique identifier for the currency */\n id: string;\n /** Full currency name (e.g., \"United States dollar\") */\n name: string;\n /** Currency abbreviation (e.g., \"USD\", \"EUR\") */\n abbr: string;\n /** Currency value/code used for form submission */\n value: string;\n}\n\ntype AllRootProps = React.ComponentProps<typeof Combobox.Root<Currency, false>>;\n\ntype RootProps = Pick<\n AllRootProps,\n | \"value\"\n | \"onValueChange\"\n | \"disabled\"\n | \"invalid\"\n | \"inputRef\"\n | \"readOnly\"\n | \"name\"\n>;\n\nexport interface CurrencySelectFieldProps extends RootProps {\n /**\n * Array of currency options to display\n */\n currencies: ReadonlyArray<Currency>;\n\n /**\n * Placeholder text when no currency is selected\n * @default \"Select currency\"\n */\n placeholder?: string;\n\n /**\n * Size variant for the trigger\n */\n size?: React.ComponentProps<typeof InputGroup.Root>[\"size\"];\n\n /**\n * Width variant for trigger\n */\n widthVariant?: React.ComponentProps<typeof InputGroup.Root>[\"widthVariant\"];\n\n /**\n * Width variant for the dropdown content\n */\n contentWidthVariant?: React.ComponentProps<\n typeof Combobox.Content\n >[\"widthVariant\"];\n\n /**\n * Additional className for the trigger\n */\n triggerClassName?: string;\n\n /**\n * Whether the select is loading\n */\n isLoading?: boolean;\n\n /**\n * Additional props for Combobox.Content\n */\n contentProps?: Omit<\n React.ComponentProps<typeof Combobox.Content>,\n \"children\" | \"widthVariant\" | \"empty\"\n >;\n}\n\n// ============================================================================\n// Sub-components\n// ============================================================================\n\ninterface CurrencyFlagProps {\n countryCode: string | null | undefined;\n className?: string;\n}\n\nfunction CurrencyFlag({ countryCode, className }: CurrencyFlagProps) {\n if (!countryCode) {\n return <span className={cn(\"inline-block w-4\", className)} />;\n }\n\n return (\n <div\n className={cn(\"relative -top-px flex shrink-0 items-center\", className)}\n >\n <ReactCountryFlag\n countryCode={countryCode}\n svg\n style={{\n width: \"14px\",\n height: \"14px\",\n }}\n aria-label={`Flag of ${countryCode}`}\n />\n </div>\n );\n}\n\ninterface CurrencyOptionContentProps {\n currency: Currency;\n}\n\nfunction CurrencyOptionContent({ currency }: CurrencyOptionContentProps) {\n const countryCode = CURRENCY_FLAG_CODE[currency.abbr];\n\n return (\n <div className=\"flex items-center gap-2.5\">\n <CurrencyFlag countryCode={countryCode} />\n <span>\n <span className=\"text-ppx-foreground font-medium\">{currency.abbr}</span>\n <span className=\"text-ppx-muted-foreground\"> - {currency.name}</span>\n </span>\n </div>\n );\n}\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\n/**\n * A currency select component with search functionality and flag display.\n * Country flags are automatically displayed based on the currency abbreviation\n * using the built-in CURRENCY_FLAG_CODE mapping.\n *\n * @example\n * ```tsx\n * const currencies = [\n * { id: \"1\", abbr: \"USD\", name: \"United States dollar\", value: \"USD\" },\n * { id: \"2\", abbr: \"EUR\", name: \"Euro\", value: \"EUR\" },\n * { id: \"3\", abbr: \"GBP\", name: \"British Pound\", value: \"GBP\" },\n * ];\n *\n * <CurrencySelectField\n * currencies={currencies}\n * value={selectedCurrency}\n * onValueChange={setSelectedCurrency}\n * placeholder=\"Select currency\"\n * />\n * ```\n */\nexport function CurrencySelectField({\n currencies,\n value,\n onValueChange,\n placeholder = \"Select currency\",\n disabled,\n invalid,\n name,\n size,\n widthVariant,\n contentWidthVariant = \"trigger\",\n triggerClassName,\n isLoading,\n contentProps,\n inputRef,\n readOnly,\n}: CurrencySelectFieldProps) {\n return (\n <Combobox.Root<Currency, false>\n items={currencies as Currency[]}\n value={value}\n onValueChange={onValueChange}\n disabled={disabled}\n invalid={invalid}\n isLoading={isLoading}\n isItemEqualToValue={(item, val) =>\n item.id\n ? item.id === val.id\n : item.abbr\n ? item.abbr === val.abbr\n : item.value === val.value\n }\n itemToStringLabel={(item) => `${item.abbr} - ${item.name}`}\n inputRef={inputRef}\n readOnly={readOnly}\n name={name}\n >\n <Combobox.SearchableTrigger\n className={triggerClassName}\n widthVariant={widthVariant}\n size={size}\n placeholder={placeholder}\n addons={\n value ? (\n <InputGroup.Addon align=\"inline-start\">\n <CurrencyFlag\n countryCode={CURRENCY_FLAG_CODE[value.abbr]}\n className=\"w-fit\"\n />\n </InputGroup.Addon>\n ) : undefined\n }\n />\n\n <Combobox.Content\n widthVariant={contentWidthVariant}\n empty=\"No currencies found\"\n {...contentProps}\n >\n <Combobox.List>\n {(currency: Currency) => (\n <Combobox.Item key={currency.id} value={currency}>\n <CurrencyOptionContent currency={currency} />\n </Combobox.Item>\n )}\n </Combobox.List>\n </Combobox.Content>\n </Combobox.Root>\n );\n}\n","import * as React from \"react\";\nimport {\n FileUpload,\n useFileUpload,\n type UseFileUploadOptions,\n type FileUploadItem,\n type DropzoneRenderProps,\n type DropzoneState,\n type FileMetadata,\n} from \"@px-ui/core\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface FileUploadFieldRef {\n /** Reset the file upload state, optionally with new initial files */\n reset: (newFiles?: FileMetadata[]) => void;\n /** Clear all files */\n clearFiles: () => void;\n /** Get current files */\n getFiles: () => FileUploadItem[];\n}\n\nexport interface FileUploadFieldProps\n extends Omit<UseFileUploadOptions, \"initialFiles\"> {\n /** Size of the dropzone (ignored when using render prop) */\n size?: \"sm\" | \"default\" | \"lg\";\n /** Text displayed in the dropzone (ignored when using render prop) */\n dropzoneText?: string;\n /** Text for the browse/upload button (ignored when using render prop) */\n buttonText?: string;\n /** Show file list below the dropzone */\n showFileList?: boolean;\n /** Initial files (already uploaded) */\n initialFiles?: Array<{\n id: string;\n name: string;\n size: number;\n type: string;\n url: string;\n }>;\n /** Whether the upload is disabled */\n disabled?: boolean;\n /** Custom className */\n className?: string;\n /**\n * Render prop for complete dropzone customization.\n * Receives props to spread and state for conditional styling.\n */\n render?: (\n props: DropzoneRenderProps,\n state: DropzoneState,\n ) => React.ReactElement;\n /** Render prop for custom file item rendering */\n renderFileItem?: (\n file: FileUploadItem,\n actions: { remove: () => void; retry: () => void },\n ) => React.ReactNode;\n /** Click handler for file list items (for preview, etc.) */\n onItemClick?: (file: FileUploadItem) => void;\n /** Error handler */\n onError?: (error: { type: string; message: string; files?: File[] }) => void;\n}\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\nexport const FileUploadField = React.forwardRef<\n FileUploadFieldRef,\n FileUploadFieldProps\n>(function FileUploadField(\n {\n size = \"default\",\n dropzoneText = \"Paste Or Drag & Drop Files Here\",\n buttonText = \"Browse for files\",\n showFileList = true,\n initialFiles = [],\n disabled = false,\n className,\n render,\n renderFileItem,\n onItemClick,\n onError,\n // Hook options\n maxFiles,\n maxSize,\n accept,\n multiple = false,\n onFilesChange,\n onFileAdd,\n onFileRemove,\n upload: uploadConfig,\n },\n ref,\n) {\n const uploadHook = useFileUpload({\n maxFiles,\n maxSize,\n accept,\n multiple,\n initialFiles: initialFiles.map((f) => ({\n ...f,\n id: f.id,\n name: f.name,\n size: f.size,\n type: f.type,\n url: f.url,\n })),\n onFilesChange,\n onFileAdd,\n onFileRemove,\n upload: uploadConfig,\n });\n\n const { files, errors, retryUpload, removeFile, reset, clearFiles } =\n uploadHook;\n\n // Expose reset method via ref\n React.useImperativeHandle(\n ref,\n () => ({\n reset: (newFiles?: FileMetadata[]) => reset(newFiles),\n clearFiles: () => clearFiles(),\n getFiles: () => files,\n }),\n [reset, clearFiles, files],\n );\n\n // Handle errors\n React.useEffect(() => {\n if (errors.length > 0 && onError) {\n onError({\n type: \"validation\",\n message: errors[0],\n });\n }\n }, [errors, onError]);\n\n // Render file item using ListItem or custom render prop\n const renderDefaultFileItem = (file: FileUploadItem) => {\n if (renderFileItem) {\n return renderFileItem(file, {\n remove: () => removeFile(file.id),\n retry: () => retryUpload(file.id),\n });\n }\n\n return (\n <FileUpload.ListItem\n key={file.id}\n file={file}\n onItemClick={onItemClick}\n />\n );\n };\n\n return (\n <FileUpload.Root\n key={uploadHook.instanceKey}\n upload={uploadHook}\n accept={accept}\n multiple={multiple}\n disabled={disabled}\n className={className}\n >\n <FileUpload.Dropzone\n size={size}\n dropzoneText={dropzoneText}\n browseText={buttonText}\n render={render}\n />\n\n {/* Errors */}\n {errors.length > 0 && (\n <div className=\"text-ppx-red-5 text-sm\">\n {errors.map((error, i) => (\n <p key={i}>{error}</p>\n ))}\n </div>\n )}\n\n {/* File List */}\n {showFileList && files.length > 0 && (\n <div>\n <div className=\"mb-2 flex items-center justify-between\">\n <span className=\"text-ppx-neutral-14 text-sm font-medium\">\n {multiple ? `Files (${files.length})` : \"Selected file\"}\n </span>\n {multiple && files.length > 1 && (\n <FileUpload.ClearAll\n size=\"sm\"\n className=\"text-ppx-red-5 hover:text-ppx-red-6\"\n >\n Remove all\n </FileUpload.ClearAll>\n )}\n </div>\n\n <FileUpload.List>{files.map(renderDefaultFileItem)}</FileUpload.List>\n </div>\n )}\n </FileUpload.Root>\n );\n});\n\nexport type {\n FileUploadItem,\n UploadConfig,\n UseFileUploadOptions as FileUploadWithUploaderOptions,\n DropzoneRenderProps,\n DropzoneState,\n FileMetadata,\n} from \"@px-ui/core\";\n","import { useMemo } from \"react\";\nimport {\n cn,\n cva,\n type VariantProps,\n Label as LabelPrimitive,\n Separator as SeperatorPrimitive,\n} from \"@px-ui/core\";\n\nexport function Set({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n return (\n <fieldset\n data-slot=\"field-set\"\n className={cn(\n \"flex flex-col gap-6\",\n \"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport function Legend({\n className,\n variant = \"legend\",\n ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n return (\n <legend\n data-slot=\"field-legend\"\n data-variant={variant}\n className={cn(\n \"mb-3 font-medium\",\n \"data-[variant=legend]:text-base\",\n \"data-[variant=label]:text-sm\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport function Group({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"field-group\"\n className={cn(\n \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4\",\n className,\n )}\n {...props}\n />\n );\n}\n\ntype FieldVariantsType = (\n props?:\n | {\n orientation?: \"vertical\" | \"horizontal\" | \"responsive\";\n }\n | undefined,\n) => string;\n\nconst fieldVariants: FieldVariantsType = cva(\n \"group/field flex w-full gap-2 data-[invalid=true]:text-ppx-red-5\",\n {\n variants: {\n orientation: {\n vertical: [\"flex-col [&>*]:w-full [&>.sr-only]:w-auto\"],\n horizontal: [\n \"flex-row items-center\",\n \"[&>[data-slot=field-label]]:flex-auto\",\n \"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n ],\n responsive: [\n \"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto\",\n \"@md/field-group:[&>[data-slot=field-label]]:flex-auto\",\n \"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n ],\n },\n },\n defaultVariants: {\n orientation: \"vertical\",\n },\n },\n) as FieldVariantsType;\n\nexport function Root({\n className,\n orientation = \"vertical\",\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n return (\n <div\n role=\"group\"\n data-slot=\"field\"\n data-orientation={orientation}\n className={cn(fieldVariants({ orientation }), className)}\n {...props}\n />\n );\n}\n\nexport function Content({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"field-content\"\n className={cn(\n \"group/field-content flex flex-1 flex-col gap-1.5 leading-snug\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport function Label({\n className,\n ...props\n}: React.ComponentProps<typeof LabelPrimitive>) {\n return (\n <LabelPrimitive\n data-slot=\"field-label\"\n className={cn(\n \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50\",\n \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport function Title({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"field-label\"\n className={cn(\n \"text-ppx-sm flex w-fit items-center gap-2 font-medium leading-snug group-data-[disabled=true]/field:opacity-50\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport function Description({\n className,\n ...props\n}: React.ComponentProps<\"p\">) {\n return (\n <p\n data-slot=\"field-description\"\n className={cn(\n \"text-ppx-sm text-ppx-muted-foreground font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance\",\n \"nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport function Separator({\n children,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & {\n children?: React.ReactNode;\n}) {\n return (\n <div\n data-slot=\"field-separator\"\n data-content={!!children}\n className={cn(\n \"text-ppx-sm relative -my-2 h-5 group-data-[variant=outline]/field-group:-mb-2\",\n className,\n )}\n {...props}\n >\n <SeperatorPrimitive\n orientation=\"horizontal\"\n className=\"absolute inset-0 top-1/2\"\n />\n {children && (\n <span\n className=\"bg-ppx-background text-ppx-muted-foreground relative mx-auto block w-fit px-2\"\n data-slot=\"field-separator-content\"\n >\n {children}\n </span>\n )}\n </div>\n );\n}\n\nexport function Error({\n className,\n children,\n errors,\n ...props\n}: React.ComponentProps<\"div\"> & {\n errors?: Array<{ message?: string } | undefined>;\n}) {\n const content = useMemo(() => {\n if (children) {\n return children;\n }\n\n if (!errors?.length) {\n return null;\n }\n\n const uniqueErrors = [\n ...new Map(errors.map((error) => [error?.message, error])).values(),\n ];\n\n if (uniqueErrors?.length == 1) {\n return uniqueErrors[0]?.message;\n }\n\n return (\n <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n {uniqueErrors.map(\n (error, index) =>\n error?.message && <li key={index}>{error.message}</li>,\n )}\n </ul>\n );\n }, [children, errors]);\n\n if (!content) {\n return null;\n }\n\n return (\n <div\n role=\"alert\"\n data-slot=\"field-error\"\n className={cn(\"text-ppx-sm text-ppx-red-5 font-normal\", className)}\n {...props}\n >\n {content}\n </div>\n );\n}\n","import {\n Controller,\n type ControllerProps,\n type FieldPath,\n type FieldValues,\n} from \"react-hook-form\";\nimport * as Field from \"./field\";\nimport { type ReactNode } from \"react\";\nimport { Textarea, Checkbox, Input } from \"@px-ui/core\";\n\ntype FormControlProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n TTransformedValues = TFieldValues,\n> = {\n name: TName;\n label: ReactNode;\n description?: ReactNode;\n control: ControllerProps<TFieldValues, TName, TTransformedValues>[\"control\"];\n required?: boolean;\n placeholder?: string;\n};\n\ntype FormBaseProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n TTransformedValues = TFieldValues,\n> = FormControlProps<TFieldValues, TName, TTransformedValues> & {\n horizontal?: boolean;\n controlFirst?: boolean;\n children: (\n field: Parameters<\n ControllerProps<TFieldValues, TName, TTransformedValues>[\"render\"]\n >[0][\"field\"] & {\n invalid?: boolean;\n id: string;\n },\n ) => ReactNode;\n};\n\ntype FormControlFunc<\n ExtraProps extends Record<string, unknown> = Record<never, never>,\n> = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n TTransformedValues = TFieldValues,\n>(\n props: FormControlProps<TFieldValues, TName, TTransformedValues> & ExtraProps,\n) => ReactNode;\n\nfunction FormBase<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n TTransformedValues = TFieldValues,\n>({\n children,\n control,\n label,\n name,\n required,\n description,\n controlFirst,\n horizontal,\n}: FormBaseProps<TFieldValues, TName, TTransformedValues>) {\n return (\n <Controller\n control={control}\n name={name}\n render={({ field, fieldState }) => {\n const labelElement = (\n <Field.Label\n className={required ? \"required\" : \"\"}\n htmlFor={field.name}\n >\n {label}\n </Field.Label>\n );\n\n const descriptionElement = description ? (\n <Field.Description>{description}</Field.Description>\n ) : null;\n\n const control = children({\n ...field,\n id: field.name,\n invalid: fieldState.invalid,\n });\n\n const errorElement = fieldState.invalid && (\n <Field.Error errors={[fieldState.error]} />\n );\n\n return (\n <Field.Root orientation={horizontal ? \"horizontal\" : undefined}>\n {controlFirst ? (\n <>\n {control}\n {labelElement}\n {descriptionElement}\n {errorElement}\n </>\n ) : (\n <>\n {labelElement}\n {control}\n {descriptionElement}\n {errorElement}\n </>\n )}\n </Field.Root>\n );\n }}\n />\n );\n}\n\nexport const FormInput: FormControlFunc = ({ placeholder, ...props }) => {\n return (\n <FormBase {...props}>\n {(field) => <Input {...field} placeholder={placeholder} />}\n </FormBase>\n );\n};\n\nexport const FormTextarea: FormControlFunc = ({ placeholder, ...props }) => {\n return (\n <FormBase {...props}>\n {(field) => <Textarea {...field} placeholder={placeholder} />}\n </FormBase>\n );\n};\n\nexport const FormCheckbox: FormControlFunc = (props) => {\n return (\n <FormBase {...props} horizontal controlFirst>\n {({ onChange, value, ...field }) => (\n <Checkbox {...field} checked={value} onCheckedChange={onChange} />\n )}\n </FormBase>\n );\n};\n\n// Note: FormRadioItem is not included in the abstractions because radio buttons\n// work as a group and require a different pattern. Use the verbose Controller\n// approach with RadioGroup for radio buttons. See the stories for examples.\n","import React, { useState } from \"react\";\nimport { cn } from \"@px-ui/core\";\nimport PhoneInputLib from \"react-phone-input-2\";\nimport \"react-phone-input-2/lib/style.css\";\nimport GoogleLibPhoneNumber from \"google-libphonenumber\";\n\nconst phoneUtil = GoogleLibPhoneNumber.PhoneNumberUtil.getInstance();\nconst PNF = GoogleLibPhoneNumber.PhoneNumberFormat;\n\ninterface PhoneInputProps {\n value: string;\n onChange: (value: string) => void;\n country?: string;\n error?: boolean;\n placeholder?: string;\n disabled?: boolean;\n className?: string;\n}\n\nexport const PhoneInput = ({\n value,\n onChange,\n country = \"us\",\n error,\n placeholder,\n disabled,\n className,\n}: PhoneInputProps) => {\n const [isValid, setIsValid] = useState(true);\n\n const handleChange = (inputValue: string, data: any) => {\n if (!inputValue) {\n setIsValid(true);\n onChange(\"\");\n return;\n }\n\n try {\n const phoneValue = inputValue.startsWith(\"+\")\n ? inputValue\n : \"+\" + inputValue;\n const parsedNumber = phoneUtil.parseAndKeepRawInput(\n phoneValue,\n data.countryCode,\n );\n const isNumberValid = phoneUtil.isValidNumberForRegion(\n parsedNumber,\n data.countryCode,\n );\n\n setIsValid(isNumberValid);\n\n if (isNumberValid) {\n const formatted = phoneUtil.format(parsedNumber, PNF.E164);\n onChange(formatted);\n } else {\n onChange(phoneValue);\n }\n } catch (e) {\n setIsValid(false);\n onChange(inputValue.startsWith(\"+\") ? inputValue : \"+\" + inputValue);\n }\n };\n\n return (\n <div className={cn(\"flex w-full flex-col gap-1\", className)}>\n <div\n className={`relative ${!isValid || error ? \"phone-input-error\" : \"\"}`}\n >\n <PhoneInputLib\n country={country}\n value={value}\n onChange={handleChange}\n disabled={disabled}\n placeholder={placeholder}\n inputClass={`!w-full !h-11 !text-base !rounded-lg !border ${\n !isValid || error\n ? \"!border-red-500 !bg-red-50\"\n : \"!border-gray-300 focus:!border-blue-500 focus:!ring-1 focus:!ring-blue-500\"\n }`}\n buttonClass={`!rounded-l-lg !border-y !border-l ${\n !isValid || error\n ? \"!border-red-500 !bg-red-50\"\n : \"!border-gray-300\"\n }`}\n containerClass=\"!w-full\"\n />\n </div>\n\n {(!isValid || error) && (\n <p className=\"mt-1 text-xs font-medium text-red-500\">\n Please enter a valid phone number for this region.\n </p>\n )}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoFA,SAAgB,YAAyB,OAAgC;CACvE,MAAM,EACJ,OACA,OACA,eACA,aACA,cACA,aACA,UACA,SACA,MACA,oBACA,MACA,cACA,qBACA,cACA,kBACA,UACA,aACE;CAGJ,MAAM,cAAc,MAAa,UAA0B;AACzD,MAAI,QAAQ,OAAO,SAAS,UAAU;AACpC,OAAI,WAAW,MAAM;IACnB,MAAM,MAAO,KAAa;AAC1B,WAAO,OAAO,QAAQ,YAAY,OAAO,QAAQ,WAC7C,OAAO,IAAI,GACX,MAAM,UAAU;;AAEtB,OAAI,QAAQ,MAAM;IAChB,MAAM,KAAM,KAAa;AACzB,WAAO,OAAO,OAAO,YAAY,OAAO,OAAO,WAC3C,OAAO,GAAG,GACV,MAAM,UAAU;;;AAGxB,SAAO,MAAM,UAAU;;CAIzB,MAAM,qBAAqB,SAAiC;AAC1D,MAAI,aACF,QAAO,aAAa,KAAK;AAG3B,MAAI,QAAQ,OAAO,SAAS,YAAY,WAAW,KACjD,QAAQ,KAAa;AAGvB,SAAO,OAAO,KAAK;;CAIrB,MAAM,oBAAoB,SAAiC;AACzD,MAAI,YACF,QAAO,YAAY,KAAK;AAG1B,SAAO,kBAAkB,KAAK;;AAGhC,QACE,qBAAC,OAAO;EACC;EACQ;EACL;EACD;EACH;EACc;EACV;EACA;aAEV,oBAAC,OAAO;GACA;GACQ;GACd,WAAW;aAEX,oBAAC,OAAO;IAAmB;eACvB,kBAAuB;AACvB,SAAI,iBAAiB,KACnB,QAAO,eAAe;AAExB,YAAO,iBAAiB,cAAuB;;KAEpC;IACA,EAEjB,oBAAC,OAAO;GAAQ,cAAc;GAAqB,GAAI;aACrD,oBAAC,OAAO,kBACJ,OAAiB,KAAK,MAAM,UAAU;IACtC,MAAM,MAAM,WAAW,MAAM,MAAM;AACnC,WACE,oBAAC,OAAO;KAAe,OAAO;eAC3B,kBAAkB,KAAK;OADR,IAEJ;KAEhB,GACU;IACC;GACL;;;;;;;;;ACpLlB,MAAaA,qBAA6C;CACxD,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,K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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@px-ui/forms",
|
|
3
|
-
"version": "18.0.
|
|
3
|
+
"version": "18.0.2",
|
|
4
4
|
"description": "Form components built on top of px-ui-core",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"react-dom": ">=19.0.0",
|
|
42
42
|
"react-hook-form": ">=7.0.0",
|
|
43
43
|
"zod": ">=3.0.0",
|
|
44
|
-
"@px-ui/core": "5.1.
|
|
44
|
+
"@px-ui/core": "5.1.1"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@hookform/resolvers": "^5.1.1",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"vite": "npm:rolldown-vite@^7.2.5",
|
|
65
65
|
"vitest": "^4.0.9",
|
|
66
66
|
"zod": "4.0.0",
|
|
67
|
-
"@px-ui/core": "5.1.
|
|
67
|
+
"@px-ui/core": "5.1.1"
|
|
68
68
|
},
|
|
69
69
|
"scripts": {
|
|
70
70
|
"lint": "eslint src --ext .ts,.tsx",
|