npm - @px-ui/forms - Versions diffs - 9.0.0 → 10.0.0 - Mend

@px-ui/forms 9.0.0 → 10.0.0

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.

Files changed (4) hide show

package/dist/index.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React$1 from "react";
 import { ReactNode } from "react";
 import { Combobox, DropzoneRenderProps, DropzoneRenderProps as DropzoneRenderProps$1, DropzoneState, DropzoneState as DropzoneState$1, FileMetadata, FileMetadata as FileMetadata$1, FileUploadItem, FileUploadItem as FileUploadItem$1, InputGroup, Label, Select, UploadConfig, UseFileUploadOptions, UseFileUploadOptions as FileUploadWithUploaderOptions, VariantProps } from "@px-ui/core";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
 import "react-phone-input-2/lib/style.css";
@@ -59,7 +59,7 @@ interface SelectFieldProps<TItem = any, TMultiple extends boolean | undefined =
  * />
  * ```
  */
-declare function SelectField<TItem = any, TMultiple extends boolean | undefined = false>(props: SelectFieldProps<TItem, TMultiple>): react_jsx_runtime0.JSX.Element;
+declare function SelectField<TItem = any, TMultiple extends boolean | undefined = false>(props: SelectFieldProps<TItem, TMultiple>): react_jsx_runtime1.JSX.Element;
 //#endregion
 //#region src/components/combobox-field.d.ts
 type AllRootProps$1<TItem = any, TMultiple extends boolean | undefined = false> = React$1.ComponentProps<typeof Combobox.Root<TItem, TMultiple>>;
@@ -150,7 +150,7 @@ interface ComboboxFieldProps<TItem = any, TMultiple extends boolean | undefined
  *   onValueChange={setSelected}
  * />
  */
-declare function ComboboxField<TItem = any, TMultiple extends boolean | undefined = false>(props: ComboboxFieldProps<TItem, TMultiple>): react_jsx_runtime0.JSX.Element;
+declare function ComboboxField<TItem = any, TMultiple extends boolean | undefined = false>(props: ComboboxFieldProps<TItem, TMultiple>): react_jsx_runtime1.JSX.Element;
 //#endregion
 //#region src/components/currency-select-field.d.ts
 /**
@@ -240,7 +240,7 @@ declare function CurrencySelectField({
   contentProps,
   inputRef,
   readOnly
-}: CurrencySelectFieldProps): react_jsx_runtime0.JSX.Element;
+}: CurrencySelectFieldProps): react_jsx_runtime1.JSX.Element;
 //#endregion
 //#region src/constants/currency-flag-code.d.ts
 /**
@@ -305,18 +305,18 @@ declare namespace field_d_exports {
 declare function Set({
   className,
   ...props
-}: React.ComponentProps<"fieldset">): react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<"fieldset">): react_jsx_runtime1.JSX.Element;
 declare function Legend({
   className,
   variant,
   ...props
 }: React.ComponentProps<"legend"> & {
   variant?: "legend" | "label";
-}): react_jsx_runtime0.JSX.Element;
+}): react_jsx_runtime1.JSX.Element;
 declare function Group({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime1.JSX.Element;
 type FieldVariantsType = (props?: {
   orientation?: "vertical" | "horizontal" | "responsive";
 } | undefined) => string;
@@ -325,30 +325,30 @@ declare function Root({
   className,
   orientation,
   ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): react_jsx_runtime1.JSX.Element;
 declare function Content({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime1.JSX.Element;
 declare function Label$1({
   className,
   ...props
-}: React.ComponentProps<typeof Label>): react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<typeof Label>): react_jsx_runtime1.JSX.Element;
 declare function Title({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime1.JSX.Element;
 declare function Description({
   className,
   ...props
-}: React.ComponentProps<"p">): react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<"p">): react_jsx_runtime1.JSX.Element;
 declare function Separator$1({
   children,
   className,
   ...props
 }: React.ComponentProps<"div"> & {
   children?: React.ReactNode;
-}): react_jsx_runtime0.JSX.Element;
+}): react_jsx_runtime1.JSX.Element;
 declare function Error({
   className,
   children,
@@ -358,7 +358,7 @@ declare function Error({
   errors?: Array<{
     message?: string;
   } | undefined>;
-}): react_jsx_runtime0.JSX.Element | null;
+}): react_jsx_runtime1.JSX.Element | null;
 //#endregion
 //#region src/components/form.d.ts
 type FormControlProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformedValues = TFieldValues> = {
@@ -392,7 +392,7 @@ declare const PhoneInput: ({
   placeholder,
   disabled,
   className
-}: PhoneInputProps) => react_jsx_runtime0.JSX.Element;
+}: PhoneInputProps) => react_jsx_runtime1.JSX.Element;
 //#endregion
 export { CURRENCY_FLAG_CODE, ComboboxField, type Currency, CurrencySelectField, type CurrencySelectFieldProps, type DropzoneRenderProps, type DropzoneState, field_d_exports as Field, type FileMetadata, FileUploadField, type FileUploadFieldProps, type FileUploadFieldRef, type FileUploadItem, type FileUploadWithUploaderOptions, FormCheckbox, FormInput, FormTextarea, PhoneInput, SelectField, type UploadConfig };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js CHANGED Viewed

@@ -482,7 +482,7 @@ function CurrencySelectField({ currencies, value, onValueChange, placeholder = "
 //#endregion
 //#region src/components/file-upload-field.tsx
-const FileUploadField = React$1.forwardRef(function FileUploadField$1({ size = "default", dropzoneText = "Paste Or Drag & Drop Files Here", buttonText = "Browse for files", showFileList = true, initialFiles = [], disabled = false, className, render, renderFileItem, onItemClick, onError, maxFiles, maxSize, accept, multiple = false, onFilesChange, onFilesAdded, upload: uploadConfig }, ref) {
+const FileUploadField = React$1.forwardRef(function FileUploadField$1({ size = "default", dropzoneText = "Paste Or Drag & Drop Files Here", buttonText = "Browse for files", showFileList = true, initialFiles = [], disabled = false, className, render, renderFileItem, onItemClick, onError, maxFiles, maxSize, accept, multiple = false, onFilesChange, onFileAdd, onFileRemove, upload: uploadConfig }, ref) {
 	const uploadHook = useFileUpload({
 		maxFiles,
 		maxSize,
@@ -497,7 +497,8 @@ const FileUploadField = React$1.forwardRef(function FileUploadField$1({ size = "
 			url: f.url
 		})),
 		onFilesChange,
-		onFilesAdded,
+		onFileAdd,
+		onFileRemove,
 		upload: uploadConfig
 	});
 	const { files, errors, retryUpload, removeFile, reset, clearFiles } = uploadHook;

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["items","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/components/combobox-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<\n TItem = any,\n TMultiple extends boolean \| undefined = false,\n> = Pick<\n AllRootProps<TItem, TMultiple>,\n \| \"value\"\n \| \"onValueChange\"\n \| \"multiple\"\n \| \"disabled\"\n \| \"invalid\"\n \| \"isItemEqualToValue\"\n \| \"inputRef\"\n \| \"readOnly\"\n \| \"name\"\n>;\n\ninterface SelectFieldProps<\n TItem = any,\n TMultiple extends boolean \| undefined = false,\n> extends RootProps<TItem, TMultiple> {\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<\n TItem = any,\n TMultiple extends boolean \| undefined = false,\n>(props: SelectFieldProps<TItem, TMultiple>) {\n const {\n items,\n value,\n onValueChange,\n renderLabel,\n renderOption,\n placeholder,\n multiple,\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, TMultiple>\n value={value}\n onValueChange={onValueChange}\n multiple={multiple}\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 // Handle multiple selection\n if (multiple && Array.isArray(selectedValue)) {\n // For multiple, show MultiSelectedValue by default\n const labels = selectedValue.map((item: TItem) => {\n const label = renderValueLabel(item);\n return typeof label === \"string\" ? label : String(label);\n });\n return (\n <Select.MultiSelectedValue\n selectedValue={labels}\n maxItems={2}\n />\n );\n }\n\n // Single selection - show placeholder if no value\n if (selectedValue == null) {\n return placeholder \|\| null;\n }\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 const ItemComponent = multiple ? Select.MultiItem : Select.Item;\n\n return (\n <ItemComponent key={key} value={item}>\n {renderItemContent(item)}\n </ItemComponent>\n );\n })}\n </Select.List>\n </Select.Content>\n </Select.Root>\n );\n}\n","import as React from \"react\";\nimport { Combobox } from \"@px-ui/core\";\n\ntype AllRootProps<\n TItem = any,\n TMultiple extends boolean \| undefined = false,\n> = React.ComponentProps<typeof Combobox.Root<TItem, TMultiple>>;\n\ntype RootProps<\n TItem = any,\n TMultiple extends boolean \| undefined = false,\n> = Pick<\n AllRootProps<TItem, TMultiple>,\n \| \"items\"\n \| \"loadOptions\"\n \| \"value\"\n \| \"onValueChange\"\n \| \"multiple\"\n \| \"disabled\"\n \| \"invalid\"\n \| \"isItemEqualToValue\"\n \| \"inputRef\"\n \| \"readOnly\"\n>;\n\ninterface ComboboxFieldProps<\n TItem = any,\n TMultiple extends boolean \| undefined = false,\n> extends RootProps<TItem, TMultiple> {\n /*\n Function to render the label in the trigger for the selected item(s)\n * - For single select: receives a single item\n * - For multiple select: receives an array of items\n * If not provided and item has a 'label' property, it will be used automatically\n /\n renderLabel?: TMultiple extends true\n ? (items: TItem[]) => React.ReactNode\n : (item: TItem) => string \| 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 Function to render each chip in ChipsTrigger (multiple selection only)\n * If not provided, renderLabel or auto-detected label will be used\n /\n renderChip?: (item: TItem) => React.ReactNode \| string;\n\n /\n Placeholder text when no value is selected\n /\n placeholder?: string;\n\n /\n Show search input inside the popup instead of in trigger\n * Only applicable when not using searchable trigger\n * @default false\n /\n searchInPopup?: boolean;\n\n /\n Size variant for trigger\n /\n size?: React.ComponentProps<typeof Combobox.SearchableTrigger>[\"size\"];\n\n /\n Width variant for trigger\n /\n widthVariant?: \"enforced\" \| \"full\";\n\n /\n Width variant for the dropdown content\n /\n contentWidthVariant?: \"trigger\" \| \"fit\" \| \"enforced\";\n\n /\n Additional className for the trigger\n /\n triggerClassName?: string;\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 A simplified Combobox component for common use cases.\n * For advanced customization, use the composable Combobox.* components from @px-ui/core.\n \n Features:\n * - Single and multiple selection\n * - Inline search (SearchableTrigger or ChipsTrigger)\n * - Async data loading with loadOptions\n * - Type-safe with full inference\n \n @example\n * // Single select with search\n * <ComboboxField\n * items={items}\n * value={selected}\n * onValueChange={setSelected}\n * placeholder=\"Select an option\"\n * />\n \n @example\n * // Multiple select with chips\n * <ComboboxField\n * items={items}\n * value={selected}\n * onValueChange={setSelected}\n * multiple\n * placeholder=\"Select options\"\n * />\n \n @example\n * // Async loading\n * <ComboboxField\n * loadOptions={loadUsers}\n * value={selected}\n * onValueChange={setSelected}\n * />\n /\nexport function ComboboxField<\n TItem = any,\n TMultiple extends boolean \| undefined = false,\n>(props: ComboboxFieldProps<TItem, TMultiple>) {\n const {\n items,\n loadOptions,\n value,\n onValueChange,\n renderLabel,\n renderOption,\n renderChip,\n placeholder,\n searchInPopup = false,\n multiple,\n disabled,\n invalid,\n isItemEqualToValue,\n size,\n widthVariant,\n contentWidthVariant = \"trigger\",\n triggerClassName,\n contentProps,\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 (single item)\n const renderSingleValueLabel = (item: TItem): React.ReactNode => {\n if (renderLabel && !multiple) {\n return (renderLabel as (item: TItem) => React.ReactNode)(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 (multiple items)\n const renderMultipleValueLabel = (items: TItem[]): React.ReactNode => {\n if (renderLabel && multiple) {\n return (renderLabel as (items: TItem[]) => React.ReactNode)(items);\n }\n // Default: show count\n return `${items.length} selected`;\n };\n\n // Helper to render chip content\n const renderChipContent = (item: TItem): React.ReactNode => {\n if (renderChip) {\n return renderChip(item);\n }\n return renderSingleValueLabel(item);\n };\n\n return (\n <Combobox.Root<TItem, TMultiple>\n items={items}\n loadOptions={loadOptions}\n value={value}\n onValueChange={onValueChange}\n multiple={multiple}\n disabled={disabled}\n invalid={invalid}\n isItemEqualToValue={isItemEqualToValue}\n // @ts-expect-error\n itemToStringLabel={multiple ? undefined : renderLabel}\n inputRef={inputRef}\n readOnly={readOnly}\n >\n {/ If searchInPopup, use regular Trigger (regardless of multiple) /}\n {searchInPopup ? (\n <Combobox.Trigger\n size={size}\n widthVariant={widthVariant}\n className={triggerClassName}\n >\n <Combobox.Value placeholder={placeholder}>\n {(selectedValue: any) => {\n if (selectedValue == null) {\n return null;\n }\n\n // Handle multiple selection\n if (multiple && Array.isArray(selectedValue)) {\n if (selectedValue.length === 0) {\n return null;\n }\n return renderMultipleValueLabel(selectedValue);\n }\n\n // Single selection\n return renderSingleValueLabel(selectedValue);\n }}\n </Combobox.Value>\n </Combobox.Trigger>\n ) : multiple ? (\n / Multiple selection uses ChipsTrigger /\n <Combobox.ChipsTrigger\n placeholder={placeholder}\n size={size}\n widthVariant={widthVariant}\n className={triggerClassName}\n >\n {(item: TItem) => (\n <Combobox.Chip key={getItemKey(item as any, 0)}>\n {renderChipContent(item)}\n </Combobox.Chip>\n )}\n </Combobox.ChipsTrigger>\n ) : (\n / Single selection uses SearchableTrigger /\n <Combobox.SearchableTrigger\n placeholder={placeholder}\n size={size}\n widthVariant={widthVariant}\n className={triggerClassName}\n />\n )}\n\n <Combobox.Content widthVariant={contentWidthVariant} {...contentProps}>\n {/ Search in popup when using regular Trigger /}\n {searchInPopup && <Combobox.Search placeholder={placeholder} />}\n\n <Combobox.List>\n {(item: TItem) => {\n const key = getItemKey(item, 0);\n const ItemComponent = multiple ? Combobox.MultiItem : Combobox.Item;\n\n return (\n <ItemComponent key={key} value={item}>\n {renderItemContent(item)}\n </ItemComponent>\n );\n }}\n </Combobox.List>\n </Combobox.Content>\n </Combobox.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 inputRef={inputRef}\n readOnly={readOnly}\n name={name}\n >\n <Combobox.Trigger\n widthVariant={widthVariant}\n className={triggerClassName}\n size={size}\n >\n <div className=\"flex items-center gap-2\">\n {value && (\n <CurrencyFlag\n countryCode={CURRENCY_FLAG_CODE[value.abbr]}\n className=\"w-fit\"\n />\n )}\n <Combobox.Value placeholder={placeholder}>\n {(currency: Currency) => `${currency.abbr} - ${currency.name}`}\n </Combobox.Value>\n </div>\n </Combobox.Trigger>\n\n <Combobox.Content\n widthVariant={contentWidthVariant}\n empty=\"No currencies found\"\n {...contentProps}\n >\n <Combobox.Search />\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 onFilesAdded,\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 onFilesAdded,\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 parsedNumber = phoneUtil.parseAndKeepRawInput(inputValue, data.countryCode);\n const isNumberValid = phoneUtil.isValidNumberForRegion(parsedNumber, data.countryCode);\n \n setIsValid(isNumberValid);\n \n if (isNumberValid) {\n const formatted = phoneUtil.format(parsedNumber, PNF.E164);\n onChange(formatted);\n } else {\n onChange(inputValue);\n }\n } catch (e) {\n setIsValid(false);\n onChange(inputValue);\n }\n };\n\n return (\n <div className={cn(\"w-full flex flex-col gap-1\", className)}>\n <div className={`relative ${(!isValid \|\| error) ? 'phone-input-error' : ''}`}>\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 ? '!border-red-500 !bg-red-50' : '!border-gray-300'\n }`}\n containerClass=\"!w-full\"\n />\n </div>\n \n {(!isValid \|\| error) && (\n <p className=\"text-red-500 text-xs font-medium mt-1\">\n Please enter a valid phone number for this region.\n </p>\n )}\n </div>\n );\n};\n\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","names":["items","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/components/combobox-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<\n TItem = any,\n TMultiple extends boolean \| undefined = false,\n> = Pick<\n AllRootProps<TItem, TMultiple>,\n \| \"value\"\n \| \"onValueChange\"\n \| \"multiple\"\n \| \"disabled\"\n \| \"invalid\"\n \| \"isItemEqualToValue\"\n \| \"inputRef\"\n \| \"readOnly\"\n \| \"name\"\n>;\n\ninterface SelectFieldProps<\n TItem = any,\n TMultiple extends boolean \| undefined = false,\n> extends RootProps<TItem, TMultiple> {\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<\n TItem = any,\n TMultiple extends boolean \| undefined = false,\n>(props: SelectFieldProps<TItem, TMultiple>) {\n const {\n items,\n value,\n onValueChange,\n renderLabel,\n renderOption,\n placeholder,\n multiple,\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, TMultiple>\n value={value}\n onValueChange={onValueChange}\n multiple={multiple}\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 // Handle multiple selection\n if (multiple && Array.isArray(selectedValue)) {\n // For multiple, show MultiSelectedValue by default\n const labels = selectedValue.map((item: TItem) => {\n const label = renderValueLabel(item);\n return typeof label === \"string\" ? label : String(label);\n });\n return (\n <Select.MultiSelectedValue\n selectedValue={labels}\n maxItems={2}\n />\n );\n }\n\n // Single selection - show placeholder if no value\n if (selectedValue == null) {\n return placeholder \|\| null;\n }\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 const ItemComponent = multiple ? Select.MultiItem : Select.Item;\n\n return (\n <ItemComponent key={key} value={item}>\n {renderItemContent(item)}\n </ItemComponent>\n );\n })}\n </Select.List>\n </Select.Content>\n </Select.Root>\n );\n}\n","import as React from \"react\";\nimport { Combobox } from \"@px-ui/core\";\n\ntype AllRootProps<\n TItem = any,\n TMultiple extends boolean \| undefined = false,\n> = React.ComponentProps<typeof Combobox.Root<TItem, TMultiple>>;\n\ntype RootProps<\n TItem = any,\n TMultiple extends boolean \| undefined = false,\n> = Pick<\n AllRootProps<TItem, TMultiple>,\n \| \"items\"\n \| \"loadOptions\"\n \| \"value\"\n \| \"onValueChange\"\n \| \"multiple\"\n \| \"disabled\"\n \| \"invalid\"\n \| \"isItemEqualToValue\"\n \| \"inputRef\"\n \| \"readOnly\"\n>;\n\ninterface ComboboxFieldProps<\n TItem = any,\n TMultiple extends boolean \| undefined = false,\n> extends RootProps<TItem, TMultiple> {\n /*\n Function to render the label in the trigger for the selected item(s)\n * - For single select: receives a single item\n * - For multiple select: receives an array of items\n * If not provided and item has a 'label' property, it will be used automatically\n /\n renderLabel?: TMultiple extends true\n ? (items: TItem[]) => React.ReactNode\n : (item: TItem) => string \| 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 Function to render each chip in ChipsTrigger (multiple selection only)\n * If not provided, renderLabel or auto-detected label will be used\n /\n renderChip?: (item: TItem) => React.ReactNode \| string;\n\n /\n Placeholder text when no value is selected\n /\n placeholder?: string;\n\n /\n Show search input inside the popup instead of in trigger\n * Only applicable when not using searchable trigger\n * @default false\n /\n searchInPopup?: boolean;\n\n /\n Size variant for trigger\n /\n size?: React.ComponentProps<typeof Combobox.SearchableTrigger>[\"size\"];\n\n /\n Width variant for trigger\n /\n widthVariant?: \"enforced\" \| \"full\";\n\n /\n Width variant for the dropdown content\n /\n contentWidthVariant?: \"trigger\" \| \"fit\" \| \"enforced\";\n\n /\n Additional className for the trigger\n /\n triggerClassName?: string;\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 A simplified Combobox component for common use cases.\n * For advanced customization, use the composable Combobox.* components from @px-ui/core.\n \n Features:\n * - Single and multiple selection\n * - Inline search (SearchableTrigger or ChipsTrigger)\n * - Async data loading with loadOptions\n * - Type-safe with full inference\n \n @example\n * // Single select with search\n * <ComboboxField\n * items={items}\n * value={selected}\n * onValueChange={setSelected}\n * placeholder=\"Select an option\"\n * />\n \n @example\n * // Multiple select with chips\n * <ComboboxField\n * items={items}\n * value={selected}\n * onValueChange={setSelected}\n * multiple\n * placeholder=\"Select options\"\n * />\n \n @example\n * // Async loading\n * <ComboboxField\n * loadOptions={loadUsers}\n * value={selected}\n * onValueChange={setSelected}\n * />\n /\nexport function ComboboxField<\n TItem = any,\n TMultiple extends boolean \| undefined = false,\n>(props: ComboboxFieldProps<TItem, TMultiple>) {\n const {\n items,\n loadOptions,\n value,\n onValueChange,\n renderLabel,\n renderOption,\n renderChip,\n placeholder,\n searchInPopup = false,\n multiple,\n disabled,\n invalid,\n isItemEqualToValue,\n size,\n widthVariant,\n contentWidthVariant = \"trigger\",\n triggerClassName,\n contentProps,\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 (single item)\n const renderSingleValueLabel = (item: TItem): React.ReactNode => {\n if (renderLabel && !multiple) {\n return (renderLabel as (item: TItem) => React.ReactNode)(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 (multiple items)\n const renderMultipleValueLabel = (items: TItem[]): React.ReactNode => {\n if (renderLabel && multiple) {\n return (renderLabel as (items: TItem[]) => React.ReactNode)(items);\n }\n // Default: show count\n return `${items.length} selected`;\n };\n\n // Helper to render chip content\n const renderChipContent = (item: TItem): React.ReactNode => {\n if (renderChip) {\n return renderChip(item);\n }\n return renderSingleValueLabel(item);\n };\n\n return (\n <Combobox.Root<TItem, TMultiple>\n items={items}\n loadOptions={loadOptions}\n value={value}\n onValueChange={onValueChange}\n multiple={multiple}\n disabled={disabled}\n invalid={invalid}\n isItemEqualToValue={isItemEqualToValue}\n // @ts-expect-error\n itemToStringLabel={multiple ? undefined : renderLabel}\n inputRef={inputRef}\n readOnly={readOnly}\n >\n {/ If searchInPopup, use regular Trigger (regardless of multiple) /}\n {searchInPopup ? (\n <Combobox.Trigger\n size={size}\n widthVariant={widthVariant}\n className={triggerClassName}\n >\n <Combobox.Value placeholder={placeholder}>\n {(selectedValue: any) => {\n if (selectedValue == null) {\n return null;\n }\n\n // Handle multiple selection\n if (multiple && Array.isArray(selectedValue)) {\n if (selectedValue.length === 0) {\n return null;\n }\n return renderMultipleValueLabel(selectedValue);\n }\n\n // Single selection\n return renderSingleValueLabel(selectedValue);\n }}\n </Combobox.Value>\n </Combobox.Trigger>\n ) : multiple ? (\n / Multiple selection uses ChipsTrigger /\n <Combobox.ChipsTrigger\n placeholder={placeholder}\n size={size}\n widthVariant={widthVariant}\n className={triggerClassName}\n >\n {(item: TItem) => (\n <Combobox.Chip key={getItemKey(item as any, 0)}>\n {renderChipContent(item)}\n </Combobox.Chip>\n )}\n </Combobox.ChipsTrigger>\n ) : (\n / Single selection uses SearchableTrigger /\n <Combobox.SearchableTrigger\n placeholder={placeholder}\n size={size}\n widthVariant={widthVariant}\n className={triggerClassName}\n />\n )}\n\n <Combobox.Content widthVariant={contentWidthVariant} {...contentProps}>\n {/ Search in popup when using regular Trigger /}\n {searchInPopup && <Combobox.Search placeholder={placeholder} />}\n\n <Combobox.List>\n {(item: TItem) => {\n const key = getItemKey(item, 0);\n const ItemComponent = multiple ? Combobox.MultiItem : Combobox.Item;\n\n return (\n <ItemComponent key={key} value={item}>\n {renderItemContent(item)}\n </ItemComponent>\n );\n }}\n </Combobox.List>\n </Combobox.Content>\n </Combobox.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 inputRef={inputRef}\n readOnly={readOnly}\n name={name}\n >\n <Combobox.Trigger\n widthVariant={widthVariant}\n className={triggerClassName}\n size={size}\n >\n <div className=\"flex items-center gap-2\">\n {value && (\n <CurrencyFlag\n countryCode={CURRENCY_FLAG_CODE[value.abbr]}\n className=\"w-fit\"\n />\n )}\n <Combobox.Value placeholder={placeholder}>\n {(currency: Currency) => `${currency.abbr} - ${currency.name}`}\n </Combobox.Value>\n </div>\n </Combobox.Trigger>\n\n <Combobox.Content\n widthVariant={contentWidthVariant}\n empty=\"No currencies found\"\n {...contentProps}\n >\n <Combobox.Search />\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 parsedNumber = phoneUtil.parseAndKeepRawInput(inputValue, data.countryCode);\n const isNumberValid = phoneUtil.isValidNumberForRegion(parsedNumber, data.countryCode);\n \n setIsValid(isNumberValid);\n \n if (isNumberValid) {\n const formatted = phoneUtil.format(parsedNumber, PNF.E164);\n onChange(formatted);\n } else {\n onChange(inputValue);\n }\n } catch (e) {\n setIsValid(false);\n onChange(inputValue);\n }\n };\n\n return (\n <div className={cn(\"w-full flex flex-col gap-1\", className)}>\n <div className={`relative ${(!isValid \|\| error) ? 'phone-input-error' : ''}`}>\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 ? '!border-red-500 !bg-red-50' : '!border-gray-300'\n }`}\n containerClass=\"!w-full\"\n />\n </div>\n \n {(!isValid \|\| error) && (\n <p className=\"text-red-500 text-xs font-medium mt-1\">\n Please enter a valid phone number for this region.\n </p>\n )}\n </div>\n );\n};\n\n"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@px-ui/forms",
-  "version": "9.0.0",
+  "version": "10.0.0",
   "description": "Form components built on top of px-ui-core",
   "type": "module",
   "module": "./dist/index.js",
@@ -41,7 +41,7 @@
     "react-dom": ">=19.0.0",
     "react-hook-form": ">=7.0.0",
     "zod": ">=3.0.0",
-    "@px-ui/core": "4.2.0"
+    "@px-ui/core": "4.3.0"
   },
   "devDependencies": {
     "@hookform/resolvers": "^5.1.1",
@@ -64,7 +64,7 @@
     "vite": "npm:rolldown-vite@^7.2.5",
     "vitest": "^4.0.9",
     "zod": "4.0.0",
-    "@px-ui/core": "4.2.0"
+    "@px-ui/core": "4.3.0"
   },
   "scripts": {
     "lint": "eslint src --ext .ts,.tsx",