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

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

@@ -1,64 +1,30 @@
 import { HTMLAttributes } from "react";
 import "./styles.css";
 type ModalHeaderProps = HTMLAttributes<HTMLElement> & {
+    /** Whether to render the X close button. @default true */
     showCloseButton?: boolean;
 };
 /**
- * ModalHeader component - header section for modals with optional close button
+ * ModalHeader — header section for a `ModalContainer`, with an optional close button.
  *
- * @param props - ModalHeader component properties
- * @param props.showCloseButton - Shows close button in header. Default: true
+ * The close button calls `makeInvisible` from the nearest `ModalContainer` context.
+ * Must be rendered inside a `ModalContainer`.
  *
- * **...Other valid HTML properties for header element**
+ * @param props.showCloseButton - Renders the X close button. Default: true
  *
- * @returns ModalHeader JSX element
+ * **...Other valid HTML `<header>` properties**
+ *
+ * @returns ModalHeader JSX element.
  *
  * @example
  * ```tsx
- * // Basic modal header with close button
- * <ModalHeader>
- *   <h2>Modal Title</h2>
- * </ModalHeader>
- *
- * // Header without close button
- * <ModalHeader showCloseButton={false}>
- *   <h2>Important Notice</h2>
- * </ModalHeader>
- *
- * // Header with subtitle
- * <ModalHeader>
- *   <div>
- *     <h2>Settings</h2>
- *     <p>Manage your preferences</p>
- *   </div>
- * </ModalHeader>
- *
- * // Complete modal example
  * <ModalContainer isVisible={isOpen} makeInvisible={() => setIsOpen(false)}>
- *   <div className="modal-content">
- *     <ModalHeader>
- *       <h2>Confirm Delete</h2>
- *       <p>This action cannot be undone</p>
- *     </ModalHeader>
- *
- *     <main>
- *       <p>Are you sure you want to delete this item?</p>
- *     </main>
- *
- *     <ModalFooter>
- *       <button onClick={() => setIsOpen(false)}>Cancel</button>
- *       <button onClick={handleDelete}>Delete</button>
- *     </ModalFooter>
- *   </div>
+ *   <ModalHeader>
+ *     <h2>Edit profile</h2>
+ *   </ModalHeader>
+ *   <main>...</main>
+ *   <ModalFooter><Button onClick={onSave}>Save</Button></ModalFooter>
  * </ModalContainer>
- *
- * // Custom styled header
- * <ModalHeader className="custom-header">
- *   <div className="header-content">
- *     <img src="/icon.png" alt="Icon" />
- *     <h1>Welcome</h1>
- *   </div>
- * </ModalHeader>
  * ```
  */
 declare function ModalHeader(args: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modalHeader/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACpD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AAEH,iBAAS,WAAW,CAAC,IAAI,EAAE,gBAAgB,2CA2B1C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modalHeader/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACpD,0DAA0D;IAC1D,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,iBAAS,WAAW,CAAC,IAAI,EAAE,gBAAgB,2CA2B1C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

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

@@ -3,61 +3,26 @@ import { X } from "lucide-react";
 import { useModal } from "../modalContext";
 import "./styles.css";
 /**
- * ModalHeader component - header section for modals with optional close button
+ * ModalHeader — header section for a `ModalContainer`, with an optional close button.
  *
- * @param props - ModalHeader component properties
- * @param props.showCloseButton - Shows close button in header. Default: true
+ * The close button calls `makeInvisible` from the nearest `ModalContainer` context.
+ * Must be rendered inside a `ModalContainer`.
  *
- * **...Other valid HTML properties for header element**
+ * @param props.showCloseButton - Renders the X close button. Default: true
  *
- * @returns ModalHeader JSX element
+ * **...Other valid HTML `<header>` properties**
+ *
+ * @returns ModalHeader JSX element.
  *
  * @example
  * ```tsx
- * // Basic modal header with close button
- * <ModalHeader>
- *   <h2>Modal Title</h2>
- * </ModalHeader>
- *
- * // Header without close button
- * <ModalHeader showCloseButton={false}>
- *   <h2>Important Notice</h2>
- * </ModalHeader>
- *
- * // Header with subtitle
- * <ModalHeader>
- *   <div>
- *     <h2>Settings</h2>
- *     <p>Manage your preferences</p>
- *   </div>
- * </ModalHeader>
- *
- * // Complete modal example
  * <ModalContainer isVisible={isOpen} makeInvisible={() => setIsOpen(false)}>
- *   <div className="modal-content">
- *     <ModalHeader>
- *       <h2>Confirm Delete</h2>
- *       <p>This action cannot be undone</p>
- *     </ModalHeader>
- *
- *     <main>
- *       <p>Are you sure you want to delete this item?</p>
- *     </main>
- *
- *     <ModalFooter>
- *       <button onClick={() => setIsOpen(false)}>Cancel</button>
- *       <button onClick={handleDelete}>Delete</button>
- *     </ModalFooter>
- *   </div>
+ *   <ModalHeader>
+ *     <h2>Edit profile</h2>
+ *   </ModalHeader>
+ *   <main>...</main>
+ *   <ModalFooter><Button onClick={onSave}>Save</Button></ModalFooter>
  * </ModalContainer>
- *
- * // Custom styled header
- * <ModalHeader className="custom-header">
- *   <div className="header-content">
- *     <img src="/icon.png" alt="Icon" />
- *     <h1>Welcome</h1>
- *   </div>
- * </ModalHeader>
  * ```
  */
 function ModalHeader(args) {

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

@@ -1,127 +1,132 @@
 import { LucideIcon } from "lucide-react";
 import { FocusEvent } from "react";
 type MultiSelectProps = {
+    /** Field name for form submission. Required. */
     name: string;
+    /** Array of selectable options. Required. */
     options: {
         label: string;
         value: string;
     }[];
+    /** Optional HTML id for the underlying hidden input. */
     id?: string;
+    /** Controlled array of selected values. */
     value?: string[];
+    /** Uncontrolled default array of selected values. @default [] */
     defaultValue?: string[];
+    /** Displays an asterisk on the label to signal a required field. */
     showAsterisk?: boolean;
+    /** Optional label text displayed above the multiselect. */
     label?: string;
+    /** Validation error message displayed below the multiselect. */
     errorMessage?: string;
+    /** Placeholder text shown when no options are selected. @default "Selecione..." */
     placeholder?: string;
+    /** Text shown when no options match the search query. @default "Sem opções disponíveis" */
     notFoundText?: string;
+    /** Additional CSS class applied to the wrapper element. */
     className?: string;
+    /** Disables all interactions. @default false */
     disabled?: boolean;
+    /** Prevents value changes while keeping the current selection visible. @default false */
     readOnly?: boolean;
+    /** Shows a loading spinner and disables interactions. @default false */
     isLoading?: boolean;
+    /** Enables search/filter within the dropdown. @default false */
     isSearchable?: boolean;
+    /** Closes the dropdown after an option is selected or deselected. @default false */
     closeOnSelect?: boolean;
+    /** Callback fired when the search query changes. Use for async option loading. */
     onSearch?: (value: string) => void;
+    /** Callback fired when the selected values array changes. */
     onChange?: (value: string[]) => void;
+    /** Callback fired when the multiselect gains focus. */
     onFocus?: () => void;
+    /** Callback fired when the multiselect loses focus. */
     onBlur?: (e: FocusEvent<HTMLDivElement>) => void;
+    /**
+     * MultiSelect 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 select area. */
     prefix?: string | LucideIcon;
+    /** Lucide icon rendered inside the select on the left. */
     leftIcon?: LucideIcon;
+    /** Maximum height (in px) of the options dropdown. */
     optionMaxHeight?: number;
+    /** When true, skips `FieldTemplate` wrapper (label and error text). @default false */
     unShowFieldTemplate?: boolean;
+    /**
+     * Layout direction forwarded to `FieldTemplate`.
+     * @default "horizontal"
+     */
     orientation?: "horizontal" | "vertical" | "horizontalReverse";
 };
 /**
- * MultiSelect component - used for selecting multiple options from a dropdown list with support for search, labels, and validation
+ * MultiSelect — multi-option dropdown with optional search, label, validation, and form integration.
  *
- * @param props - MultiSelect component properties
- * @param props.name - Required field name for form handling
- * @param props.options - Array of options with label and value properties
- * @param props.id - Optional unique identifier for the component
- * @param props.value - Controlled value array of selected option values
- * @param props.defaultValue - Default selected values. Default: []
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
- * @param props.label - Optional label text to display above the multiselect
- * @param props.errorMessage - Error message to display below the multiselect
- * @param props.placeholder - Placeholder text when no options are selected. Default: "Selecione..."
- * @param props.notFoundText - Text to display when no options match search. Default: "Sem opções disponíveis"
- * @param props.className - Additional CSS classes to apply
- * @param props.disabled - Whether the multiselect is disabled. Default: false
- * @param props.readOnly - Whether the multiselect is read-only. Default: false
- * @param props.isLoading - Controls loading state with spinner. Default: false
- * @param props.isSearchable - Whether the multiselect supports search functionality. Default: false
- * @param props.closeOnSelect - Whether to close dropdown after selecting an option. Default: false
- * @param props.onSearch - Callback function called when search value changes
- * @param props.onChange - Callback function called when selected values change
- * @param props.onFocus - Callback function called when multiselect gains focus
- * @param props.onBlur - Callback function called when multiselect loses focus
- * @param props.size - MultiSelect size. Default: "md"
- * @param props.variant - Visual variant of the multiselect. Default: "solid"
- * @param props.prefix - Text or icon to display at the beginning of the multiselect
- * @param props.leftIcon - Optional icon to display on the left side
- * @param props.optionMaxHeight - Maximum height for the options dropdown
- * @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"
+ * Selected values are stored as a JSON array in a hidden `<input>` for form submission.
+ * Integrates with `useForm` to display validation errors by field name.
  *
- * @returns MultiSelect JSX element wrapped in FieldWrapper with optional label and error
+ * @param props.name - Field name for form submission. Required.
+ * @param props.options - Array of selectable options (`{ label, value }`). Required.
+ * @param props.value - Controlled array of selected values.
+ * @param props.defaultValue - Uncontrolled default selection. Default: []
+ * @param props.label - Label text displayed above the multiselect.
+ * @param props.placeholder - Placeholder shown when nothing is selected. Default: "Selecione..."
+ * @param props.errorMessage - Validation error message.
+ * @param props.isSearchable - Enables search/filter within the dropdown. Default: false
+ * @param props.isLoading - Shows a loading spinner and disables interactions. Default: false
+ * @param props.closeOnSelect - Closes the dropdown after toggling an option. Default: false
+ * @param props.onChange - Callback fired when the selection changes.
+ * @param props.onSearch - Callback fired when the search query changes.
+ * @param props.size - MultiSelect size (`md` | `lg`). Default: "md"
+ * @param props.variant - Visual style variant. Default: "solid"
+ * @param props.orientation - Layout direction. Default: "horizontal"
+ * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
+ *
+ * @returns MultiSelect JSX element wrapped in `FieldTemplate`.
  *
  * @example
  * ```tsx
- * // Basic multiselect
+ * // Basic
  * <MultiSelect
  *   name="categories"
  *   options={[
  *     { label: "Technology", value: "tech" },
  *     { label: "Design", value: "design" },
- *     { label: "Marketing", value: "marketing" }
  *   ]}
  * />
  *
- * // MultiSelect with label and validation
+ * // With label, validation, and searchable
  * <MultiSelect
  *   name="skills"
- *   label="Select Skills"
+ *   label="Skills"
  *   showAsterisk
- *   errorMessage="Please select at least one skill"
- *   options={skillOptions}
- *   placeholder="Choose your skills..."
- * />
- *
- * // Searchable multiselect with custom styling
- * <MultiSelect
- *   name="countries"
- *   label="Countries"
  *   isSearchable
- *   variant="outline"
- *   size="lg"
- *   leftIcon={GlobeIcon}
- *   options={countryOptions}
- *   notFoundText="No countries found"
+ *   options={skillOptions}
+ *   errorMessage={errors.skills}
  * />
  *
- * // Controlled multiselect with callbacks
+ * // Controlled with async search
  * <MultiSelect
  *   name="tags"
  *   label="Tags"
  *   value={selectedTags}
  *   onChange={setSelectedTags}
- *   onSearch={handleSearch}
- *   closeOnSelect={false}
+ *   onSearch={fetchTagOptions}
  *   isLoading={isLoadingTags}
  *   options={tagOptions}
  * />
- *
- * // MultiSelect with prefix and custom behavior
- * <MultiSelect
- *   name="departments"
- *   label="Departments"
- *   prefix="Dept:"
- *   closeOnSelect={true}
- *   variant="underline"
- *   defaultValue={["hr", "it"]}
- *   options={departmentOptions}
- * />
  * ```
  */
 declare function MultiSelect(props: MultiSelectProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/multiSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAA2B,MAAM,OAAO,CAAC;AAe5D,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAE5C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAErC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAEjD,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,QAAQ,CAAC,EAAE,UAAU,CAAC;IAEtB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;CAC/D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2FG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA8K3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/multiSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAA2B,MAAM,OAAO,CAAC;AAe5D,KAAK,gBAAgB,GAAG;IACtB,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,6CAA6C;IAC7C,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,wDAAwD;IACxD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,oEAAoE;IACpE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2FAA2F;IAC3F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yFAAyF;IACzF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oFAAoF;IACpF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uDAAuD;IACvD,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAC5C,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,sDAAsD;IACtD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sFAAsF;IACtF,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;CAC/D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA8K3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/multiSelect/index.js

@@ -12,95 +12,61 @@ import { MultiSelectOptionsContainer } from "./multiSelectOptionsContainer";
 import { MultiSelectOverlay } from "./multiSelectOverlay";
 import { MultiSelectSpinner } from "./multiSelectSpinner";
 /**
- * MultiSelect component - used for selecting multiple options from a dropdown list with support for search, labels, and validation
+ * MultiSelect — multi-option dropdown with optional search, label, validation, and form integration.
  *
- * @param props - MultiSelect component properties
- * @param props.name - Required field name for form handling
- * @param props.options - Array of options with label and value properties
- * @param props.id - Optional unique identifier for the component
- * @param props.value - Controlled value array of selected option values
- * @param props.defaultValue - Default selected values. Default: []
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
- * @param props.label - Optional label text to display above the multiselect
- * @param props.errorMessage - Error message to display below the multiselect
- * @param props.placeholder - Placeholder text when no options are selected. Default: "Selecione..."
- * @param props.notFoundText - Text to display when no options match search. Default: "Sem opções disponíveis"
- * @param props.className - Additional CSS classes to apply
- * @param props.disabled - Whether the multiselect is disabled. Default: false
- * @param props.readOnly - Whether the multiselect is read-only. Default: false
- * @param props.isLoading - Controls loading state with spinner. Default: false
- * @param props.isSearchable - Whether the multiselect supports search functionality. Default: false
- * @param props.closeOnSelect - Whether to close dropdown after selecting an option. Default: false
- * @param props.onSearch - Callback function called when search value changes
- * @param props.onChange - Callback function called when selected values change
- * @param props.onFocus - Callback function called when multiselect gains focus
- * @param props.onBlur - Callback function called when multiselect loses focus
- * @param props.size - MultiSelect size. Default: "md"
- * @param props.variant - Visual variant of the multiselect. Default: "solid"
- * @param props.prefix - Text or icon to display at the beginning of the multiselect
- * @param props.leftIcon - Optional icon to display on the left side
- * @param props.optionMaxHeight - Maximum height for the options dropdown
- * @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"
+ * Selected values are stored as a JSON array in a hidden `<input>` for form submission.
+ * Integrates with `useForm` to display validation errors by field name.
  *
- * @returns MultiSelect JSX element wrapped in FieldWrapper with optional label and error
+ * @param props.name - Field name for form submission. Required.
+ * @param props.options - Array of selectable options (`{ label, value }`). Required.
+ * @param props.value - Controlled array of selected values.
+ * @param props.defaultValue - Uncontrolled default selection. Default: []
+ * @param props.label - Label text displayed above the multiselect.
+ * @param props.placeholder - Placeholder shown when nothing is selected. Default: "Selecione..."
+ * @param props.errorMessage - Validation error message.
+ * @param props.isSearchable - Enables search/filter within the dropdown. Default: false
+ * @param props.isLoading - Shows a loading spinner and disables interactions. Default: false
+ * @param props.closeOnSelect - Closes the dropdown after toggling an option. Default: false
+ * @param props.onChange - Callback fired when the selection changes.
+ * @param props.onSearch - Callback fired when the search query changes.
+ * @param props.size - MultiSelect size (`md` | `lg`). Default: "md"
+ * @param props.variant - Visual style variant. Default: "solid"
+ * @param props.orientation - Layout direction. Default: "horizontal"
+ * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
+ *
+ * @returns MultiSelect JSX element wrapped in `FieldTemplate`.
  *
  * @example
  * ```tsx
- * // Basic multiselect
+ * // Basic
  * <MultiSelect
  *   name="categories"
  *   options={[
  *     { label: "Technology", value: "tech" },
  *     { label: "Design", value: "design" },
- *     { label: "Marketing", value: "marketing" }
  *   ]}
  * />
  *
- * // MultiSelect with label and validation
+ * // With label, validation, and searchable
  * <MultiSelect
  *   name="skills"
- *   label="Select Skills"
+ *   label="Skills"
  *   showAsterisk
- *   errorMessage="Please select at least one skill"
- *   options={skillOptions}
- *   placeholder="Choose your skills..."
- * />
- *
- * // Searchable multiselect with custom styling
- * <MultiSelect
- *   name="countries"
- *   label="Countries"
  *   isSearchable
- *   variant="outline"
- *   size="lg"
- *   leftIcon={GlobeIcon}
- *   options={countryOptions}
- *   notFoundText="No countries found"
+ *   options={skillOptions}
+ *   errorMessage={errors.skills}
  * />
  *
- * // Controlled multiselect with callbacks
+ * // Controlled with async search
  * <MultiSelect
  *   name="tags"
  *   label="Tags"
  *   value={selectedTags}
  *   onChange={setSelectedTags}
- *   onSearch={handleSearch}
- *   closeOnSelect={false}
+ *   onSearch={fetchTagOptions}
  *   isLoading={isLoadingTags}
  *   options={tagOptions}
  * />
- *
- * // MultiSelect with prefix and custom behavior
- * <MultiSelect
- *   name="departments"
- *   label="Departments"
- *   prefix="Dept:"
- *   closeOnSelect={true}
- *   variant="underline"
- *   defaultValue={["hr", "it"]}
- *   options={departmentOptions}
- * />
  * ```
  */
 function MultiSelect(props) {

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

@@ -29,22 +29,31 @@ type PaginationProps = {
     onChange?: (page: number) => void;
 } & Omit<HTMLAttributes<HTMLDivElement>, "onChange">;
 /**
- * Pagination component for navigating through paginated data.
+ * Pagination — navigation control for paginated data sets.
+ *
+ * Renders page number buttons, prev/next arrows, and spread indicators (…)
+ * when the page count exceeds the visible range.
+ *
+ * @param props.totalCountRegisters - Total number of records. Required.
+ * @param props.currentPage - The currently active page (1-indexed). Required.
+ * @param props.registerPerPage - Records per page. Default: 10
+ * @param props.siblingsCount - Number of sibling pages visible on each side of the current page. Default: 1
+ * @param props.onChange - Callback fired when the user selects a different page.
+ *
+ * **...Other valid HTML properties for `<div>`**
+ *
+ * @returns Pagination JSX element.
  *
- * @component
  * @example
  * ```tsx
  * <Pagination
- *   totalCountRegisters={100}
- *   currentPage={1}
- *   registerPerPage={10}
+ *   totalCountRegisters={250}
+ *   currentPage={page}
+ *   registerPerPage={20}
  *   siblingsCount={1}
- *   onChange={(page) => console.log('Page changed to:', page)}
+ *   onChange={(p) => setPage(p)}
  * />
  * ```
- *
- * @param props - The component props
- * @returns A pagination navigation component with page numbers and navigation buttons
  */
 declare function Pagination(props: PaginationProps): import("react/jsx-runtime").JSX.Element;
 export { Pagination };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAQvC,OAAO,cAAc,CAAC;AAEtB;;GAEG;AACH,KAAK,eAAe,GAAG;IACrB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,mBAAmB,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;;;GAiBG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CA6EzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAQvC,OAAO,cAAc,CAAC;AAEtB;;GAEG;AACH,KAAK,eAAe,GAAG;IACrB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,mBAAmB,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CA6EzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/pagination/index.js

@@ -6,22 +6,31 @@ import { PaginationService } from "./paginationService";
 import { Spread } from "./spread";
 import "./styles.css";
 /**
- * Pagination component for navigating through paginated data.
+ * Pagination — navigation control for paginated data sets.
+ *
+ * Renders page number buttons, prev/next arrows, and spread indicators (…)
+ * when the page count exceeds the visible range.
+ *
+ * @param props.totalCountRegisters - Total number of records. Required.
+ * @param props.currentPage - The currently active page (1-indexed). Required.
+ * @param props.registerPerPage - Records per page. Default: 10
+ * @param props.siblingsCount - Number of sibling pages visible on each side of the current page. Default: 1
+ * @param props.onChange - Callback fired when the user selects a different page.
+ *
+ * **...Other valid HTML properties for `<div>`**
+ *
+ * @returns Pagination JSX element.
  *
- * @component
  * @example
  * ```tsx
  * <Pagination
- *   totalCountRegisters={100}
- *   currentPage={1}
- *   registerPerPage={10}
+ *   totalCountRegisters={250}
+ *   currentPage={page}
+ *   registerPerPage={20}
  *   siblingsCount={1}
- *   onChange={(page) => console.log('Page changed to:', page)}
+ *   onChange={(p) => setPage(p)}
  * />
  * ```
- *
- * @param props - The component props
- * @returns A pagination navigation component with page numbers and navigation buttons
  */
 function Pagination(props) {
     const { totalCountRegisters: baseTotalCountRegisters, siblingsCount: baseSiblingsCount, currentPage: baseCurrentPage, registerPerPage: baseRegisterPerPage, onChange: baseOnChange, ...rest } = props;