@arkyn/components 3.0.1-beta.143 → 3.0.1-beta.145

package/dist/components/clientOnly.d.ts

@@ -1,84 +1,31 @@
 type ClientOnlyProps = {
+    /** Render function — called after hydration on the client. Required. */
     children(): React.ReactNode;
+    /** Content rendered during SSR or before hydration. @default null */
     fallback?: React.ReactNode;
 };
 /**
- * ClientOnly component - renders children only after hydration on the client side
+ * ClientOnly — renders its children only after client-side hydration.
  *
- * This component prevents hydration mismatches by rendering different content during SSR
- * and after client-side hydration. It's useful for components that rely on browser APIs
- * or need to render differently on server and client.
+ * Prevents React hydration mismatches for components that rely on browser-only APIs
+ * (e.g. `window`, `navigator`, `document`). Uses `useHydrated` internally.
  *
- * @param props - ClientOnly component properties
- * @param props.children - Function that returns React nodes to render after hydration
- * @param props.fallback - Optional React node to render during SSR or before hydration
+ * @param props.children - Render function executed after hydration. Required.
+ * @param props.fallback - Content shown during SSR / before hydration. Default: null
  *
- * @returns React fragment containing either fallback content or children based on hydration state
+ * @returns `children()` after hydration, otherwise `fallback`.
  *
  * @example
  * ```tsx
- * // Basic usage with loading fallback
- * <ClientOnly fallback={<div>Loading...</div>}>
+ * // With a skeleton fallback
+ * <ClientOnly fallback={<Skeleton />}>
  *   {() => <InteractiveWidget />}
  * </ClientOnly>
  *
- * // Client-only component without fallback
- * <ClientOnly>
- *   {() => (
- *     <div>
- *       <p>This content only appears on the client</p>
- *       <p>Current time: {new Date().toLocaleString()}</p>
- *     </div>
- *   )}
+ * // Using browser APIs safely
+ * <ClientOnly fallback={<p>Loading...</p>}>
+ *   {() => <p>Current time: {new Date().toLocaleString()}</p>}
  * </ClientOnly>
- *
- * // Using with browser APIs
- * <ClientOnly fallback={<div>Preparing location services...</div>}>
- *   {() => <GeolocationComponent />}
- * </ClientOnly>
- *
- * // Complex interactive component
- * <ClientOnly fallback={<StaticPlaceholder />}>
- *   {() => (
- *     <div>
- *       <Chart data={chartData} />
- *       <InteractiveControls />
- *       <RealtimeUpdates />
- *     </div>
- *   )}
- * </ClientOnly>
- *
- * // Conditional rendering based on client capabilities
- * <ClientOnly fallback={<BasicTable data={data} />}>
- *   {() => (
- *     <AdvancedDataGrid
- *       data={data}
- *       features={['sorting', 'filtering', 'virtualization']}
- *     />
- *   )}
- * </ClientOnly>
- *
- * // Using with dynamic imports
- * <ClientOnly fallback={<div>Loading editor...</div>}>
- *   {() => <LazyCodeEditor />}
- * </ClientOnly>
- *
- * // Preventing layout shift
- * <ClientOnly fallback={<div className="skeleton-loader" />}>
- *   {() => <UserDashboard />}
- * </ClientOnly>
- *
- * // Multiple client-only sections
- * <div>
- *   <Header />
- *   <ClientOnly fallback={<div>Loading navigation...</div>}>
- *     {() => <InteractiveNavigation />}
- *   </ClientOnly>
- *   <MainContent />
- *   <ClientOnly>
- *     {() => <ChatWidget />}
- *   </ClientOnly>
- * </div>
  * ```
  */
 declare function ClientOnly(props: ClientOnlyProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/clientOnly.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"clientOnly.d.ts","sourceRoot":"","sources":["../../src/components/clientOnly.tsx"],"names":[],"mappings":"AAEA,KAAK,eAAe,GAAG;IACrB,QAAQ,IAAI,KAAK,CAAC,SAAS,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAGzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"clientOnly.d.ts","sourceRoot":"","sources":["../../src/components/clientOnly.tsx"],"names":[],"mappings":"AAEA,KAAK,eAAe,GAAG;IACrB,wEAAwE;IACxE,QAAQ,IAAI,KAAK,CAAC,SAAS,CAAC;IAC5B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAGzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/clientOnly.js

@@ -1,82 +1,27 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useHydrated } from "../hooks/useHydrated";
 /**
- * ClientOnly component - renders children only after hydration on the client side
+ * ClientOnly — renders its children only after client-side hydration.
  *
- * This component prevents hydration mismatches by rendering different content during SSR
- * and after client-side hydration. It's useful for components that rely on browser APIs
- * or need to render differently on server and client.
+ * Prevents React hydration mismatches for components that rely on browser-only APIs
+ * (e.g. `window`, `navigator`, `document`). Uses `useHydrated` internally.
  *
- * @param props - ClientOnly component properties
- * @param props.children - Function that returns React nodes to render after hydration
- * @param props.fallback - Optional React node to render during SSR or before hydration
+ * @param props.children - Render function executed after hydration. Required.
+ * @param props.fallback - Content shown during SSR / before hydration. Default: null
  *
- * @returns React fragment containing either fallback content or children based on hydration state
+ * @returns `children()` after hydration, otherwise `fallback`.
  *
  * @example
  * ```tsx
- * // Basic usage with loading fallback
- * <ClientOnly fallback={<div>Loading...</div>}>
+ * // With a skeleton fallback
+ * <ClientOnly fallback={<Skeleton />}>
  *   {() => <InteractiveWidget />}
  * </ClientOnly>
  *
- * // Client-only component without fallback
- * <ClientOnly>
- *   {() => (
- *     <div>
- *       <p>This content only appears on the client</p>
- *       <p>Current time: {new Date().toLocaleString()}</p>
- *     </div>
- *   )}
+ * // Using browser APIs safely
+ * <ClientOnly fallback={<p>Loading...</p>}>
+ *   {() => <p>Current time: {new Date().toLocaleString()}</p>}
  * </ClientOnly>
- *
- * // Using with browser APIs
- * <ClientOnly fallback={<div>Preparing location services...</div>}>
- *   {() => <GeolocationComponent />}
- * </ClientOnly>
- *
- * // Complex interactive component
- * <ClientOnly fallback={<StaticPlaceholder />}>
- *   {() => (
- *     <div>
- *       <Chart data={chartData} />
- *       <InteractiveControls />
- *       <RealtimeUpdates />
- *     </div>
- *   )}
- * </ClientOnly>
- *
- * // Conditional rendering based on client capabilities
- * <ClientOnly fallback={<BasicTable data={data} />}>
- *   {() => (
- *     <AdvancedDataGrid
- *       data={data}
- *       features={['sorting', 'filtering', 'virtualization']}
- *     />
- *   )}
- * </ClientOnly>
- *
- * // Using with dynamic imports
- * <ClientOnly fallback={<div>Loading editor...</div>}>
- *   {() => <LazyCodeEditor />}
- * </ClientOnly>
- *
- * // Preventing layout shift
- * <ClientOnly fallback={<div className="skeleton-loader" />}>
- *   {() => <UserDashboard />}
- * </ClientOnly>
- *
- * // Multiple client-only sections
- * <div>
- *   <Header />
- *   <ClientOnly fallback={<div>Loading navigation...</div>}>
- *     {() => <InteractiveNavigation />}
- *   </ClientOnly>
- *   <MainContent />
- *   <ClientOnly>
- *     {() => <ChatWidget />}
- *   </ClientOnly>
- * </div>
  * ```
  */
 function ClientOnly(props) {

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

@@ -3,59 +3,99 @@ import { ChangeEvent, InputHTMLAttributes } from "react";
 import "./style.css";
 type Locale = "USD" | "EUR" | "JPY" | "GBP" | "AUD" | "CAD" | "CHF" | "CNY" | "SEK" | "NZD" | "BRL" | "INR" | "RUB" | "ZAR" | "MXN" | "SGD" | "HKD" | "NOK" | "KRW" | "TRY" | "IDR" | "THB";
 type CurrencyInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix" | "name" | "type" | "max" | "defaultValue" | "value" | "onChange" | "placeholder"> & {
+    /** Field name for form submission. Required. */
     name: string;
+    /**
+     * Currency locale used to format the displayed value.
+     * Supported: `"USD"` | `"EUR"` | `"BRL"` | `"JPY"` | `"GBP"` | … (22 locales).
+     * Required.
+     */
     locale: Locale;
+    /** Optional label text displayed above the input. */
     label?: string;
+    /** Validation error message displayed below the input. */
     errorMessage?: string;
+    /** Shows a spinner and disables the input during async operations. @default false */
     isLoading?: boolean;
+    /** When true, skips `FieldTemplate` wrapper (label and error text). @default false */
     unShowFieldTemplate?: boolean;
+    /**
+     * Input size.
+     * @default "md"
+     */
     size?: "md" | "lg";
+    /**
+     * Visual style variant.
+     * - `solid`: filled background.
+     * - `outline`: bordered, transparent background.
+     * - `underline`: bottom border only.
+     * @default "solid"
+     */
     variant?: "solid" | "outline" | "underline";
+    /**
+     * Layout direction forwarded to `FieldTemplate`.
+     * @default "horizontal"
+     */
     orientation?: "horizontal" | "vertical" | "horizontalReverse";
+    /** Text or icon rendered at the far left, outside the input area. */
     prefix?: string | LucideIcon;
+    /** Text or icon rendered at the far right, outside the input area. */
     suffix?: string | LucideIcon;
+    /** Displays an asterisk on the label to signal a required field. */
     showAsterisk?: boolean;
+    /** Lucide icon rendered inside the input on the left. */
     leftIcon?: LucideIcon;
+    /** Lucide icon rendered inside the input on the right. */
     rightIcon?: LucideIcon;
+    /** Maximum numeric value allowed. @default 1_000_000_000 */
     max?: number;
+    /** Controlled numeric value. */
     value?: number;
+    /** Uncontrolled default numeric value. */
     defaultValue?: number;
+    /**
+     * Callback fired on value change.
+     * @param event - Native change event.
+     * @param originalValue - Raw numeric string (e.g. `"1234.56"`).
+     * @param maskedValue - Formatted display string (e.g. `"$ 1,234.56"`).
+     */
     onChange?: (event: ChangeEvent<HTMLInputElement>, originalValue: string, maskedValue: string) => void;
 };
 /**
- * CurrencyInput component - used for currency input fields with automatic formatting based on locale
+ * CurrencyInput — numeric input that automatically formats the displayed value according to a currency locale.
  *
- * @param props - CurrencyInput component properties
- * @param props.name - Required field name for form handling
- * @param props.locale - Currency locale for formatting (e.g., "USD", "EUR", "BRL", etc.)
- * @param props.label - Optional label text to display above the input
- * @param props.errorMessage - Error message to display below the input
- * @param props.isLoading - Controls loading state with spinner. Default: false
- * @param props.size - Input size. Default: "md"
- * @param props.variant - Visual variant of the input. Default: "solid"
- * @param props.prefix - Text or icon to display at the beginning of the input
- * @param props.suffix - Text or icon to display at the end of the input
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
- * @param props.leftIcon - Optional icon to display on the left side
- * @param props.rightIcon - Optional icon to display on the right side
- * @param props.max - Maximum allowed value for the currency input
- * @param props.value - Controlled value (number) for the input
- * @param props.defaultValue - Default value (number) for uncontrolled usage
- * @param props.onChange - Callback function called when value changes, receives event, original value and masked value
- * @param props.unShowFieldTemplate - When true, skips `FieldTemplate` structure (wrapper, label and error text) and renders only the checkbox button content.
- * @param props.orientation - Layout direction forwarded to `FieldTemplate`/`FieldWrapper` (`horizontal`, `vertical`, `horizontalReverse`). Default: "horizontalReverse"
+ * The raw numeric value is stored in a hidden `<input>` for form submission.
+ * Integrates with `useForm` to display validation errors by field name.
  *
+ * @param props.name - Field name for form submission. Required.
+ * @param props.locale - Currency locale (e.g. `"USD"`, `"BRL"`, `"EUR"`). Required.
+ * @param props.label - Label text displayed above the input.
+ * @param props.errorMessage - Validation error message.
+ * @param props.isLoading - Shows a spinner and disables the input. Default: false
+ * @param props.size - Input size (`md` | `lg`). Default: "md"
+ * @param props.variant - Visual style variant. Default: "solid"
+ * @param props.max - Maximum numeric value allowed. Default: 1_000_000_000
+ * @param props.value - Controlled numeric value.
+ * @param props.defaultValue - Uncontrolled default numeric value.
+ * @param props.onChange - Callback fired on change — receives the event, the raw numeric string, and the formatted string.
+ * @param props.prefix - Text or icon at the far left.
+ * @param props.suffix - Text or icon at the far right.
+ * @param props.leftIcon - Lucide icon inside the input on the left.
+ * @param props.rightIcon - Lucide icon inside the input on the right.
+ * @param props.showAsterisk - Appends `*` to the label.
+ * @param props.orientation - Layout direction. Default: "horizontal"
+ * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
  *
- * **...Other valid HTML properties for input element (except type, max, defaultValue, value, onChange)**
+ * **...Other valid HTML properties for `<input>` (except `type`, `max`, `value`, `defaultValue`, `onChange`, `placeholder`)**
  *
- * @returns CurrencyInput JSX element wrapped in FieldGroup with optional label and error
+ * @returns CurrencyInput JSX element wrapped in `FieldTemplate`.
  *
  * @example
  * ```tsx
- * // Basic currency input
- * <CurrencyInput name="price" locale="USD" placeholder="Enter price" />
+ * // Basic
+ * <CurrencyInput name="price" locale="USD" />
  *
- * // Currency input with label and validation
+ * // With label and validation
  * <CurrencyInput
  *   name="salary"
  *   locale="BRL"
@@ -64,37 +104,14 @@ type CurrencyInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "
  *   errorMessage="Please enter a valid amount"
  * />
  *
- * // Currency input with icons and loading state
- * <CurrencyInput
- *   name="budget"
- *   locale="EUR"
- *   label="Budget"
- *   leftIcon={DollarSignIcon}
- *   rightIcon={CalculatorIcon}
- *   isLoading
- * />
- *
- * // Currency input with max value and controlled state
+ * // With max value and controlled state
  * <CurrencyInput
  *   name="limit"
  *   locale="USD"
  *   label="Credit Limit"
  *   max={10000}
  *   value={creditLimit}
- *   onChange={(e, original, masked) => setCreditLimit(Number(original))}
- *   variant="outline"
- * />
- *
- * // Large currency input with prefix/suffix
- * <CurrencyInput
- *   name="investment"
- *   locale="GBP"
- *   label="Investment Amount"
- *   size="lg"
- *   variant="underline"
- *   prefix="£"
- *   suffix="GBP"
- *   placeholder="Enter investment amount"
+ *   onChange={(e, original) => setCreditLimit(Number(original))}
  * />
  * ```
  */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/currencyInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,UAAU,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EACL,WAAW,EACX,mBAAmB,EAMpB,MAAM,OAAO,CAAC;AAUf,OAAO,aAAa,CAAC;AAErB,KAAK,MAAM,GACP,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,CAAC;AAEV,KAAK,kBAAkB,GAAG,IAAI,CAC5B,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,MAAM,GACN,QAAQ,GACR,MAAM,GACN,MAAM,GACN,KAAK,GACL,cAAc,GACd,OAAO,GACP,UAAU,GACV,aAAa,CAChB,GAAG;IACF,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IAEf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAC5C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;IAE9D,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,SAAS,CAAC,EAAE,UAAU,CAAC;IAEvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,EACpC,aAAa,EAAE,MAAM,EACrB,WAAW,EAAE,MAAM,KAChB,IAAI,CAAC;CACX,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2EG;AAEH,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAuK/C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/currencyInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,UAAU,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EACL,WAAW,EACX,mBAAmB,EAMpB,MAAM,OAAO,CAAC;AAUf,OAAO,aAAa,CAAC;AAErB,KAAK,MAAM,GACP,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,CAAC;AAEV,KAAK,kBAAkB,GAAG,IAAI,CAC5B,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,MAAM,GACN,QAAQ,GACR,MAAM,GACN,MAAM,GACN,KAAK,GACL,cAAc,GACd,OAAO,GACP,UAAU,GACV,aAAa,CAChB,GAAG;IACF,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qFAAqF;IACrF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sFAAsF;IACtF,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAC5C;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;IAC9D,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,oEAAoE;IACpE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,4DAA4D;IAC5D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,EACpC,aAAa,EAAE,MAAM,EACrB,WAAW,EAAE,MAAM,KAChB,IAAI,CAAC;CACX,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AAEH,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAuK/C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/currencyInput/index.js

@@ -7,39 +7,40 @@ import { IconRenderer } from "../../services/iconRenderer";
 import { maskCurrencyValues, normalizeValue, } from "../../services/maskCurrencyValues";
 import "./style.css";
 /**
- * CurrencyInput component - used for currency input fields with automatic formatting based on locale
+ * CurrencyInput — numeric input that automatically formats the displayed value according to a currency locale.
  *
- * @param props - CurrencyInput component properties
- * @param props.name - Required field name for form handling
- * @param props.locale - Currency locale for formatting (e.g., "USD", "EUR", "BRL", etc.)
- * @param props.label - Optional label text to display above the input
- * @param props.errorMessage - Error message to display below the input
- * @param props.isLoading - Controls loading state with spinner. Default: false
- * @param props.size - Input size. Default: "md"
- * @param props.variant - Visual variant of the input. Default: "solid"
- * @param props.prefix - Text or icon to display at the beginning of the input
- * @param props.suffix - Text or icon to display at the end of the input
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
- * @param props.leftIcon - Optional icon to display on the left side
- * @param props.rightIcon - Optional icon to display on the right side
- * @param props.max - Maximum allowed value for the currency input
- * @param props.value - Controlled value (number) for the input
- * @param props.defaultValue - Default value (number) for uncontrolled usage
- * @param props.onChange - Callback function called when value changes, receives event, original value and masked value
- * @param props.unShowFieldTemplate - When true, skips `FieldTemplate` structure (wrapper, label and error text) and renders only the checkbox button content.
- * @param props.orientation - Layout direction forwarded to `FieldTemplate`/`FieldWrapper` (`horizontal`, `vertical`, `horizontalReverse`). Default: "horizontalReverse"
+ * The raw numeric value is stored in a hidden `<input>` for form submission.
+ * Integrates with `useForm` to display validation errors by field name.
  *
+ * @param props.name - Field name for form submission. Required.
+ * @param props.locale - Currency locale (e.g. `"USD"`, `"BRL"`, `"EUR"`). Required.
+ * @param props.label - Label text displayed above the input.
+ * @param props.errorMessage - Validation error message.
+ * @param props.isLoading - Shows a spinner and disables the input. Default: false
+ * @param props.size - Input size (`md` | `lg`). Default: "md"
+ * @param props.variant - Visual style variant. Default: "solid"
+ * @param props.max - Maximum numeric value allowed. Default: 1_000_000_000
+ * @param props.value - Controlled numeric value.
+ * @param props.defaultValue - Uncontrolled default numeric value.
+ * @param props.onChange - Callback fired on change — receives the event, the raw numeric string, and the formatted string.
+ * @param props.prefix - Text or icon at the far left.
+ * @param props.suffix - Text or icon at the far right.
+ * @param props.leftIcon - Lucide icon inside the input on the left.
+ * @param props.rightIcon - Lucide icon inside the input on the right.
+ * @param props.showAsterisk - Appends `*` to the label.
+ * @param props.orientation - Layout direction. Default: "horizontal"
+ * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
  *
- * **...Other valid HTML properties for input element (except type, max, defaultValue, value, onChange)**
+ * **...Other valid HTML properties for `<input>` (except `type`, `max`, `value`, `defaultValue`, `onChange`, `placeholder`)**
  *
- * @returns CurrencyInput JSX element wrapped in FieldGroup with optional label and error
+ * @returns CurrencyInput JSX element wrapped in `FieldTemplate`.
  *
  * @example
  * ```tsx
- * // Basic currency input
- * <CurrencyInput name="price" locale="USD" placeholder="Enter price" />
+ * // Basic
+ * <CurrencyInput name="price" locale="USD" />
  *
- * // Currency input with label and validation
+ * // With label and validation
  * <CurrencyInput
  *   name="salary"
  *   locale="BRL"
@@ -48,37 +49,14 @@ import "./style.css";
  *   errorMessage="Please enter a valid amount"
  * />
  *
- * // Currency input with icons and loading state
- * <CurrencyInput
- *   name="budget"
- *   locale="EUR"
- *   label="Budget"
- *   leftIcon={DollarSignIcon}
- *   rightIcon={CalculatorIcon}
- *   isLoading
- * />
- *
- * // Currency input with max value and controlled state
+ * // With max value and controlled state
  * <CurrencyInput
  *   name="limit"
  *   locale="USD"
  *   label="Credit Limit"
  *   max={10000}
  *   value={creditLimit}
- *   onChange={(e, original, masked) => setCreditLimit(Number(original))}
- *   variant="outline"
- * />
- *
- * // Large currency input with prefix/suffix
- * <CurrencyInput
- *   name="investment"
- *   locale="GBP"
- *   label="Investment Amount"
- *   size="lg"
- *   variant="underline"
- *   prefix="£"
- *   suffix="GBP"
- *   placeholder="Enter investment amount"
+ *   onChange={(e, original) => setCreditLimit(Number(original))}
  * />
  * ```
  */

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

@@ -1,43 +1,30 @@
 import { HTMLAttributes } from "react";
 import "./styles.css";
 type DividerProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Divider orientation.
+     * @default "horizontal"
+     */
     orientation?: "horizontal" | "vertical";
 };
 /**
- * Divider component - used to visually separate content sections
+ * Divider — visually separates content sections.
  *
- * @param props - Divider component properties
- * @param props.orientation - Divider orientation. Default: "horizontal"
+ * @param props.orientation - Line direction (`horizontal` | `vertical`). Default: "horizontal"
  *
- * **...Other valid HTML properties for div**
+ * **...Other valid HTML properties for `<div>`**
  *
- * @returns Divider JSX element
+ * @returns Divider JSX element.
  *
  * @example
  * ```tsx
- * // Basic horizontal divider
+ * // Between sections
+ * <h2>Section 1</h2>
  * <Divider />
+ * <h2>Section 2</h2>
  *
- * // Explicit horizontal divider
- * <Divider orientation="horizontal" />
- *
- * // Vertical divider
+ * // Vertical (e.g. between sidebar and content)
  * <Divider orientation="vertical" />
- *
- * // Custom styled divider
- * <Divider
- *   orientation="horizontal"
- *   className="my-custom-divider"
- * />
- *
- * // Usage in layout
- * <div>
- *   <h2>Section 1</h2>
- *   <p>Content for section 1</p>
- *   <Divider />
- *   <h2>Section 2</h2>
- *   <p>Content for section 2</p>
- * </div>
  * ```
  */
 declare function Divider(props: DividerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/divider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,cAAc,CAAC;AAEtB,KAAK,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACnD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,2CAUnC;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/divider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,cAAc,CAAC;AAEtB,KAAK,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACnD;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,2CAUnC;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/divider/index.js

@@ -1,40 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "./styles.css";
 /**
- * Divider component - used to visually separate content sections
+ * Divider — visually separates content sections.
  *
- * @param props - Divider component properties
- * @param props.orientation - Divider orientation. Default: "horizontal"
+ * @param props.orientation - Line direction (`horizontal` | `vertical`). Default: "horizontal"
  *
- * **...Other valid HTML properties for div**
+ * **...Other valid HTML properties for `<div>`**
  *
- * @returns Divider JSX element
+ * @returns Divider JSX element.
  *
  * @example
  * ```tsx
- * // Basic horizontal divider
+ * // Between sections
+ * <h2>Section 1</h2>
  * <Divider />
+ * <h2>Section 2</h2>
  *
- * // Explicit horizontal divider
- * <Divider orientation="horizontal" />
- *
- * // Vertical divider
+ * // Vertical (e.g. between sidebar and content)
  * <Divider orientation="vertical" />
- *
- * // Custom styled divider
- * <Divider
- *   orientation="horizontal"
- *   className="my-custom-divider"
- * />
- *
- * // Usage in layout
- * <div>
- *   <h2>Section 1</h2>
- *   <p>Content for section 1</p>
- *   <Divider />
- *   <h2>Section 2</h2>
- *   <p>Content for section 2</p>
- * </div>
  * ```
  */
 function Divider(props) {