@px-ui/forms 6.0.1 → 7.0.0

package/dist/index.d.ts

@@ -1,14 +1,14 @@
 import * as React$1 from "react";
 import { ReactNode } from "react";
-import { Combobox, FileUploadWithUploaderOptions, FileWithUploadStatus, Label, Select, VariantProps } from "@px-ui/core";
+import { Combobox, FileUploadWithUploaderOptions, FileWithUploadStatus, InputGroup, Label, Select, VariantProps } from "@px-ui/core";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
 import "react-phone-input-2/lib/style.css";
 
 //#region src/components/select-field.d.ts
-type AllRootProps$1<TItem = any, TMultiple extends boolean | undefined = false> = React$1.ComponentProps<typeof Select.Root<TItem, TMultiple>>;
-type RootProps$1<TItem = any, TMultiple extends boolean | undefined = false> = Pick<AllRootProps$1<TItem, TMultiple>, "value" | "onValueChange" | "multiple" | "disabled" | "invalid" | "isItemEqualToValue" | "inputRef" | "readOnly" | "name">;
-interface SelectFieldProps<TItem = any, TMultiple extends boolean | undefined = false> extends RootProps$1<TItem, TMultiple> {
+type AllRootProps$2<TItem = any, TMultiple extends boolean | undefined = false> = React$1.ComponentProps<typeof Select.Root<TItem, TMultiple>>;
+type RootProps$2<TItem = any, TMultiple extends boolean | undefined = false> = Pick<AllRootProps$2<TItem, TMultiple>, "value" | "onValueChange" | "multiple" | "disabled" | "invalid" | "isItemEqualToValue" | "inputRef" | "readOnly" | "name">;
+interface SelectFieldProps<TItem = any, TMultiple extends boolean | undefined = false> extends RootProps$2<TItem, TMultiple> {
   /**
    * Array of items to display in the select dropdown
    */
@@ -62,9 +62,9 @@ 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;
 //#endregion
 //#region src/components/combobox-field.d.ts
-type AllRootProps<TItem = any, TMultiple extends boolean | undefined = false> = React$1.ComponentProps<typeof Combobox.Root<TItem, TMultiple>>;
-type RootProps<TItem = any, TMultiple extends boolean | undefined = false> = Pick<AllRootProps<TItem, TMultiple>, "items" | "loadOptions" | "value" | "onValueChange" | "multiple" | "disabled" | "invalid" | "isItemEqualToValue" | "inputRef" | "readOnly">;
-interface ComboboxFieldProps<TItem = any, TMultiple extends boolean | undefined = false> extends RootProps<TItem, TMultiple> {
+type AllRootProps$1<TItem = any, TMultiple extends boolean | undefined = false> = React$1.ComponentProps<typeof Combobox.Root<TItem, TMultiple>>;
+type RootProps$1<TItem = any, TMultiple extends boolean | undefined = false> = Pick<AllRootProps$1<TItem, TMultiple>, "items" | "loadOptions" | "value" | "onValueChange" | "multiple" | "disabled" | "invalid" | "isItemEqualToValue" | "inputRef" | "readOnly">;
+interface ComboboxFieldProps<TItem = any, TMultiple extends boolean | undefined = false> extends RootProps$1<TItem, TMultiple> {
   /**
    * Function to render the label in the trigger for the selected item(s)
    * - For single select: receives a single item
@@ -152,6 +152,103 @@ interface ComboboxFieldProps<TItem = any, TMultiple extends boolean | undefined
  */
 declare function ComboboxField<TItem = any, TMultiple extends boolean | undefined = false>(props: ComboboxFieldProps<TItem, TMultiple>): react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/components/currency-select-field.d.ts
+/**
+ * Currency type representing a currency option
+ */
+interface Currency {
+  /** Unique identifier for the currency */
+  id: string;
+  /** Full currency name (e.g., "United States dollar") */
+  name: string;
+  /** Currency abbreviation (e.g., "USD", "EUR") */
+  abbr: string;
+  /** Currency value/code used for form submission */
+  value: string;
+}
+type AllRootProps = React$1.ComponentProps<typeof Combobox.Root<Currency, false>>;
+type RootProps = Pick<AllRootProps, "value" | "onValueChange" | "disabled" | "invalid" | "inputRef" | "readOnly" | "name">;
+interface CurrencySelectFieldProps extends RootProps {
+  /**
+   * Array of currency options to display
+   */
+  currencies: ReadonlyArray<Currency>;
+  /**
+   * Placeholder text when no currency is selected
+   * @default "Select currency"
+   */
+  placeholder?: string;
+  /**
+   * Size variant for the trigger
+   */
+  size?: React$1.ComponentProps<typeof InputGroup.Root>["size"];
+  /**
+   * Width variant for trigger
+   */
+  widthVariant?: React$1.ComponentProps<typeof InputGroup.Root>["widthVariant"];
+  /**
+   * Width variant for the dropdown content
+   */
+  contentWidthVariant?: React$1.ComponentProps<typeof Combobox.Content>["widthVariant"];
+  /**
+   * Additional className for the trigger
+   */
+  triggerClassName?: string;
+  /**
+   * Whether the select is loading
+   */
+  isLoading?: boolean;
+  /**
+   * Additional props for Combobox.Content
+   */
+  contentProps?: Omit<React$1.ComponentProps<typeof Combobox.Content>, "children" | "widthVariant" | "empty">;
+}
+/**
+ * A currency select component with search functionality and flag display.
+ * Country flags are automatically displayed based on the currency abbreviation
+ * using the built-in CURRENCY_FLAG_CODE mapping.
+ *
+ * @example
+ * ```tsx
+ * const currencies = [
+ *   { id: "1", abbr: "USD", name: "United States dollar", value: "USD" },
+ *   { id: "2", abbr: "EUR", name: "Euro", value: "EUR" },
+ *   { id: "3", abbr: "GBP", name: "British Pound", value: "GBP" },
+ * ];
+ *
+ * <CurrencySelectField
+ *   currencies={currencies}
+ *   value={selectedCurrency}
+ *   onValueChange={setSelectedCurrency}
+ *   placeholder="Select currency"
+ * />
+ * ```
+ */
+declare function CurrencySelectField({
+  currencies,
+  value,
+  onValueChange,
+  placeholder,
+  disabled,
+  invalid,
+  name,
+  size,
+  widthVariant,
+  contentWidthVariant,
+  triggerClassName,
+  isLoading,
+  contentProps,
+  inputRef,
+  readOnly
+}: CurrencySelectFieldProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/constants/currency-flag-code.d.ts
+/**
+ * Mapping of currency abbreviations to country codes for flag display.
+ * Used internally by CurrencySelectField to display country flags.
+ */
+declare const CURRENCY_FLAG_CODE: Record<string, string>;
+//#endregion
 //#region src/components/file-upload-field.d.ts
 interface FileUploadFieldProps extends Omit<FileUploadWithUploaderOptions, "initialFiles"> {
   /** Variant determines the visual layout */
@@ -308,5 +405,5 @@ declare const PhoneInput: ({
   className
 }: PhoneInputProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
-export { ComboboxField, field_d_exports as Field, FileUploadField, FormCheckbox, FormInput, FormTextarea, PhoneInput, SelectField };
+export { CURRENCY_FLAG_CODE, ComboboxField, type Currency, CurrencySelectField, type CurrencySelectFieldProps, field_d_exports as Field, FileUploadField, FormCheckbox, FormInput, FormTextarea, PhoneInput, SelectField };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/components/select-field.tsx","../src/components/combobox-field.tsx","../src/components/file-upload-field.tsx","../src/components/field.tsx","../src/components/form.tsx","../src/components/phone-input.tsx"],"sourcesContent":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/components/select-field.tsx","../src/components/combobox-field.tsx","../src/components/currency-select-field.tsx","../src/constants/currency-flag-code.ts","../src/components/file-upload-field.tsx","../src/components/field.tsx","../src/components/form.tsx","../src/components/phone-input.tsx"],"sourcesContent":[],"mappings":"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"}

package/dist/index.js

@@ -1,8 +1,9 @@
 import { t as __export } from "./chunk-BAz01cYq.js";
 import * as React$1 from "react";
 import { useMemo, useState } from "react";
-import { Checkbox, Combobox, FileIcon, FileUpload, Input, Label, Select, Separator, Textarea, UploadIcon, cn, cva, useFileUpload } from "@px-ui/core";
+import { Checkbox, ChevronDownIcon, Combobox, FileIcon, FileUpload, Input, InputGroup, Label, Select, Separator, Textarea, UploadIcon, cn, cva, useFileUpload } from "@px-ui/core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import ReactCountryFlag from "react-country-flag";
 import { Controller } from "react-hook-form";
 import PhoneInputLib from "react-phone-input-2";
 import "react-phone-input-2/lib/style.css";
@@ -222,6 +223,282 @@ function ComboboxField(props) {
 	});
 }
 
+//#endregion
+//#region src/constants/currency-flag-code.ts
+/**
+* Mapping of currency abbreviations to country codes for flag display.
+* Used internally by CurrencySelectField to display country flags.
+*/
+const CURRENCY_FLAG_CODE = {
+	USD: "US",
+	CAD: "CA",
+	EUR: "EU",
+	GBP: "GB",
+	INR: "IN",
+	AFN: "AF",
+	ALL: "AL",
+	ANG: "MY",
+	ARS: "AR",
+	AUD: "AU",
+	AZN: "AZ",
+	BBD: "BB",
+	BGN: "BG",
+	BMD: "BM",
+	BOB: "BO",
+	BRL: "BR",
+	BSD: "BS",
+	BWP: "BW",
+	BYN: "BY",
+	CHF: "CH",
+	CLP: "CL",
+	COP: "CO",
+	CRC: "CR",
+	CUP: "CU",
+	CZK: "CZ",
+	DKK: "DK",
+	DOP: "DO",
+	EGP: "EG",
+	FJD: "FJ",
+	GGP: "GG",
+	GHS: "US",
+	GIP: "GI",
+	GTQ: "GT",
+	GYD: "GY",
+	HKD: "HK",
+	HNL: "HN",
+	HRK: "HR",
+	HUF: "HU",
+	ILS: "IL",
+	IMP: "IM",
+	IRR: "IR",
+	ISK: "IS",
+	JEP: "JE",
+	JMD: "JM",
+	JPY: "JP",
+	KHR: "KM",
+	KPW: "KP",
+	KRW: "KR",
+	KYD: "KY",
+	LAK: "LA",
+	LBP: "LB",
+	LKR: "LK",
+	LRD: "LR",
+	MKD: "MK",
+	MNT: "MN",
+	MXN: "MX",
+	MYR: "MY",
+	MZN: "MZ",
+	NGN: "NG",
+	NIO: "NI",
+	NOK: "NO",
+	NPR: "NP",
+	NZD: "NZ",
+	PAB: "PA",
+	PEN: "PE",
+	PHP: "PH",
+	PKR: "PK",
+	PLN: "PL",
+	PYG: "PY",
+	QAR: "QA",
+	RON: "RO",
+	RSD: "RS",
+	RUB: "RU",
+	SAR: "SA",
+	SBD: "SB",
+	SCR: "SC",
+	SEK: "SE",
+	SGD: "SG",
+	SHP: "SH",
+	SOS: "SO",
+	SRD: "SR",
+	SVC: "SV",
+	THB: "TH",
+	TRY: "TR",
+	TVD: "TV",
+	TWD: "TW",
+	UAH: "UA",
+	UYU: "UY",
+	UZS: "UZ",
+	VEF: "VE",
+	VND: "VN",
+	XCD: "EC",
+	YEN: "YE",
+	YER: "YE",
+	ZAR: "ZA",
+	ZWD: "ZW",
+	AED: "AE",
+	AMD: "AD",
+	BDT: "BD",
+	BTN: "BT",
+	AOA: "AO",
+	AWG: "AW",
+	BAM: "BA",
+	BHD: "BH",
+	BIF: "BI",
+	BND: "BN",
+	BZD: "BZ",
+	CNY: "CN",
+	CVE: "CV",
+	DJF: "DJ",
+	DZD: "DZ",
+	ETB: "ET",
+	FKP: "FK",
+	GEL: "GE",
+	GMD: "GM",
+	GNF: "GN",
+	HTG: "HT",
+	IDR: "ID",
+	IQD: "IQ",
+	JOD: "JO",
+	KES: "KE",
+	KGS: "KG",
+	KMF: "KM",
+	KWD: "KW",
+	MWK: "MW",
+	ZMW: "ZM",
+	LSL: "LS",
+	LYD: "LY",
+	MAD: "MA",
+	MDL: "MD",
+	MGA: "MG",
+	MMK: "MM",
+	KZT: "KZ",
+	MOP: "MO",
+	MRU: "MR",
+	MUR: "MU",
+	MVR: "MV",
+	NAD: "NA",
+	OMR: "OM",
+	PGK: "PG",
+	RWF: "RW",
+	SDG: "SD",
+	SLL: "SL",
+	STD: "ST",
+	SYP: "SY",
+	SZL: "SZ",
+	TJS: "TJ",
+	TMT: "TM",
+	TND: "TN",
+	TOP: "TO",
+	TTD: "TT",
+	TZS: "TZ",
+	UGX: "UG",
+	VES: "VE",
+	VUV: "VU",
+	WST: "WS",
+	XAF: "CF",
+	XOF: "NG",
+	XPF: "CF"
+};
+
+//#endregion
+//#region src/components/currency-select-field.tsx
+const { BaseCombobox } = Combobox;
+function CurrencyFlag({ countryCode, className }) {
+	if (!countryCode) return /* @__PURE__ */ jsx("span", { className: cn("inline-block w-4", className) });
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative -top-px flex shrink-0 items-center", className),
+		children: /* @__PURE__ */ jsx(ReactCountryFlag, {
+			countryCode,
+			svg: true,
+			style: {
+				width: "14px",
+				height: "14px"
+			},
+			"aria-label": `Flag of ${countryCode}`
+		})
+	});
+}
+function CurrencyOptionContent({ currency }) {
+	const countryCode = CURRENCY_FLAG_CODE[currency.abbr];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2.5",
+		children: [/* @__PURE__ */ jsx(CurrencyFlag, { countryCode }), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
+			className: "text-ppx-foreground font-medium",
+			children: currency.abbr
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "text-ppx-muted-foreground",
+			children: [" - ", currency.name]
+		})] })]
+	});
+}
+/**
+* A currency select component with search functionality and flag display.
+* Country flags are automatically displayed based on the currency abbreviation
+* using the built-in CURRENCY_FLAG_CODE mapping.
+*
+* @example
+* ```tsx
+* const currencies = [
+*   { id: "1", abbr: "USD", name: "United States dollar", value: "USD" },
+*   { id: "2", abbr: "EUR", name: "Euro", value: "EUR" },
+*   { id: "3", abbr: "GBP", name: "British Pound", value: "GBP" },
+* ];
+*
+* <CurrencySelectField
+*   currencies={currencies}
+*   value={selectedCurrency}
+*   onValueChange={setSelectedCurrency}
+*   placeholder="Select currency"
+* />
+* ```
+*/
+function CurrencySelectField({ currencies, value, onValueChange, placeholder = "Select currency", disabled, invalid, name, size, widthVariant, contentWidthVariant = "trigger", triggerClassName, isLoading, contentProps, inputRef, readOnly }) {
+	const triggerRef = React$1.useRef(null);
+	const itemToStringLabel = React$1.useCallback((currency) => `${currency.abbr} - ${currency.name}`, []);
+	return /* @__PURE__ */ jsxs(Combobox.Root, {
+		items: currencies,
+		value,
+		onValueChange,
+		disabled,
+		invalid,
+		isLoading,
+		isItemEqualToValue: (item, val) => item.id === val.id,
+		itemToStringLabel,
+		inputRef,
+		readOnly,
+		name,
+		children: [/* @__PURE__ */ jsxs(InputGroup.Root, {
+			size,
+			widthVariant,
+			disabled,
+			ref: triggerRef,
+			className: triggerClassName,
+			children: [
+				value && /* @__PURE__ */ jsx(InputGroup.Addon, {
+					align: "inline-start",
+					className: "pl-3 pr-0",
+					children: /* @__PURE__ */ jsx(CurrencyFlag, { countryCode: CURRENCY_FLAG_CODE[value.abbr] })
+				}),
+				/* @__PURE__ */ jsx(BaseCombobox.Input, { render: (inputProps) => /* @__PURE__ */ jsx(InputGroup.Input, {
+					...inputProps,
+					invalid,
+					placeholder
+				}) }),
+				/* @__PURE__ */ jsx(InputGroup.Addon, {
+					align: "inline-end",
+					className: "gap-0.5",
+					children: /* @__PURE__ */ jsx(BaseCombobox.Trigger, { render: (triggerProps) => /* @__PURE__ */ jsx(InputGroup.Button, {
+						size: "icon-xs",
+						"aria-label": "Open popup",
+						...triggerProps,
+						children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+					}) })
+				})
+			]
+		}), /* @__PURE__ */ jsx(Combobox.Content, {
+			widthVariant: contentWidthVariant,
+			empty: "No currencies found",
+			positionerProps: { anchor: triggerRef.current },
+			...contentProps,
+			children: /* @__PURE__ */ jsx(Combobox.List, { children: (currency) => /* @__PURE__ */ jsx(Combobox.Item, {
+				value: currency,
+				children: /* @__PURE__ */ jsx(CurrencyOptionContent, { currency })
+			}, currency.id) })
+		})]
+	});
+}
+
 //#endregion
 //#region src/components/file-upload-field.tsx
 function FileUploadField({ variant = "dropzone", size = "default", dropzoneText = "Paste Or Drag & Drop Files Here", buttonText = "Browse for files", showFileList = true, showImageGrid = false, initialFiles = [], disabled = false, className, children, renderFileItem, onError, maxFiles, maxSize, accept, multiple = false, onFilesChange, onFilesAdded, upload }) {
@@ -588,5 +865,5 @@ const PhoneInput = ({ value, onChange, country = "us", error, placeholder, disab
 };
 
 //#endregion
-export { ComboboxField, field_exports as Field, FileUploadField, FormCheckbox, FormInput, FormTextarea, PhoneInput, SelectField };
+export { CURRENCY_FLAG_CODE, ComboboxField, CurrencySelectField, field_exports as Field, FileUploadField, FormCheckbox, FormInput, FormTextarea, PhoneInput, SelectField };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["items","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/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","import * as React from \"react\";\nimport {\n  FileIcon,\n  UploadIcon,\n  FileUpload,\n  useFileUpload,\n  type FileUploadWithUploaderOptions,\n  type FileWithPreview,\n  type FileWithUploadStatus,\n} from \"@px-ui/core\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface FileUploadFieldProps\n  extends Omit<FileUploadWithUploaderOptions, \"initialFiles\"> {\n  /** Variant determines the visual layout */\n  variant?: \"dropzone\" | \"button\" | \"compact\";\n  /** Size of the dropzone (only applies to dropzone variant) */\n  size?: \"sm\" | \"default\" | \"lg\";\n  /** Text displayed in the dropzone */\n  dropzoneText?: string;\n  /** Text for the browse/upload button */\n  buttonText?: string;\n  /** Show file list below the dropzone */\n  showFileList?: boolean;\n  /** Show image grid instead of list for image files */\n  showImageGrid?: 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  /** Custom content to render inside the dropzone */\n  children?: React.ReactNode;\n  /** Render prop for custom file item rendering */\n  renderFileItem?: (\n    file: FileWithUploadStatus,\n    actions: { remove: () => void; retry: () => void },\n  ) => React.ReactNode;\n  /** Error handler */\n  onError?: (error: { type: string; message: string; files?: File[] }) => void;\n}\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\nexport function FileUploadField({\n  variant = \"dropzone\",\n  size = \"default\",\n  dropzoneText = \"Paste Or Drag & Drop Files Here\",\n  buttonText = \"Browse for files\",\n  showFileList = true,\n  showImageGrid = false,\n  initialFiles = [],\n  disabled = false,\n  className,\n  children,\n  renderFileItem,\n  onError,\n  // Hook options\n  maxFiles,\n  maxSize,\n  accept,\n  multiple = false,\n  onFilesChange,\n  onFilesAdded,\n  upload,\n}: FileUploadFieldProps) {\n  const [state, actions] = 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: onFilesChange as (files: FileWithPreview[]) => void,\n    onFilesAdded: onFilesAdded as (files: FileWithPreview[]) => void,\n    upload,\n  });\n\n  const { files, isDragging, errors, isUploading } = state;\n  const {\n    addFiles,\n    removeFile,\n    clearFiles,\n    handleDragEnter,\n    handleDragLeave,\n    handleDragOver,\n    handleDrop,\n    openFileDialog,\n    getInputProps,\n    retryUpload,\n  } = actions;\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  // Common props for FileUpload.Root\n  const rootProps = {\n    files,\n    addFiles,\n    removeFile,\n    clearFiles,\n    retryUpload,\n    openFileDialog,\n    getInputProps,\n    handleDragEnter,\n    handleDragLeave,\n    handleDragOver,\n    handleDrop,\n    isDragActive: isDragging,\n    isUploading,\n    accept,\n    multiple,\n    disabled,\n  };\n\n  // Render file item using primitives or custom render prop\n  const renderDefaultFileItem = (file: FileWithUploadStatus) => {\n    if (renderFileItem) {\n      return renderFileItem(file, {\n        remove: () => removeFile(file.id),\n        retry: () => retryUpload(file.id),\n      });\n    }\n\n    const isImage = file.file.type?.startsWith(\"image/\") ?? false;\n\n    return (\n      <FileUpload.Item key={file.id} file={file}>\n        <FileUpload.ItemPreview\n          fallback={\n            isImage ? undefined : (\n              <FileIcon className=\"text-ppx-neutral-10 size-5\" />\n            )\n          }\n        />\n\n        <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n          <FileUpload.ItemName />\n\n          <div className=\"flex items-center gap-2\">\n            <FileUpload.ItemSize />\n            {file.status === \"uploading\" && (\n              <FileUpload.ItemProgress className=\"flex-1\" />\n            )}\n          </div>\n\n          <FileUpload.ItemError />\n        </div>\n\n        <div className=\"flex shrink-0 items-center gap-1\">\n          <FileUpload.ItemStatus />\n          <FileUpload.ItemRetry />\n          <FileUpload.ItemRemove />\n        </div>\n      </FileUpload.Item>\n    );\n  };\n\n  // Render image grid item using primitives\n  const renderImageGridItem = (file: FileWithUploadStatus) => (\n    <FileUpload.ImageGridItem key={file.id} file={file} showStatusOverlay />\n  );\n\n  // Render based on variant\n  if (variant === \"button\" || variant === \"compact\") {\n    return (\n      <FileUpload.Root {...rootProps} className={className}>\n        <div className=\"flex items-center gap-3\">\n          <FileUpload.Trigger\n            variant={variant === \"compact\" ? \"outline\" : \"default\"}\n            size={variant === \"compact\" ? \"sm\" : \"default\"}\n            showUploadingState\n          >\n            <UploadIcon className=\"size-4\" />\n            {buttonText}\n          </FileUpload.Trigger>\n\n          {variant === \"compact\" && files.length > 0 && (\n            <span className=\"text-ppx-neutral-12 truncate text-sm\">\n              {files.length === 1\n                ? files[0].file.name\n                : `${files.length} files selected`}\n            </span>\n          )}\n        </div>\n\n        {/* File List */}\n        {showFileList && files.length > 0 && variant !== \"compact\" && (\n          <FileUpload.ItemList>\n            {files.map(renderDefaultFileItem)}\n          </FileUpload.ItemList>\n        )}\n      </FileUpload.Root>\n    );\n  }\n\n  // Dropzone variant (default)\n  return (\n    <FileUpload.Root {...rootProps} className={className}>\n      <FileUpload.Dropzone\n        size={size}\n        dropzoneText={dropzoneText}\n        browseText={buttonText}\n        hideDefaultContent={!!children}\n      >\n        {children}\n      </FileUpload.Dropzone>\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 or Image Grid */}\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.ClearButton\n                size=\"sm\"\n                className=\"text-ppx-red-5 hover:text-ppx-red-6\"\n              >\n                Remove all\n              </FileUpload.ClearButton>\n            )}\n          </div>\n\n          {showImageGrid ? (\n            <FileUpload.ImageGrid>\n              {files.map(renderImageGridItem)}\n            </FileUpload.ImageGrid>\n          ) : (\n            <FileUpload.ItemList>\n              {files.map(renderDefaultFileItem)}\n            </FileUpload.ItemList>\n          )}\n        </div>\n      )}\n    </FileUpload.Root>\n  );\n}\n\nexport type {\n  FileWithUploadStatus,\n  UploadConfig,\n  FileUploadWithUploaderOptions,\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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"}
+{"version":3,"file":"index.js","names":["items","CURRENCY_FLAG_CODE: Record<string, string>","React","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, ChevronDownIcon } from \"@px-ui/core\";\nimport ReactCountryFlag from \"react-country-flag\";\nimport { CURRENCY_FLAG_CODE } from \"../constants/currency-flag-code\";\nconst { BaseCombobox } = Combobox;\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  const triggerRef = React.useRef<HTMLDivElement>(null);\n\n  // Convert currency to string label for accessibility and input\n  const itemToStringLabel = React.useCallback(\n    (currency: Currency) => `${currency.abbr} - ${currency.name}`,\n    [],\n  );\n\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={itemToStringLabel}\n      inputRef={inputRef}\n      readOnly={readOnly}\n      name={name}\n    >\n      <InputGroup.Root\n        size={size}\n        widthVariant={widthVariant}\n        disabled={disabled}\n        ref={triggerRef}\n        className={triggerClassName}\n      >\n        {value && (\n          <InputGroup.Addon align=\"inline-start\" className=\"pl-3 pr-0\">\n            <CurrencyFlag countryCode={CURRENCY_FLAG_CODE[value.abbr]} />\n          </InputGroup.Addon>\n        )}\n\n        <BaseCombobox.Input\n          render={(inputProps: React.ComponentProps<\"input\">) => (\n            <InputGroup.Input\n              {...inputProps}\n              invalid={invalid}\n              placeholder={placeholder}\n            />\n          )}\n        />\n        <InputGroup.Addon align=\"inline-end\" className=\"gap-0.5\">\n          <BaseCombobox.Trigger\n            render={(triggerProps: React.ComponentProps<\"button\">) => (\n              <InputGroup.Button\n                size=\"icon-xs\"\n                aria-label=\"Open popup\"\n                {...triggerProps}\n              >\n                <ChevronDownIcon />\n              </InputGroup.Button>\n            )}\n          />\n        </InputGroup.Addon>\n      </InputGroup.Root>\n\n      <Combobox.Content\n        widthVariant={contentWidthVariant}\n        empty=\"No currencies found\"\n        positionerProps={{ anchor: triggerRef.current }}\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  FileIcon,\n  UploadIcon,\n  FileUpload,\n  useFileUpload,\n  type FileUploadWithUploaderOptions,\n  type FileWithPreview,\n  type FileWithUploadStatus,\n} from \"@px-ui/core\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface FileUploadFieldProps\n  extends Omit<FileUploadWithUploaderOptions, \"initialFiles\"> {\n  /** Variant determines the visual layout */\n  variant?: \"dropzone\" | \"button\" | \"compact\";\n  /** Size of the dropzone (only applies to dropzone variant) */\n  size?: \"sm\" | \"default\" | \"lg\";\n  /** Text displayed in the dropzone */\n  dropzoneText?: string;\n  /** Text for the browse/upload button */\n  buttonText?: string;\n  /** Show file list below the dropzone */\n  showFileList?: boolean;\n  /** Show image grid instead of list for image files */\n  showImageGrid?: 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  /** Custom content to render inside the dropzone */\n  children?: React.ReactNode;\n  /** Render prop for custom file item rendering */\n  renderFileItem?: (\n    file: FileWithUploadStatus,\n    actions: { remove: () => void; retry: () => void },\n  ) => React.ReactNode;\n  /** Error handler */\n  onError?: (error: { type: string; message: string; files?: File[] }) => void;\n}\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\nexport function FileUploadField({\n  variant = \"dropzone\",\n  size = \"default\",\n  dropzoneText = \"Paste Or Drag & Drop Files Here\",\n  buttonText = \"Browse for files\",\n  showFileList = true,\n  showImageGrid = false,\n  initialFiles = [],\n  disabled = false,\n  className,\n  children,\n  renderFileItem,\n  onError,\n  // Hook options\n  maxFiles,\n  maxSize,\n  accept,\n  multiple = false,\n  onFilesChange,\n  onFilesAdded,\n  upload,\n}: FileUploadFieldProps) {\n  const [state, actions] = 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: onFilesChange as (files: FileWithPreview[]) => void,\n    onFilesAdded: onFilesAdded as (files: FileWithPreview[]) => void,\n    upload,\n  });\n\n  const { files, isDragging, errors, isUploading } = state;\n  const {\n    addFiles,\n    removeFile,\n    clearFiles,\n    handleDragEnter,\n    handleDragLeave,\n    handleDragOver,\n    handleDrop,\n    openFileDialog,\n    getInputProps,\n    retryUpload,\n  } = actions;\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  // Common props for FileUpload.Root\n  const rootProps = {\n    files,\n    addFiles,\n    removeFile,\n    clearFiles,\n    retryUpload,\n    openFileDialog,\n    getInputProps,\n    handleDragEnter,\n    handleDragLeave,\n    handleDragOver,\n    handleDrop,\n    isDragActive: isDragging,\n    isUploading,\n    accept,\n    multiple,\n    disabled,\n  };\n\n  // Render file item using primitives or custom render prop\n  const renderDefaultFileItem = (file: FileWithUploadStatus) => {\n    if (renderFileItem) {\n      return renderFileItem(file, {\n        remove: () => removeFile(file.id),\n        retry: () => retryUpload(file.id),\n      });\n    }\n\n    const isImage = file.file.type?.startsWith(\"image/\") ?? false;\n\n    return (\n      <FileUpload.Item key={file.id} file={file}>\n        <FileUpload.ItemPreview\n          fallback={\n            isImage ? undefined : (\n              <FileIcon className=\"text-ppx-neutral-10 size-5\" />\n            )\n          }\n        />\n\n        <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n          <FileUpload.ItemName />\n\n          <div className=\"flex items-center gap-2\">\n            <FileUpload.ItemSize />\n            {file.status === \"uploading\" && (\n              <FileUpload.ItemProgress className=\"flex-1\" />\n            )}\n          </div>\n\n          <FileUpload.ItemError />\n        </div>\n\n        <div className=\"flex shrink-0 items-center gap-1\">\n          <FileUpload.ItemStatus />\n          <FileUpload.ItemRetry />\n          <FileUpload.ItemRemove />\n        </div>\n      </FileUpload.Item>\n    );\n  };\n\n  // Render image grid item using primitives\n  const renderImageGridItem = (file: FileWithUploadStatus) => (\n    <FileUpload.ImageGridItem key={file.id} file={file} showStatusOverlay />\n  );\n\n  // Render based on variant\n  if (variant === \"button\" || variant === \"compact\") {\n    return (\n      <FileUpload.Root {...rootProps} className={className}>\n        <div className=\"flex items-center gap-3\">\n          <FileUpload.Trigger\n            variant={variant === \"compact\" ? \"outline\" : \"default\"}\n            size={variant === \"compact\" ? \"sm\" : \"default\"}\n            showUploadingState\n          >\n            <UploadIcon className=\"size-4\" />\n            {buttonText}\n          </FileUpload.Trigger>\n\n          {variant === \"compact\" && files.length > 0 && (\n            <span className=\"text-ppx-neutral-12 truncate text-sm\">\n              {files.length === 1\n                ? files[0].file.name\n                : `${files.length} files selected`}\n            </span>\n          )}\n        </div>\n\n        {/* File List */}\n        {showFileList && files.length > 0 && variant !== \"compact\" && (\n          <FileUpload.ItemList>\n            {files.map(renderDefaultFileItem)}\n          </FileUpload.ItemList>\n        )}\n      </FileUpload.Root>\n    );\n  }\n\n  // Dropzone variant (default)\n  return (\n    <FileUpload.Root {...rootProps} className={className}>\n      <FileUpload.Dropzone\n        size={size}\n        dropzoneText={dropzoneText}\n        browseText={buttonText}\n        hideDefaultContent={!!children}\n      >\n        {children}\n      </FileUpload.Dropzone>\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 or Image Grid */}\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.ClearButton\n                size=\"sm\"\n                className=\"text-ppx-red-5 hover:text-ppx-red-6\"\n              >\n                Remove all\n              </FileUpload.ClearButton>\n            )}\n          </div>\n\n          {showImageGrid ? (\n            <FileUpload.ImageGrid>\n              {files.map(renderImageGridItem)}\n            </FileUpload.ImageGrid>\n          ) : (\n            <FileUpload.ItemList>\n              {files.map(renderDefaultFileItem)}\n            </FileUpload.ItemList>\n          )}\n        </div>\n      )}\n    </FileUpload.Root>\n  );\n}\n\nexport type {\n  FileWithUploadStatus,\n  UploadConfig,\n  FileUploadWithUploaderOptions,\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

@@ -1,6 +1,6 @@
 {
   "name": "@px-ui/forms",
-  "version": "6.0.1",
+  "version": "7.0.0",
   "description": "Form components built on top of px-ui-core",
   "type": "module",
   "module": "./dist/index.js",
@@ -37,10 +37,11 @@
     "@hookform/resolvers": ">=5.0.0",
     "@tanstack/react-query": ">=5.0.0",
     "react": ">=19.0.0",
+    "react-country-flag": ">=3.0.0",
     "react-dom": ">=19.0.0",
     "react-hook-form": ">=7.0.0",
     "zod": ">=3.0.0",
-    "@px-ui/core": "3.1.1"
+    "@px-ui/core": "4.0.0"
   },
   "devDependencies": {
     "@hookform/resolvers": "^5.1.1",
@@ -55,6 +56,7 @@
     "@vitejs/plugin-react": "^5.1.1",
     "happy-dom": "^20.0.10",
     "react": "19.2.0",
+    "react-country-flag": "^3.1.0",
     "react-dom": "19.2.0",
     "react-hook-form": "^7.67.0",
     "tsdown": "^0.16.4",
@@ -62,7 +64,7 @@
     "vite": "npm:rolldown-vite@^7.2.5",
     "vitest": "^4.0.9",
     "zod": "4.0.0",
-    "@px-ui/core": "3.1.1"
+    "@px-ui/core": "4.0.0"
   },
   "scripts": {
     "lint": "eslint src --ext .ts,.tsx",