@arkyn/components 3.0.1-beta.142 → 3.0.1-beta.144

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

@@ -3,100 +3,115 @@ import { LucideIcon } from "lucide-react";
 import { InputHTMLAttributes } from "react";
 import "./style.css";
 type MaskedInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix" | "name" | "type"> & {
+    /** Field name for form submission. Required. */
     name: string;
+    /**
+     * Mask pattern string. Use the replacement character as an editable placeholder.
+     * Example: `"(__) _____-____"` for a Brazilian mobile phone number.
+     * Required.
+     */
     mask: string;
+    /**
+     * Character or replacement map that marks editable positions in the mask.
+     * - String: `"_"` — every `_` in the mask becomes editable.
+     * - Object: `{ _: /\d/ }` — only accepts digits in those positions.
+     * Required.
+     */
     replacement: string | Replacement;
+    /**
+     * When true, strips mask characters from the underlying value,
+     * keeping only the user-typed characters.
+     */
     separate?: boolean;
+    /** When true, shows the full mask pattern in the input before the user types. */
     showMask?: boolean;
+    /** 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;
+    /**
+     * 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";
+    /** 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;
+    /** Controlled value. */
     value?: string;
+    /** Uncontrolled default value. */
     defaultValue?: string;
 };
 /**
- * MaskedInput component - used for text input fields with input masking support, labels, validation, icons, and loading states
+ * MaskedInput — text input with a configurable mask for structured values (phones, CPF, credit cards, etc.).
  *
- * @param props - MaskedInput component properties
- * @param props.name - Required field name for form handling
- * @param props.mask - Input mask pattern (e.g., "___.___.___-__" for CPF)
- * @param props.replacement - Character or replacement configuration for mask positions
- * @param props.separate - Whether to separate mask characters from input value. Default: undefined
- * @param props.showMask - Whether to show the mask placeholder. Default: undefined
- * @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
+ * Built on `@react-input/mask`. Integrates with `useForm` to display validation errors by field name.
  *
- * **...Other valid HTML properties for input element (except 'type' which is controlled by the mask)**
+ * @param props.name - Field name for form submission. Required.
+ * @param props.mask - Mask pattern string. Required.
+ * @param props.replacement - Character or map that marks editable positions. Required.
+ * @param props.separate - Strips mask chars from the value, keeping only typed characters.
+ * @param props.showMask - Shows the full mask pattern before the user types.
+ * @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.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.
  *
- * @returns MaskedInput JSX element wrapped in FieldGroup with optional label and error
+ * **...Other valid HTML properties for `<input>` (except `type`)**
+ *
+ * @returns MaskedInput JSX element wrapped in `FieldWrapper`.
  *
  * @example
  * ```tsx
- * // Basic masked input for phone number
+ * // Brazilian mobile phone
  * <MaskedInput
  *   name="phone"
  *   mask="(__) _____-____"
  *   replacement={{ _: /\d/ }}
- *   placeholder="(00) 00000-0000"
+ *   label="Phone"
  * />
  *
- * // CPF input with label and validation
+ * // CPF with mask visible and validation
  * <MaskedInput
  *   name="cpf"
  *   label="CPF"
  *   mask="___.___.___-__"
  *   replacement="_"
- *   showAsterisk
- *   errorMessage="Please enter a valid CPF"
  *   showMask
+ *   showAsterisk
+ *   errorMessage="Invalid CPF"
  * />
  *
- * // Credit card input with icons and loading state
+ * // Credit card
  * <MaskedInput
- *   name="creditCard"
+ *   name="card"
  *   label="Credit Card"
  *   mask="____ ____ ____ ____"
  *   replacement={{ _: /\d/ }}
- *   leftIcon={CreditCardIcon}
- *   rightIcon={ShieldIcon}
- *   isLoading
- * />
- *
- * // Date input with prefix/suffix
- * <MaskedInput
- *   name="birthDate"
- *   label="Birth Date"
- *   mask="__/__/____"
- *   replacement="_"
- *   prefix="📅"
- *   variant="outline"
- *   separate
- * />
- *
- * // Large masked input with underline variant
- * <MaskedInput
- *   name="zipCode"
- *   label="ZIP Code"
- *   mask="_____-___"
- *   replacement={{ _: /\d/ }}
- *   size="lg"
- *   variant="underline"
- *   placeholder="00000-000"
+ *   leftIcon={CreditCard}
  * />
  * ```
  */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/maskedInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAW,UAAU,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAEL,mBAAmB,EAKpB,MAAM,OAAO,CAAC;AASf,OAAO,aAAa,CAAC;AAErB,KAAK,gBAAgB,GAAG,IAAI,CAC1B,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CACpC,GAAG;IACF,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,GAAG,WAAW,CAAC;IAElC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAE5C,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,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AASF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAmI3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/maskedInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAW,UAAU,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAEL,mBAAmB,EAKpB,MAAM,OAAO,CAAC;AASf,OAAO,aAAa,CAAC;AAErB,KAAK,gBAAgB,GAAG,IAAI,CAC1B,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CACpC,GAAG;IACF,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,WAAW,EAAE,MAAM,GAAG,WAAW,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qFAAqF;IACrF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAC5C,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,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AASF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAmI3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/maskedInput/index.js

@@ -12,81 +12,58 @@ const BaseInput = forwardRef((props, ref) => {
     return _jsx("input", { ref: ref, ...props });
 });
 /**
- * MaskedInput component - used for text input fields with input masking support, labels, validation, icons, and loading states
+ * MaskedInput — text input with a configurable mask for structured values (phones, CPF, credit cards, etc.).
  *
- * @param props - MaskedInput component properties
- * @param props.name - Required field name for form handling
- * @param props.mask - Input mask pattern (e.g., "___.___.___-__" for CPF)
- * @param props.replacement - Character or replacement configuration for mask positions
- * @param props.separate - Whether to separate mask characters from input value. Default: undefined
- * @param props.showMask - Whether to show the mask placeholder. Default: undefined
- * @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
+ * Built on `@react-input/mask`. Integrates with `useForm` to display validation errors by field name.
  *
- * **...Other valid HTML properties for input element (except 'type' which is controlled by the mask)**
+ * @param props.name - Field name for form submission. Required.
+ * @param props.mask - Mask pattern string. Required.
+ * @param props.replacement - Character or map that marks editable positions. Required.
+ * @param props.separate - Strips mask chars from the value, keeping only typed characters.
+ * @param props.showMask - Shows the full mask pattern before the user types.
+ * @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.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.
  *
- * @returns MaskedInput JSX element wrapped in FieldGroup with optional label and error
+ * **...Other valid HTML properties for `<input>` (except `type`)**
+ *
+ * @returns MaskedInput JSX element wrapped in `FieldWrapper`.
  *
  * @example
  * ```tsx
- * // Basic masked input for phone number
+ * // Brazilian mobile phone
  * <MaskedInput
  *   name="phone"
  *   mask="(__) _____-____"
  *   replacement={{ _: /\d/ }}
- *   placeholder="(00) 00000-0000"
+ *   label="Phone"
  * />
  *
- * // CPF input with label and validation
+ * // CPF with mask visible and validation
  * <MaskedInput
  *   name="cpf"
  *   label="CPF"
  *   mask="___.___.___-__"
  *   replacement="_"
- *   showAsterisk
- *   errorMessage="Please enter a valid CPF"
  *   showMask
+ *   showAsterisk
+ *   errorMessage="Invalid CPF"
  * />
  *
- * // Credit card input with icons and loading state
+ * // Credit card
  * <MaskedInput
- *   name="creditCard"
+ *   name="card"
  *   label="Credit Card"
  *   mask="____ ____ ____ ____"
  *   replacement={{ _: /\d/ }}
- *   leftIcon={CreditCardIcon}
- *   rightIcon={ShieldIcon}
- *   isLoading
- * />
- *
- * // Date input with prefix/suffix
- * <MaskedInput
- *   name="birthDate"
- *   label="Birth Date"
- *   mask="__/__/____"
- *   replacement="_"
- *   prefix="📅"
- *   variant="outline"
- *   separate
- * />
- *
- * // Large masked input with underline variant
- * <MaskedInput
- *   name="zipCode"
- *   label="ZIP Code"
- *   mask="_____-___"
- *   replacement={{ _: /\d/ }}
- *   size="lg"
- *   variant="underline"
- *   placeholder="00000-000"
+ *   leftIcon={CreditCard}
  * />
  * ```
  */

package/dist/components/modal/modalContainer/index.d.ts

@@ -1,76 +1,36 @@
 import { HTMLAttributes } from "react";
 import "./styles.css";
 type ModalContainerProps = HTMLAttributes<HTMLElement> & {
+    /** Controls whether the modal is visible. */
     isVisible: boolean;
+    /** Callback invoked when the backdrop overlay is clicked. */
     makeInvisible: () => void;
 };
 /**
- * ModalContainer component - animated overlay modal for dialogs and content
+ * ModalContainer — animated centered modal rendered over a backdrop overlay.
  *
- * @param props - ModalContainer component properties
- * @param props.isVisible - Controls modal visibility state
- * @param props.makeInvisible - Callback function to hide the modal
+ * Locks body scroll while open. Closes when the overlay is clicked.
+ * Provides context consumed by `ModalHeader` (close button).
  *
- * **...Other valid HTML properties for aside element**
+ * @param props.isVisible - Whether the modal is open. Required.
+ * @param props.makeInvisible - Called when the overlay is clicked. Required.
  *
- * @returns ModalContainer JSX element
+ * **...Other valid HTML `<aside>` properties**
+ *
+ * @returns ModalContainer JSX element.
  *
  * @example
  * ```tsx
- * // Basic modal
  * const [isOpen, setIsOpen] = useState(false);
- * <ModalContainer
- *   isVisible={isOpen}
- *   makeInvisible={() => setIsOpen(false)}
- * >
- *   <p>Modal content</p>
- * </ModalContainer>
  *
- * // Modal with custom styling
- * <ModalContainer
- *   isVisible={isOpen}
- *   makeInvisible={() => setIsOpen(false)}
- *   className="custom-modal"
- * >
- *   <div className="modal-content">
- *     <h2>Confirmation</h2>
- *     <p>Are you sure you want to proceed?</p>
- *   </div>
+ * <ModalContainer isVisible={isOpen} makeInvisible={() => setIsOpen(false)}>
+ *   <ModalHeader><h2>Confirm deletion</h2></ModalHeader>
+ *   <main><p>This action cannot be undone.</p></main>
+ *   <ModalFooter>
+ *     <Button onClick={() => setIsOpen(false)}>Cancel</Button>
+ *     <Button scheme="danger" onClick={handleDelete}>Delete</Button>
+ *   </ModalFooter>
  * </ModalContainer>
- *
- * // Complete modal example
- * function ModalExample() {
- *   const [isModalOpen, setIsModalOpen] = useState(false);
- *
- *   return (
- *     <>
- *       <button onClick={() => setIsModalOpen(true)}>
- *         Open Modal
- *       </button>
- *
- *       <ModalContainer
- *         isVisible={isModalOpen}
- *         makeInvisible={() => setIsModalOpen(false)}
- *       >
- *         <div className="modal-dialog">
- *           <header>
- *             <h2>Modal Title</h2>
- *           </header>
- *
- *           <main>
- *             <p>This is the modal content.</p>
- *           </main>
- *
- *           <footer>
- *             <button onClick={() => setIsModalOpen(false)}>
- *               Close
- *             </button>
- *           </footer>
- *         </div>
- *       </ModalContainer>
- *     </>
- *   );
- * }
  * ```
  */
 declare function ModalContainer(args: ModalContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/modal/modalContainer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modalContainer/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,cAAc,CAAC;AAEtB,KAAK,mBAAmB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACvD,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AAEH,iBAAS,cAAc,CAAC,IAAI,EAAE,mBAAmB,2CA0ChD;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modalContainer/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,cAAc,CAAC;AAEtB,KAAK,mBAAmB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACvD,6CAA6C;IAC7C,SAAS,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,iBAAS,cAAc,CAAC,IAAI,EAAE,mBAAmB,2CA0ChD;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/modal/modalContainer/index.js

@@ -4,72 +4,30 @@ import { useScrollLock } from "../../../hooks/useScrollLock";
 import { ModalProvider } from "../modalContext";
 import "./styles.css";
 /**
- * ModalContainer component - animated overlay modal for dialogs and content
+ * ModalContainer — animated centered modal rendered over a backdrop overlay.
  *
- * @param props - ModalContainer component properties
- * @param props.isVisible - Controls modal visibility state
- * @param props.makeInvisible - Callback function to hide the modal
+ * Locks body scroll while open. Closes when the overlay is clicked.
+ * Provides context consumed by `ModalHeader` (close button).
  *
- * **...Other valid HTML properties for aside element**
+ * @param props.isVisible - Whether the modal is open. Required.
+ * @param props.makeInvisible - Called when the overlay is clicked. Required.
  *
- * @returns ModalContainer JSX element
+ * **...Other valid HTML `<aside>` properties**
+ *
+ * @returns ModalContainer JSX element.
  *
  * @example
  * ```tsx
- * // Basic modal
  * const [isOpen, setIsOpen] = useState(false);
- * <ModalContainer
- *   isVisible={isOpen}
- *   makeInvisible={() => setIsOpen(false)}
- * >
- *   <p>Modal content</p>
- * </ModalContainer>
  *
- * // Modal with custom styling
- * <ModalContainer
- *   isVisible={isOpen}
- *   makeInvisible={() => setIsOpen(false)}
- *   className="custom-modal"
- * >
- *   <div className="modal-content">
- *     <h2>Confirmation</h2>
- *     <p>Are you sure you want to proceed?</p>
- *   </div>
+ * <ModalContainer isVisible={isOpen} makeInvisible={() => setIsOpen(false)}>
+ *   <ModalHeader><h2>Confirm deletion</h2></ModalHeader>
+ *   <main><p>This action cannot be undone.</p></main>
+ *   <ModalFooter>
+ *     <Button onClick={() => setIsOpen(false)}>Cancel</Button>
+ *     <Button scheme="danger" onClick={handleDelete}>Delete</Button>
+ *   </ModalFooter>
  * </ModalContainer>
- *
- * // Complete modal example
- * function ModalExample() {
- *   const [isModalOpen, setIsModalOpen] = useState(false);
- *
- *   return (
- *     <>
- *       <button onClick={() => setIsModalOpen(true)}>
- *         Open Modal
- *       </button>
- *
- *       <ModalContainer
- *         isVisible={isModalOpen}
- *         makeInvisible={() => setIsModalOpen(false)}
- *       >
- *         <div className="modal-dialog">
- *           <header>
- *             <h2>Modal Title</h2>
- *           </header>
- *
- *           <main>
- *             <p>This is the modal content.</p>
- *           </main>
- *
- *           <footer>
- *             <button onClick={() => setIsModalOpen(false)}>
- *               Close
- *             </button>
- *           </footer>
- *         </div>
- *       </ModalContainer>
- *     </>
- *   );
- * }
  * ```
  */
 function ModalContainer(args) {

package/dist/components/modal/modalFooter/index.d.ts

@@ -1,70 +1,37 @@
 import { HTMLAttributes } from "react";
 import "./styles.css";
 type ModalFooterProps = HTMLAttributes<HTMLElement> & {
+    /**
+     * Horizontal alignment of footer content.
+     * - `left` / `center` / `right`: flex-start, center, flex-end.
+     * - `between`: space-between.
+     * - `around`: space-around.
+     * @default "right"
+     */
     alignment?: "left" | "center" | "right" | "between" | "around";
 };
 /**
- * ModalFooter component - footer section for modals with flexible alignment options
+ * ModalFooter — action bar at the bottom of a modal dialog.
  *
- * @param props - ModalFooter component properties
- * @param props.alignment - Content alignment within the footer. Default: "right"
+ * @param props.alignment - Horizontal alignment of children. Default: `"right"`
  *
- * **...Other valid HTML properties for footer element**
+ * **...Other valid HTML `<footer>` properties**
  *
- * @returns ModalFooter JSX element
+ * @returns ModalFooter JSX element.
  *
  * @example
  * ```tsx
- * // Basic footer with right alignment (default)
+ * // Confirm / cancel pattern (right-aligned by default)
  * <ModalFooter>
- *   <button>Cancel</button>
- *   <button>Save</button>
+ *   <Button variant="ghost" onClick={onClose}>Cancel</Button>
+ *   <Button scheme="danger" onClick={onConfirm}>Delete</Button>
  * </ModalFooter>
  *
- * // Left aligned footer
- * <ModalFooter alignment="left">
- *   <button>Delete</button>
- * </ModalFooter>
- *
- * // Center aligned footer
- * <ModalFooter alignment="center">
- *   <button>OK</button>
- * </ModalFooter>
- *
- * // Space between buttons
+ * // Space-between layout (e.g. back / next in a wizard)
  * <ModalFooter alignment="between">
- *   <button>Cancel</button>
- *   <button>Confirm</button>
+ *   <Button variant="outline" onClick={onBack}>Back</Button>
+ *   <Button onClick={onNext}>Next</Button>
  * </ModalFooter>
- *
- * // Space around buttons
- * <ModalFooter alignment="around">
- *   <button>Previous</button>
- *   <button>Next</button>
- *   <button>Finish</button>
- * </ModalFooter>
- *
- * // Complete modal example
- * <ModalContainer isVisible={isOpen} makeInvisible={() => setIsOpen(false)}>
- *   <div className="modal-content">
- *     <header>
- *       <h2>Confirm Action</h2>
- *     </header>
- *
- *     <main>
- *       <p>Are you sure you want to delete this item?</p>
- *     </main>
- *
- *     <ModalFooter alignment="right">
- *       <button onClick={() => setIsOpen(false)}>
- *         Cancel
- *       </button>
- *       <button onClick={handleDelete}>
- *         Delete
- *       </button>
- *     </ModalFooter>
- *   </div>
- * </ModalContainer>
  * ```
  */
 declare function ModalFooter(args: ModalFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/modal/modalFooter/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modalFooter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACpD,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;CAChE,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AAEH,iBAAS,WAAW,CAAC,IAAI,EAAE,gBAAgB,2CAK1C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modalFooter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACpD;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;CAChE,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,iBAAS,WAAW,CAAC,IAAI,EAAE,gBAAgB,2CAK1C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/modal/modalFooter/index.js

@@ -1,67 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "./styles.css";
 /**
- * ModalFooter component - footer section for modals with flexible alignment options
+ * ModalFooter — action bar at the bottom of a modal dialog.
  *
- * @param props - ModalFooter component properties
- * @param props.alignment - Content alignment within the footer. Default: "right"
+ * @param props.alignment - Horizontal alignment of children. Default: `"right"`
  *
- * **...Other valid HTML properties for footer element**
+ * **...Other valid HTML `<footer>` properties**
  *
- * @returns ModalFooter JSX element
+ * @returns ModalFooter JSX element.
  *
  * @example
  * ```tsx
- * // Basic footer with right alignment (default)
+ * // Confirm / cancel pattern (right-aligned by default)
  * <ModalFooter>
- *   <button>Cancel</button>
- *   <button>Save</button>
+ *   <Button variant="ghost" onClick={onClose}>Cancel</Button>
+ *   <Button scheme="danger" onClick={onConfirm}>Delete</Button>
  * </ModalFooter>
  *
- * // Left aligned footer
- * <ModalFooter alignment="left">
- *   <button>Delete</button>
- * </ModalFooter>
- *
- * // Center aligned footer
- * <ModalFooter alignment="center">
- *   <button>OK</button>
- * </ModalFooter>
- *
- * // Space between buttons
+ * // Space-between layout (e.g. back / next in a wizard)
  * <ModalFooter alignment="between">
- *   <button>Cancel</button>
- *   <button>Confirm</button>
+ *   <Button variant="outline" onClick={onBack}>Back</Button>
+ *   <Button onClick={onNext}>Next</Button>
  * </ModalFooter>
- *
- * // Space around buttons
- * <ModalFooter alignment="around">
- *   <button>Previous</button>
- *   <button>Next</button>
- *   <button>Finish</button>
- * </ModalFooter>
- *
- * // Complete modal example
- * <ModalContainer isVisible={isOpen} makeInvisible={() => setIsOpen(false)}>
- *   <div className="modal-content">
- *     <header>
- *       <h2>Confirm Action</h2>
- *     </header>
- *
- *     <main>
- *       <p>Are you sure you want to delete this item?</p>
- *     </main>
- *
- *     <ModalFooter alignment="right">
- *       <button onClick={() => setIsOpen(false)}>
- *         Cancel
- *       </button>
- *       <button onClick={handleDelete}>
- *         Delete
- *       </button>
- *     </ModalFooter>
- *   </div>
- * </ModalContainer>
  * ```
  */
 function ModalFooter(args) {