@arkyn/components 3.0.1-beta.20 → 3.0.1-beta.201

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

@@ -0,0 +1,134 @@
+import type { LucideIcon } from "lucide-react";
+import { type 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 — multi-option dropdown with optional search, label, validation, and form integration.
+ *
+ * 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.
+ *
+ * @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
+ *   name="categories"
+ *   options={[
+ *     { label: "Technology", value: "tech" },
+ *     { label: "Design", value: "design" },
+ *   ]}
+ * />
+ *
+ * // With label, validation, and searchable
+ * <MultiSelect
+ *   name="skills"
+ *   label="Skills"
+ *   showAsterisk
+ *   isSearchable
+ *   options={skillOptions}
+ *   errorMessage={errors.skills}
+ * />
+ *
+ * // Controlled with async search
+ * <MultiSelect
+ *   name="tags"
+ *   label="Tags"
+ *   value={selectedTags}
+ *   onChange={setSelectedTags}
+ *   onSearch={fetchTagOptions}
+ *   isLoading={isLoadingTags}
+ *   options={tagOptions}
+ * />
+ * ```
+ */
+declare function MultiSelect(props: MultiSelectProps): import("react").JSX.Element;
+export { MultiSelect };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/multiSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,KAAK,UAAU,EAA2B,MAAM,OAAO,CAAC;AAejE,KAAK,gBAAgB,GAAG;IACvB,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;CAC9D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA8K3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

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

@@ -0,0 +1,11 @@
+import "./styles.css";
+type MultiSelectChevronProps = {
+    isLoading: boolean;
+    iconSize: number;
+    disabled: boolean;
+    readOnly: boolean;
+    isFocused: boolean;
+};
+declare function MultiSelectChevron(props: MultiSelectChevronProps): import("react").JSX.Element | null;
+export { MultiSelectChevron };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/multiSelect/multiSelectChevron/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,uBAAuB,GAAG;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,iBAAS,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,sCAqBzD;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

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

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import "./styles.css";
+type MultiSelectContainerProps = {
+    children: ReactNode;
+    handleContainerFocus: () => void;
+    prefixExists: boolean;
+    isError: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    isLoading: boolean;
+    isFocused: boolean;
+    className?: string;
+    id: string;
+    variant: "solid" | "outline" | "underline";
+    size: "md" | "lg";
+};
+declare function MultiSelectContainer(props: MultiSelectContainerProps): import("react").JSX.Element;
+export { MultiSelectContainer };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/multiSelect/multiSelectContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,cAAc,CAAC;AAEtB,KAAK,yBAAyB,GAAG;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,YAAY,EAAE,OAAO,CAAC;IACtB,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,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAC3C,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;CAClB,CAAC;AAEF,iBAAS,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,+BA8B7D;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+import "./styles.css";
+type MultiSelectContentProps = {
+    children: ReactNode;
+    size: "md" | "lg";
+};
+declare function MultiSelectContent(props: MultiSelectContentProps): import("react").JSX.Element;
+export { MultiSelectContent };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/multiSelect/multiSelectContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,cAAc,CAAC;AAEtB,KAAK,uBAAuB,GAAG;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;CAClB,CAAC;AAEF,iBAAS,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,+BAIzD;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

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

@@ -0,0 +1,10 @@
+import "./styles.css";
+type MultiSelectMarkProps = {
+    label: string;
+    disabled: boolean;
+    value: string;
+    handleChangeValue: (value: string) => void;
+};
+declare function MultiSelectMark(props: MultiSelectMarkProps): import("react").JSX.Element;
+export { MultiSelectMark };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/multiSelect/multiSelectMark/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,oBAAoB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,+BAmBnD;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

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

@@ -0,0 +1,11 @@
+import "./styles.css";
+type MultiSelectOptionProps = {
+    value: string;
+    label: string;
+    size: "md" | "lg";
+    optionHasSelected: (value: string) => boolean;
+    handleChangeValue: (value: string) => void;
+};
+declare function MultiSelectOption(props: MultiSelectOptionProps): import("react").JSX.Element;
+export { MultiSelectOption };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/multiSelect/multiSelectOption/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,sBAAsB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC9C,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,iBAAS,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,+BAWvD;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

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

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+import "./styles.css";
+type MultiSelectOptionsContainerProps = {
+    isFocused: boolean;
+    isSearchable: boolean;
+    children: ReactNode;
+    search: string;
+    onSearch: (value: string) => void;
+};
+declare function MultiSelectOptionsContainer(props: MultiSelectOptionsContainerProps): import("react").JSX.Element | null;
+export { MultiSelectOptionsContainer };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/multiSelect/multiSelectOptionsContainer/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAEN,KAAK,SAAS,EAId,MAAM,OAAO,CAAC;AAKf,OAAO,cAAc,CAAC;AAEtB,KAAK,gCAAgC,GAAG;IACvC,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,iBAAS,2BAA2B,CAAC,KAAK,EAAE,gCAAgC,sCA8D3E;AAED,OAAO,EAAE,2BAA2B,EAAE,CAAC"}

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

@@ -0,0 +1,8 @@
+import "./styles.css";
+type MultiSelectOverlayProps = {
+    isFocused: boolean;
+    handleBlur: () => void;
+};
+declare function MultiSelectOverlay(props: MultiSelectOverlayProps): import("react").JSX.Element | null;
+export { MultiSelectOverlay };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/multiSelect/multiSelectOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,KAAK,uBAAuB,GAAG;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,iBAAS,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,sCAIzD;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

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

@@ -0,0 +1,8 @@
+import "./styles.css";
+type MultiSelectSpinnerProps = {
+    iconSize: number;
+    isLoading: boolean;
+};
+declare function MultiSelectSpinner(props: MultiSelectSpinnerProps): import("react").JSX.Element | null;
+export { MultiSelectSpinner };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/multiSelect/multiSelectSpinner/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,uBAAuB,GAAG;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,iBAAS,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,sCAWzD;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

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

@@ -0,0 +1,9 @@
+import "./styles.css";
+type ChevronButtonProps = {
+    orientation: "left" | "right";
+    disabled: boolean;
+    handlePageChange: () => void;
+};
+declare function ChevronButton(props: ChevronButtonProps): import("react").JSX.Element;
+export { ChevronButton };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/pagination/chevronButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,kBAAkB,GAAG;IACzB,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAc/C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

@@ -0,0 +1,7 @@
+import "./styles.css";
+type CurrentButtonProps = {
+    currentPage: number;
+};
+declare function CurrentButton({ currentPage }: CurrentButtonProps): import("react").JSX.Element;
+export { CurrentButton };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/pagination/currentButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,KAAK,kBAAkB,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,iBAAS,aAAa,CAAC,EAAE,WAAW,EAAE,EAAE,kBAAkB,+BAMzD;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

@@ -0,0 +1,60 @@
+import type { HTMLAttributes } from "react";
+import "./styles.css";
+/**
+ * Props for the Pagination component.
+ */
+type PaginationProps = {
+    /**
+     * Number of sibling pages to show on each side of the current page.
+     * @default 1
+     */
+    siblingsCount?: number;
+    /**
+     * Total number of records/items to paginate.
+     */
+    totalCountRegisters: number;
+    /**
+     * The currently active page number (1-indexed).
+     */
+    currentPage: number;
+    /**
+     * Number of records to display per page.
+     * @default 10
+     */
+    registerPerPage?: number;
+    /**
+     * Callback function triggered when the page changes.
+     * @param page - The new page number
+     */
+    onChange?: (page: number) => void;
+} & Omit<HTMLAttributes<HTMLDivElement>, "onChange">;
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <Pagination
+ *   totalCountRegisters={250}
+ *   currentPage={page}
+ *   registerPerPage={20}
+ *   siblingsCount={1}
+ *   onChange={(p) => setPage(p)}
+ * />
+ * ```
+ */
+declare function Pagination(props: PaginationProps): import("react").JSX.Element;
+export { Pagination };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAQ5C,OAAO,cAAc,CAAC;AAEtB;;GAEG;AACH,KAAK,eAAe,GAAG;IACtB;;;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;CAClC,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,+BA6EzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

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

@@ -0,0 +1,8 @@
+import "./styles.css";
+type PageButtonProps = {
+    page: number;
+    handlePageChange: () => void;
+};
+declare function PageButton(props: PageButtonProps): import("react").JSX.Element;
+export { PageButton };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/pagination/pageButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,KAAK,eAAe,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,+BAWzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

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

@@ -0,0 +1,26 @@
+type PaginationServiceConstructor = {
+    currentPage: number;
+    totalCountRegisters: number;
+    registerPerPage?: number;
+    siblingsCount?: number;
+    onChange?: (page: number) => void;
+};
+declare class PaginationService {
+    currentPage: number;
+    totalCountRegisters: number;
+    registerPerPage: number;
+    siblingsCount: number;
+    lastPage: number;
+    onChange?: (page: number) => void;
+    previousPages: number[];
+    nextPages: number[];
+    private generatePagesArray;
+    private generatePreviousPages;
+    private generateNextPages;
+    constructor(props: PaginationServiceConstructor);
+    handlePageChange: (page: number) => void;
+    handlePlusChange: () => void;
+    handleMinusChange: () => void;
+}
+export { PaginationService };
+//# sourceMappingURL=paginationService.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"paginationService.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/paginationService.ts"],"names":[],"mappings":"AAAA,KAAK,4BAA4B,GAAG;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,cAAM,iBAAiB;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,SAAS,EAAE,MAAM,EAAE,CAAC;IAEpB,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,iBAAiB;gBAQb,KAAK,EAAE,4BAA4B;IAiB/C,gBAAgB,GAAI,MAAM,MAAM,UAO9B;IAEF,gBAAgB,aAMd;IAEF,iBAAiB,aAMf;CACF;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

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

@@ -0,0 +1,4 @@
+import "./styles.css";
+declare function Spread(): import("react").JSX.Element;
+export { Spread };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/pagination/spread/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,iBAAS,MAAM,gCAMd;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

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

@@ -0,0 +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;
+    /** 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 — phone number field with an integrated country selector and automatic mask formatting.
+ *
+ * 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.
+ *
+ * @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
+ * <PhoneInput name="phone" label="Phone" />
+ *
+ * // Controlled with outline variant
+ * <PhoneInput
+ *   name="contactPhone"
+ *   label="Contact Phone"
+ *   value={phone}
+ *   onChange={(v) => setPhone(v)}
+ *   variant="outline"
+ *   size="lg"
+ * />
+ *
+ * // Pre-selected country (US)
+ * <PhoneInput
+ *   name="phone"
+ *   label="Phone"
+ *   defaultCountryIso="US"
+ *   showAsterisk
+ * />
+ * ```
+ */
+declare function PhoneInput(props: PhoneInputProps): import("react").JSX.Element;
+export { PhoneInput };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/phoneInput/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAqB7C,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;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,+BAwKzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

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

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import "./styles.css";
+type PhoneInputContainerProps = {
+    children: ReactNode;
+    onFocus: () => void;
+    isError: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    isLoading: boolean;
+    isFocused: boolean;
+    className?: string;
+    variant: "solid" | "outline";
+    size: "md" | "lg";
+};
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,8 @@
+import "./styles.css";
+type PhoneInputCountriesOverlayProps = {
+    isOpen: boolean;
+    onClick: () => void;
+};
+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

@@ -0,0 +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;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

@@ -0,0 +1,17 @@
+import "./styles.css";
+type CountryType = {
+    name: string;
+    code: string;
+    iso: string;
+    flag: string;
+    mask: string | string[];
+};
+type PhoneInputCountryOptionProps = {
+    country: CountryType;
+    size: "md" | "lg";
+    isActive: boolean;
+    handleChangeValue: (country: CountryType) => void;
+};
+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

@@ -0,0 +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;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

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+import "./styles.css";
+type PhoneInputCountryOptionsContainerProps = {
+    isOpen: boolean;
+    children: ReactNode;
+    search: string;
+    placeholder: string;
+    onSearch: (value: string) => void;
+};
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,16 @@
+import "./styles.css";
+type CountryType = {
+    name: string;
+    code: string;
+    iso: string;
+    flag: string;
+    mask: string | string[];
+};
+type PhoneInputCountrySelectorProps = {
+    size: "md" | "lg";
+    currentCountry: CountryType;
+    onClick: () => void;
+};
+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

@@ -0,0 +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;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"}