@arkyn/components 3.0.1-beta.99 → 3.0.3

package/dist/components/phoneInput/index.d.ts

@@ -1,127 +1,106 @@
 import { countries } from "@arkyn/templates";
 type PhoneInputProps = {
+    /** Optional HTML id for the visible phone text input. */
     id?: string;
+    /** Disables all interactions. @default false */
     disabled?: boolean;
+    /** Prevents value changes while keeping the current value visible. @default false */
     readOnly?: boolean;
+    /** Validation error message (overrides the `useForm` context error for this field). */
     errorMessage?: string;
+    /** Optional label text displayed above the input. */
     label?: string;
+    /** Displays an asterisk on the label to signal a required field. */
     showAsterisk?: boolean;
+    /** Shows a loading state and disables interactions. @default false */
     isLoading?: boolean;
+    /**
+     * Input size.
+     * @default "md"
+     */
     size?: "md" | "lg";
+    /**
+     * Visual style variant.
+     * - `solid`: filled background.
+     * - `outline`: bordered, transparent background.
+     * @default "solid"
+     */
     variant?: "solid" | "outline";
+    /** Additional CSS class applied to the field wrapper. */
     className?: string;
+    /** Uncontrolled default phone value (numeric string with or without country code). @default "" */
     defaultValue?: string;
+    /** Text displayed when no country matches the search query. @default "Nenhum país encontrado" */
     notFoundCountryText?: string;
+    /** Field name for form submission (stored as numeric string with country code). Required. */
     name: string;
+    /** Placeholder for the country search input. @default "Pesquisar país" */
     searchCountryPlaceholder?: string;
-    defaultCountry?: (typeof countries)[number]["iso"];
+    /** ISO 3166-1 alpha-2 code of the initially selected country. @default "BR" */
+    defaultCountryIso?: (typeof countries)[number]["iso"];
+    /** Callback fired on value change. Receives a numeric string prefixed with the country dial code. */
     onChange?: (e: string) => void;
+    /** Controlled phone value (without country code). */
+    value?: string;
+    /** When true, skips `FieldTemplate` wrapper (label and error text). @default false */
+    unShowFieldTemplate?: boolean;
+    /**
+     * Layout direction forwarded to `FieldTemplate`.
+     * @default "vertical"
+     */
+    orientation?: "horizontal" | "vertical" | "horizontalReverse";
 };
 /**
- * PhoneInput component - used for international phone number input with country selection and automatic formatting
+ * PhoneInput — phone number field with an integrated country selector and automatic mask formatting.
  *
- * @param props - PhoneInput component properties
- * @param props.name - Required field name for form handling and phone input identification
- * @param props.label - Optional label text to display above the phone input
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
- * @param props.errorMessage - Error message to display below the phone input
- * @param props.size - Size variant of the phone input. Default: "md"
- * @param props.variant - Visual variant of the phone input. Default: "solid"
- * @param props.defaultValue - Default phone number value for the input
- * @param props.defaultCountry - Default country ISO code to be selected. Uses country index 30 if not provided
- * @param props.disabled - Whether the phone input is disabled. Default: false
- * @param props.readOnly - Whether the phone input is read-only. Default: false
- * @param props.isLoading - Whether the phone input is in loading state. Default: false
- * @param props.className - Additional CSS classes for styling
- * @param props.id - Optional unique identifier for the input
- * @param props.searchCountryPlaceholder - Placeholder text for country search field. Default: "Pesquisar país"
- * @param props.notFoundCountryText - Text displayed when no countries match the search. Default: "Nenhum país encontrado"
- * @param props.onChange - Callback function called when phone number changes, receives the formatted value with country code
+ * The visible input is masked according to the selected country's phone format.
+ * The hidden `<input>` stores a numeric string prefixed with the country dial code for form submission.
+ * Integrates with `useForm` to display validation errors by field name.
  *
- * @returns PhoneInput JSX element wrapped in FieldWrapper with country selector, masked input, and validation
+ * @param props.name - Field name for form submission. Required.
+ * @param props.label - Label text displayed above the input.
+ * @param props.showAsterisk - Appends `*` to the label.
+ * @param props.errorMessage - Validation error message.
+ * @param props.size - Input size (`md` | `lg`). Default: "md"
+ * @param props.variant - Visual style variant. Default: "solid"
+ * @param props.disabled - Disables all interactions. Default: false
+ * @param props.readOnly - Prevents editing. Default: false
+ * @param props.isLoading - Shows loading state and disables interactions. Default: false
+ * @param props.defaultValue - Uncontrolled default phone value.
+ * @param props.value - Controlled phone value (without country code).
+ * @param props.onChange - Callback fired on change — receives numeric string with country code.
+ * @param props.defaultCountryIso - ISO code of the initially selected country. Default: "BR"
+ * @param props.searchCountryPlaceholder - Placeholder for country search. Default: "Pesquisar país"
+ * @param props.notFoundCountryText - Text shown when no country matches. Default: "Nenhum país encontrado"
+ * @param props.orientation - Layout direction. Default: "vertical"
+ * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
+ *
+ * @returns PhoneInput JSX element wrapped in `FieldTemplate`.
  *
  * @example
  * ```tsx
- * // Basic phone input
- * <PhoneInput name="phone" />
+ * // Basic
+ * <PhoneInput name="phone" label="Phone" />
  *
- * // Phone input with label and default country
+ * // Controlled with outline variant
  * <PhoneInput
  *   name="contactPhone"
  *   label="Contact Phone"
- *   defaultCountry="US"
- *   showAsterisk
- * />
- *
- * // Phone input with validation and custom text
- * <PhoneInput
- *   name="businessPhone"
- *   label="Business Phone"
- *   errorMessage="Please enter a valid phone number"
- *   searchCountryPlaceholder="Search country..."
- *   notFoundCountryText="Country not found"
- * />
- *
- * // Large phone input with default value
- * <PhoneInput
- *   name="emergencyContact"
- *   label="Emergency Contact"
- *   size="lg"
+ *   value={phone}
+ *   onChange={(v) => setPhone(v)}
  *   variant="outline"
- *   defaultValue="+1 (555) 123-4567"
- *   defaultCountry="US"
+ *   size="lg"
  * />
  *
- * // Controlled phone input with callback
+ * // Pre-selected country (US)
  * <PhoneInput
- *   name="userPhone"
- *   label="Your Phone Number"
- *   onChange={(formattedPhone) => {
- *     console.log('Phone number:', formattedPhone);
- *     setPhoneNumber(formattedPhone);
- *   }}
- *   defaultCountry="BR"
+ *   name="phone"
+ *   label="Phone"
+ *   defaultCountryIso="US"
  *   showAsterisk
  * />
- *
- * // Read-only phone input for display
- * <PhoneInput
- *   name="displayPhone"
- *   label="Registered Phone"
- *   defaultValue="+55 11 99999-9999"
- *   readOnly
- *   variant="outline"
- * />
- *
- * // Disabled phone input
- * <PhoneInput
- *   name="lockedPhone"
- *   label="Phone (Locked)"
- *   defaultValue="+1 (555) 987-6543"
- *   disabled
- *   className="locked-field"
- * />
- *
- * // Phone input with loading state
- * <PhoneInput
- *   name="loadingPhone"
- *   label="Phone Number"
- *   isLoading
- *   defaultCountry="CA"
- * />
  * ```
- *
- * @remarks
- * This component provides:
- * - Automatic phone number formatting based on selected country
- * - Searchable country dropdown with flags and country codes
- * - Support for international phone number formats
- * - Integration with form validation systems
- * - Accessibility features with proper labeling
- *
- * The component uses country data from @arkyn/templates and automatically formats
- * phone numbers according to each country's specific format and mask patterns.
  */
-declare function PhoneInput(props: PhoneInputProps): import("react/jsx-runtime").JSX.Element;
+declare function PhoneInput(props: PhoneInputProps): import("react").JSX.Element;
 export { PhoneInput };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/phoneInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/phoneInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AA0B7C,KAAK,eAAe,GAAG;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,cAAc,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwGG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CA0LzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/phoneInput/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAsB7C,KAAK,eAAe,GAAG;IACtB,yDAAyD;IACzD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uFAAuF;IACvF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kGAAkG;IAClG,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iGAAiG;IACjG,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,6FAA6F;IAC7F,IAAI,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,+EAA+E;IAC/E,iBAAiB,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC;IACtD,qGAAqG;IACrG,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sFAAsF;IACtF,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;CAC9D,CAAC;AAcF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,+BA4KzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/phoneInput/phoneInputContainer/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import "./styles.css";
 type PhoneInputContainerProps = {
     children: ReactNode;
@@ -12,6 +12,6 @@ type PhoneInputContainerProps = {
     variant: "solid" | "outline";
     size: "md" | "lg";
 };
-declare function PhoneInputContainer(props: PhoneInputContainerProps): import("react/jsx-runtime").JSX.Element;
+declare function PhoneInputContainer(props: PhoneInputContainerProps): import("react").JSX.Element;
 export { PhoneInputContainer };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/phoneInput/phoneInputContainer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;CACnB,CAAC;AAEF,iBAAS,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAyB3D;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,cAAc,CAAC;AAEtB,KAAK,wBAAwB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;CAClB,CAAC;AAEF,iBAAS,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,+BAyB3D;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/components/phoneInput/phoneInputCountriesOverlay/index.d.ts

@@ -3,6 +3,6 @@ type PhoneInputCountriesOverlayProps = {
     isOpen: boolean;
     onClick: () => void;
 };
-declare function PhoneInputCountriesOverlay(props: PhoneInputCountriesOverlayProps): import("react/jsx-runtime").JSX.Element;
+declare function PhoneInputCountriesOverlay(props: PhoneInputCountriesOverlayProps): import("react").JSX.Element | null;
 export { PhoneInputCountriesOverlay };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/phoneInput/phoneInputCountriesOverlay/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputCountriesOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,KAAK,+BAA+B,GAAG;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,iBAAS,0BAA0B,CAAC,KAAK,EAAE,+BAA+B,2CAMzE;AAED,OAAO,EAAE,0BAA0B,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputCountriesOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,KAAK,+BAA+B,GAAG;IACtC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,iBAAS,0BAA0B,CAAC,KAAK,EAAE,+BAA+B,sCAMzE;AAED,OAAO,EAAE,0BAA0B,EAAE,CAAC"}

package/dist/components/phoneInput/phoneInputCountryOption/index.d.ts

@@ -3,9 +3,8 @@ type CountryType = {
     name: string;
     code: string;
     iso: string;
-    prefix: null | string;
     flag: string;
-    mask: string;
+    mask: string | string[];
 };
 type PhoneInputCountryOptionProps = {
     country: CountryType;
@@ -13,6 +12,6 @@ type PhoneInputCountryOptionProps = {
     isActive: boolean;
     handleChangeValue: (country: CountryType) => void;
 };
-declare function PhoneInputCountryOption(props: PhoneInputCountryOptionProps): import("react/jsx-runtime").JSX.Element;
+declare function PhoneInputCountryOption(props: PhoneInputCountryOptionProps): import("react").JSX.Element;
 export { PhoneInputCountryOption };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/phoneInput/phoneInputCountryOption/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputCountryOption/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,4BAA4B,GAAG;IAClC,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,iBAAS,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,2CAanE;AAED,OAAO,EAAE,uBAAuB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputCountryOption/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,WAAW,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACxB,CAAC;AAEF,KAAK,4BAA4B,GAAG;IACnC,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,iBAAS,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,+BAanE;AAED,OAAO,EAAE,uBAAuB,EAAE,CAAC"}

package/dist/components/phoneInput/phoneInputCountryOptionsContainer/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 import "./styles.css";
 type PhoneInputCountryOptionsContainerProps = {
     isOpen: boolean;
@@ -7,6 +7,6 @@ type PhoneInputCountryOptionsContainerProps = {
     placeholder: string;
     onSearch: (value: string) => void;
 };
-declare function PhoneInputCountryOptionsContainer(props: PhoneInputCountryOptionsContainerProps): import("react/jsx-runtime").JSX.Element;
+declare function PhoneInputCountryOptionsContainer(props: PhoneInputCountryOptionsContainerProps): import("react").JSX.Element | null;
 export { PhoneInputCountryOptionsContainer };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/phoneInput/phoneInputCountryOptionsContainer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputCountryOptionsContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,SAAS,EAA+B,MAAM,OAAO,CAAC;AAE5E,OAAO,cAAc,CAAC;AAEtB,KAAK,sCAAsC,GAAG;IAC5C,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,iBAAS,iCAAiC,CACxC,KAAK,EAAE,sCAAsC,2CA6D9C;AAED,OAAO,EAAE,iCAAiC,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputCountryOptionsContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,SAAS,EAId,MAAM,OAAO,CAAC;AAEf,OAAO,cAAc,CAAC;AAEtB,KAAK,sCAAsC,GAAG;IAC7C,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,iBAAS,iCAAiC,CACzC,KAAK,EAAE,sCAAsC,sCA6D7C;AAED,OAAO,EAAE,iCAAiC,EAAE,CAAC"}

package/dist/components/phoneInput/phoneInputCountrySelector/index.d.ts

@@ -3,15 +3,14 @@ type CountryType = {
     name: string;
     code: string;
     iso: string;
-    prefix: null | string;
     flag: string;
-    mask: string;
+    mask: string | string[];
 };
 type PhoneInputCountrySelectorProps = {
     size: "md" | "lg";
     currentCountry: CountryType;
     onClick: () => void;
 };
-declare function PhoneInputCountrySelector(props: PhoneInputCountrySelectorProps): import("react/jsx-runtime").JSX.Element;
+declare function PhoneInputCountrySelector(props: PhoneInputCountrySelectorProps): import("react").JSX.Element;
 export { PhoneInputCountrySelector };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/phoneInput/phoneInputCountrySelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputCountrySelector/index.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,CAAC;AAEtB,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,8BAA8B,GAAG;IACpC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,cAAc,EAAE,WAAW,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,iBAAS,yBAAyB,CAAC,KAAK,EAAE,8BAA8B,2CAcvE;AAED,OAAO,EAAE,yBAAyB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputCountrySelector/index.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,CAAC;AAEtB,KAAK,WAAW,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACxB,CAAC;AAEF,KAAK,8BAA8B,GAAG;IACrC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,cAAc,EAAE,WAAW,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,iBAAS,yBAAyB,CAAC,KAAK,EAAE,8BAA8B,+BAcvE;AAED,OAAO,EAAE,yBAAyB,EAAE,CAAC"}

package/dist/components/phoneInput/phoneInputMask/index.d.ts

@@ -3,9 +3,8 @@ type CountryType = {
     name: string;
     code: string;
     iso: string;
-    prefix: null | string;
     flag: string;
-    mask: string;
+    mask: string | string[];
 };
 type PhoneInputMaskProps = {
     onFocus: () => void;

package/dist/components/phoneInput/phoneInputMask/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputMask/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,aAAa,CAAC;AAErB,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,cAAc,EAAE,WAAW,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AASF,QAAA,MAAM,cAAc,kHAqEnB,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputMask/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,aAAa,CAAC;AAErB,KAAK,WAAW,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACxB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,cAAc,EAAE,WAAW,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,EAAE,EAAE,MAAM,CAAC;CACX,CAAC;AASF,QAAA,MAAM,cAAc,kHAgFnB,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/popover/index.d.ts

@@ -1,146 +1,66 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 import "./styles.css";
 type OrientationProps = "bottomLeft" | "bottomRight" | "topLeft" | "topRight" | "top" | "left" | "bottom" | "right";
 type PopoverProps = {
+    /** Content rendered inside the floating panel. Required. */
     children: ReactNode;
+    /** Trigger element — clicking it opens the popover. Required. */
     button: ReactNode;
+    /** When true, clicking the popover content also closes it. @default false */
     closeOnClick?: boolean;
+    /**
+     * Position of the floating panel relative to the trigger.
+     * Options: `"bottomLeft"` | `"bottomRight"` | `"topLeft"` | `"topRight"` | `"top"` | `"bottom"` | `"left"` | `"right"`.
+     * @default "bottomLeft"
+     */
     orientation?: OrientationProps;
+    /** Additional CSS class applied to the popover root element. */
     className?: string;
 };
 /**
- * Popover component - used for displaying contextual content in a floating container that appears relative to a trigger button
+ * Popover — floating panel that appears relative to a trigger element.
  *
- * @param props - Popover component properties
- * @param props.children - Required content to display inside the popover when opened
- * @param props.button - Required trigger element that opens the popover when clicked
- * @param props.closeOnClick - Whether the popover should close when clicking on its content. Default: undefined (remains open)
- * @param props.orientation - Position where the popover appears relative to the trigger button. Default: "bottomLeft"
- * @param props.className - Additional CSS classes for styling the popover container
+ * Clicking outside the popover (or clicking the content when `closeOnClick` is set)
+ * dismisses it. Locks body scroll while open.
  *
- * @returns Popover JSX element with trigger button, animated content, and overlay for outside click handling
+ * @param props.children - Content to display inside the panel. Required.
+ * @param props.button - Trigger element that opens the popover. Required.
+ * @param props.closeOnClick - Clicking the content also closes the popover. Default: false
+ * @param props.orientation - Panel position relative to the trigger. Default: "bottomLeft"
+ * @param props.className - Additional CSS class for the root element.
+ *
+ * @returns Popover JSX element with trigger, animated panel, and outside-click overlay.
  *
  * @example
  * ```tsx
- * // Basic popover with default orientation
- * <Popover
- *   button={<button>Click me</button>}
- * >
- *   <div>Popover content here</div>
- * </Popover>
- *
- * // Popover with custom orientation
- * <Popover
- *   button={<IconButton icon="menu" />}
- *   orientation="topRight"
- * >
- *   <nav>
- *     <a href="/profile">Profile</a>
- *     <a href="/settings">Settings</a>
- *     <a href="/logout">Logout</a>
- *   </nav>
- * </Popover>
- *
- * // Popover that closes when content is clicked
- * <Popover
- *   button={<Button>Select Option</Button>}
- *   closeOnClick
- *   orientation="bottom"
- * >
+ * // Basic dropdown menu
+ * <Popover button={<Button>Options</Button>} closeOnClick>
  *   <ul>
- *     <li onClick={() => selectOption('option1')}>Option 1</li>
- *     <li onClick={() => selectOption('option2')}>Option 2</li>
- *     <li onClick={() => selectOption('option3')}>Option 3</li>
+ *     <li onClick={handleEdit}>Edit</li>
+ *     <li onClick={handleDelete}>Delete</li>
  *   </ul>
  * </Popover>
  *
- * // Popover with custom styling and left orientation
+ * // User profile menu (bottom-right)
  * <Popover
- *   button={<Button variant="outline">Info</Button>}
- *   orientation="left"
- *   className="custom-popover"
- * >
- *   <div className="info-panel">
- *     <h3>Additional Information</h3>
- *     <p>This is some helpful information that appears in a popover.</p>
- *     <Button size="sm">Learn More</Button>
- *   </div>
- * </Popover>
- *
- * // Popover with form content and top-right positioning
- * <Popover
- *   button={<Badge>Filter</Badge>}
- *   orientation="topRight"
- * >
- *   <form className="filter-form">
- *     <Input name="search" placeholder="Search..." />
- *     <Select name="category" options={categories} />
- *     <Button type="submit">Apply Filters</Button>
- *   </form>
- * </Popover>
- *
- * // Popover with complex content and bottom-right positioning
- * <Popover
- *   button={<Avatar src="/user.jpg" />}
+ *   button={<IconButton icon={User} aria-label="Account" />}
  *   orientation="bottomRight"
  *   closeOnClick
  * >
- *   <div className="user-menu">
- *     <div className="user-info">
- *       <img src="/user.jpg" alt="User" />
- *       <div>
- *         <h4>John Doe</h4>
- *         <p>john@example.com</p>
- *       </div>
- *     </div>
- *     <Divider />
- *     <MenuItem icon="user">Profile</MenuItem>
- *     <MenuItem icon="settings">Settings</MenuItem>
- *     <MenuItem icon="logout">Sign Out</MenuItem>
- *   </div>
- * </Popover>
- *
- * // Popover for context menu with right orientation
- * <Popover
- *   button={<Button variant="ghost" size="sm">⋮</Button>}
- *   orientation="right"
- *   closeOnClick
- * >
- *   <div className="context-menu">
- *     <button onClick={() => editItem()}>Edit</button>
- *     <button onClick={() => duplicateItem()}>Duplicate</button>
- *     <button onClick={() => deleteItem()}>Delete</button>
- *   </div>
+ *   <nav>
+ *     <a href="/profile">Profile</a>
+ *     <a href="/settings">Settings</a>
+ *     <a href="/logout">Sign out</a>
+ *   </nav>
  * </Popover>
  *
- * // Popover with notification content and top positioning
- * <Popover
- *   button={<Badge count={3}>🔔</Badge>}
- *   orientation="top"
- * >
- *   <div className="notifications">
- *     <h3>Recent Notifications</h3>
- *     <div className="notification-item">New message received</div>
- *     <div className="notification-item">Task completed</div>
- *     <div className="notification-item">Meeting reminder</div>
- *     <Button variant="ghost" size="sm">View All</Button>
- *   </div>
+ * // Filter panel (top-left)
+ * <Popover button={<Badge>Filters</Badge>} orientation="topLeft">
+ *   <Input name="search" placeholder="Search..." />
+ *   <Select name="status" options={statusOptions} />
  * </Popover>
  * ```
- *
- * @remarks
- * This component provides:
- * - 8 different orientation options for flexible positioning (bottomLeft, bottomRight, topLeft, topRight, top, left, bottom, right)
- * - Smooth fade animation using Framer Motion for opening and closing
- * - Automatic scroll lock when popover is open to prevent background scrolling
- * - Click-outside-to-close functionality via overlay
- * - Optional click-on-content-to-close behavior
- * - Full accessibility support for keyboard navigation and screen readers
- *
- * The popover automatically handles positioning, animations, and user interactions.
- * It uses CSS classes for styling and can be customized through the className prop.
- * The component is ideal for dropdowns, context menus, tooltips, and any contextual UI elements.
  */
-declare function Popover(props: PopoverProps): import("react/jsx-runtime").JSX.Element;
+declare function Popover(props: PopoverProps): import("react").JSX.Element;
 export { Popover };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/popover/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/popover/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5C,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GACjB,YAAY,GACZ,aAAa,GACb,SAAS,GACT,UAAU,GACV,KAAK,GACL,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AAEZ,KAAK,YAAY,GAAG;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,SAAS,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoIG;AAEH,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,2CAwCnC;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/popover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAGjD,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAClB,YAAY,GACZ,aAAa,GACb,SAAS,GACT,UAAU,GACV,KAAK,GACL,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AAEX,KAAK,YAAY,GAAG;IACnB,4DAA4D;IAC5D,QAAQ,EAAE,SAAS,CAAC;IACpB,iEAAiE;IACjE,MAAM,EAAE,SAAS,CAAC;IAClB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAEH,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,+BAoCnC;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/radio/radioBox/index.d.ts

@@ -1,85 +1,37 @@
-import { ButtonHTMLAttributes } from "react";
+import type { ButtonHTMLAttributes } from "react";
 import "./styles.css";
 type RadioBoxProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    /** Value submitted to the form when this option is selected. Required. */
     value: string;
+    /** Applies error styling. Inherited from `RadioGroup` when not set. */
     isError?: boolean;
+    /** Size variant. Inherits from `RadioGroup` when not set. */
     size?: "sm" | "md" | "lg";
 };
 /**
- * RadioBox component - individual radio button option that must be used within a RadioGroup
+ * RadioBox — individual option inside a `RadioGroup`. Renders as a `<label>` + hidden `<button>` pair.
  *
- * @param props - RadioBox component properties
- * @param props.value - Required unique value for this radio option within the group
- * @param props.isError - Optional error state indicator for styling
- * @param props.size - Size variant for the radio box, inherits from RadioGroup if not specified
- * @param props.children - Content to display next to the radio button (label text, icons, etc.)
+ * Reads active value, size, error state, and disabled state from `RadioGroup` context.
+ * Must be used as a direct child of `RadioGroup`.
  *
- * **...Other valid HTML properties for button element**
+ * @param props.value - Option value. Required.
+ * @param props.children - Option label content (text, icons, or rich markup).
+ * @param props.disabled - Disables this option (group can also disable all options).
+ * @param props.size - Size override. Inherits from group by default.
  *
- * @returns RadioBox JSX element wrapped in a label for accessibility
+ * **...Other valid HTML `<button>` properties**
+ *
+ * @returns RadioBox JSX element.
  *
  * @example
  * ```tsx
- * // Basic radio boxes within a group
- * <RadioGroup name="gender">
- *   <RadioBox value="male">Male</RadioBox>
- *   <RadioBox value="female">Female</RadioBox>
- *   <RadioBox value="other">Other</RadioBox>
- * </RadioGroup>
- *
- * // Radio boxes with rich content
- * <RadioGroup name="plan" label="Choose your plan">
- *   <RadioBox value="basic">
- *     <div>
- *       <h4>Basic Plan</h4>
- *       <p>$9.99/month - Perfect for individuals</p>
- *     </div>
- *   </RadioBox>
- *   <RadioBox value="premium">
- *     <div>
- *       <h4>Premium Plan</h4>
- *       <p>$19.99/month - Great for small teams</p>
- *     </div>
- *   </RadioBox>
- * </RadioGroup>
- *
- * // Radio boxes with custom size override
- * <RadioGroup name="priority" size="md">
- *   <RadioBox value="low" size="sm">Low Priority</RadioBox>
- *   <RadioBox value="medium">Medium Priority</RadioBox>
- *   <RadioBox value="high" size="lg">High Priority</RadioBox>
- * </RadioGroup>
- *
- * // Radio boxes with disabled state
- * <RadioGroup name="options">
- *   <RadioBox value="option1">Available Option</RadioBox>
- *   <RadioBox value="option2" disabled>Disabled Option</RadioBox>
- *   <RadioBox value="option3">Another Available Option</RadioBox>
- * </RadioGroup>
- *
- * // Radio boxes with custom styling
- * <RadioGroup name="theme">
- *   <RadioBox value="light" className="theme-option">
- *     🌞 Light Theme
- *   </RadioBox>
- *   <RadioBox value="dark" className="theme-option">
- *     🌙 Dark Theme
- *   </RadioBox>
- *   <RadioBox value="auto" className="theme-option">
- *     🔄 Auto Theme
- *   </RadioBox>
+ * <RadioGroup name="plan" label="Choose a plan" onChange={setPlan}>
+ *   <RadioBox value="basic">Basic — $9/mo</RadioBox>
+ *   <RadioBox value="pro">Pro — $29/mo</RadioBox>
+ *   <RadioBox value="enterprise" disabled>Enterprise — contact us</RadioBox>
  * </RadioGroup>
  * ```
- *
- * @remarks
- * This component must be used as a child of RadioGroup. It automatically inherits:
- * - Group name for form handling
- * - Size from parent RadioGroup (unless overridden)
- * - Change handlers and state management
- * - Error states from form validation
- *
- * The component handles both click and focus events for accessibility.
  */
-declare function RadioBox(props: RadioBoxProps): import("react/jsx-runtime").JSX.Element;
+declare function RadioBox(props: RadioBoxProps): import("react").JSX.Element;
 export { RadioBox };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/radio/radioBox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/radioBox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,cAAc,CAAC;AAEtB,KAAK,aAAa,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EG;AAEH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAqDrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/radioBox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,cAAc,CAAC;AAEtB,KAAK,aAAa,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC9D,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,+BAqDrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}