@arkyn/components 3.0.1-beta.154 → 3.0.1-beta.156

package/dist/components/maskedInput/index.js

@@ -1,108 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { InputMask } from "@react-input/mask";
-import { Loader2 } from "lucide-react";
-import { forwardRef, useId, useRef, useState, } from "react";
-import { useForm } from "../../hooks/useForm";
-import { IconRenderer } from "../../services/iconRenderer";
-import { FieldError } from "../fieldError";
-import { FieldLabel } from "../fieldLabel";
-import { FieldWrapper } from "../fieldWrapper";
-import "./style.css";
-const BaseInput = forwardRef((props, ref) => {
-    return _jsx("input", { ref: ref, ...props });
-});
-/**
- * MaskedInput — text input with a configurable mask for structured values (phones, CPF, credit cards, etc.).
- *
- * Built on `@react-input/mask`. Integrates with `useForm` to display validation errors by field name.
- *
- * @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.
- *
- * **...Other valid HTML properties for `<input>` (except `type`)**
- *
- * @returns MaskedInput JSX element wrapped in `FieldWrapper`.
- *
- * @example
- * ```tsx
- * // Brazilian mobile phone
- * <MaskedInput
- *   name="phone"
- *   mask="(__) _____-____"
- *   replacement={{ _: /\d/ }}
- *   label="Phone"
- * />
- *
- * // CPF with mask visible and validation
- * <MaskedInput
- *   name="cpf"
- *   label="CPF"
- *   mask="___.___.___-__"
- *   replacement="_"
- *   showMask
- *   showAsterisk
- *   errorMessage="Invalid CPF"
- * />
- *
- * // Credit card
- * <MaskedInput
- *   name="card"
- *   label="Credit Card"
- *   mask="____ ____ ____ ____"
- *   replacement={{ _: /\d/ }}
- *   leftIcon={CreditCard}
- * />
- * ```
- */
-function MaskedInput(props) {
-    const { name, disabled, title, style, variant = "solid", separate, mask, showMask, replacement, label, className: wrapperClassName = "", prefix, suffix, isLoading = false, leftIcon, readOnly, onFocus, onBlur, errorMessage: baseErrorMessage, defaultValue, showAsterisk, rightIcon, size = "md", id, value, placeholder, ...rest } = props;
-    const { fieldErrors } = useForm();
-    const [isFocused, setIsFocused] = useState(false);
-    const inputRef = useRef(null);
-    const inputId = id || useId();
-    const errorMessage = baseErrorMessage || fieldErrors?.[name];
-    const isError = !!errorMessage;
-    const isDisabled = disabled || isLoading;
-    const iconSizes = { md: 20, lg: 20 };
-    const iconSize = iconSizes[size];
-    const loadingPosition = rightIcon ? "right" : "left";
-    const showLeftSpinner = loadingPosition === "left" && isLoading;
-    const showRightSpinner = loadingPosition === "right" && isLoading;
-    function handleSectionClick() {
-        if (isDisabled || !inputRef?.current)
-            return;
-        setIsFocused(true);
-        inputRef.current.focus();
-    }
-    function handleFocus(e) {
-        setIsFocused(true);
-        if (onFocus)
-            onFocus(e);
-    }
-    function handleBlur(e) {
-        setIsFocused(false);
-        if (onBlur)
-            onBlur(e);
-    }
-    const hasPrefix = !!prefix ? "hasPrefix" : "";
-    const hasSuffix = !!suffix ? "hasSuffix" : "";
-    const errored = isError ? "errored" : "";
-    const opacity = isDisabled || readOnly || isLoading ? "opacity" : "";
-    const focused = isFocused ? "focused" : "";
-    const className = `arkynMaskedInput ${hasPrefix} ${hasSuffix} ${variant} ${size} ${opacity} ${errored} ${focused}`;
-    return (_jsxs(FieldWrapper, { className: wrapperClassName, children: [label && (_jsx(FieldLabel, { showAsterisk: showAsterisk, htmlFor: inputId, children: label })), _jsxs("section", { title: title, style: style, onClick: handleSectionClick, className: className, children: [_jsx(IconRenderer, { iconSize: iconSize, icon: prefix, className: "prefix" }), _jsx(IconRenderer, { show: showLeftSpinner, iconSize: iconSize, className: "spinner", icon: Loader2 }), _jsx(IconRenderer, { show: !isLoading, icon: leftIcon, iconSize: iconSize }), _jsx(InputMask, { component: BaseInput, mask: mask, replacement: replacement, separate: separate, showMask: showMask, ref: inputRef, onFocus: handleFocus, onBlur: handleBlur, disabled: isDisabled, readOnly: readOnly, id: inputId, name: name, defaultValue: defaultValue || undefined, placeholder: isDisabled ? value || placeholder : placeholder, value: isDisabled ? undefined : value, ...rest }), _jsx(IconRenderer, { show: !isLoading, icon: rightIcon, iconSize: iconSize }), _jsx(IconRenderer, { show: showRightSpinner, iconSize: iconSize, className: "spinner", icon: Loader2 }), _jsx(IconRenderer, { iconSize: iconSize, icon: suffix, className: "suffix" })] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
-}
-export { MaskedInput };

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

@@ -1,40 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AnimatePresence, motion } from "framer-motion";
-import { useScrollLock } from "../../../hooks/useScrollLock";
-import { ModalProvider } from "../modalContext";
-import "./styles.css";
-/**
- * ModalContainer — animated centered modal rendered over a backdrop overlay.
- *
- * Locks body scroll while open. Closes when the overlay is clicked.
- * Provides context consumed by `ModalHeader` (close button).
- *
- * @param props.isVisible - Whether the modal is open. Required.
- * @param props.makeInvisible - Called when the overlay is clicked. Required.
- *
- * **...Other valid HTML `<aside>` properties**
- *
- * @returns ModalContainer JSX element.
- *
- * @example
- * ```tsx
- * const [isOpen, setIsOpen] = useState(false);
- *
- * <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>
- * ```
- */
-function ModalContainer(args) {
-    const { isVisible, makeInvisible, children, className: baseClassName = "", ...rest } = args;
-    useScrollLock(isVisible);
-    const visibleClass = isVisible ? "visibleTrue" : "visibleFalse";
-    const className = `arkynModalContainer ${visibleClass} ${baseClassName}`;
-    return (_jsx(ModalProvider, { makeInvisible: makeInvisible, children: _jsx(AnimatePresence, { children: isVisible && (_jsxs("aside", { className: className.trim(), ...rest, children: [_jsx(motion.div, { className: "arkynModalContainerOverlay", transition: { duration: 0.15, ease: "easeOut" }, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: makeInvisible }), _jsx(motion.div, { className: "arkynModalContainerContent", transition: { duration: 0.15, ease: "easeOut" }, initial: { opacity: 0, scale: 0.75 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0 }, children: children })] })) }) }));
-}
-export { ModalContainer };

package/dist/components/modal/modalContext.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
-const modalContext = createContext({});
-function ModalProvider(props) {
-    return (_jsx(modalContext.Provider, { value: { makeInvisible: props.makeInvisible }, children: props.children }));
-}
-function useModal() {
-    return useContext(modalContext);
-}
-export { ModalProvider, useModal };

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

@@ -1,32 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-/**
- * ModalFooter — action bar at the bottom of a modal dialog.
- *
- * @param props.alignment - Horizontal alignment of children. Default: `"right"`
- *
- * **...Other valid HTML `<footer>` properties**
- *
- * @returns ModalFooter JSX element.
- *
- * @example
- * ```tsx
- * // Confirm / cancel pattern (right-aligned by default)
- * <ModalFooter>
- *   <Button variant="ghost" onClick={onClose}>Cancel</Button>
- *   <Button scheme="danger" onClick={onConfirm}>Delete</Button>
- * </ModalFooter>
- *
- * // Space-between layout (e.g. back / next in a wizard)
- * <ModalFooter alignment="between">
- *   <Button variant="outline" onClick={onBack}>Back</Button>
- *   <Button onClick={onNext}>Next</Button>
- * </ModalFooter>
- * ```
- */
-function ModalFooter(args) {
-    const { alignment = "right", className: baseClassName, ...rest } = args;
-    const className = `arkynModalFooter ${alignment} ${baseClassName}`;
-    return _jsx("footer", { className: className.trim(), ...rest });
-}
-export { ModalFooter };

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

@@ -1,34 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { X } from "lucide-react";
-import { useModal } from "../modalContext";
-import "./styles.css";
-/**
- * ModalHeader — header section for a `ModalContainer`, with an optional close button.
- *
- * The close button calls `makeInvisible` from the nearest `ModalContainer` context.
- * Must be rendered inside a `ModalContainer`.
- *
- * @param props.showCloseButton - Renders the X close button. Default: true
- *
- * **...Other valid HTML `<header>` properties**
- *
- * @returns ModalHeader JSX element.
- *
- * @example
- * ```tsx
- * <ModalContainer isVisible={isOpen} makeInvisible={() => setIsOpen(false)}>
- *   <ModalHeader>
- *     <h2>Edit profile</h2>
- *   </ModalHeader>
- *   <main>...</main>
- *   <ModalFooter><Button onClick={onSave}>Save</Button></ModalFooter>
- * </ModalContainer>
- * ```
- */
-function ModalHeader(args) {
-    const { showCloseButton = true, className: baseClassName, children, ...rest } = args;
-    const { makeInvisible } = useModal();
-    const className = `arkynModalHeader ${baseClassName}`;
-    return (_jsxs("header", { className: className.trim(), ...rest, children: [children, showCloseButton && (_jsx("button", { type: "button", onClick: makeInvisible, "aria-label": "Close modal button", className: "arkynModalHeaderCloseButton", children: _jsx(X, { size: 24 }) }))] }));
-}
-export { ModalHeader };

package/dist/components/multiSelect/index.js

@@ -1,135 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useRef, useState } from "react";
-import { useForm } from "../../hooks/useForm";
-import { FieldTemplate } from "../../services/fieldTemplate";
-import { IconRenderer } from "../../services/iconRenderer";
-import { MultiSelectChevron } from "./multiSelectChevron";
-import { MultiSelectContainer } from "./multiSelectContainer";
-import { MultiSelectContent } from "./multiSelectContent";
-import { MultiSelectMark } from "./multiSelectMark";
-import { MultiSelectOption } from "./multiSelectOption";
-import { MultiSelectOptionsContainer } from "./multiSelectOptionsContainer";
-import { MultiSelectOverlay } from "./multiSelectOverlay";
-import { MultiSelectSpinner } from "./multiSelectSpinner";
-/**
- * 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}
- * />
- * ```
- */
-function MultiSelect(props) {
-    const { name, options, className: wrapperClassName = "", placeholder = "Selecione...", closeOnSelect = false, defaultValue = [], errorMessage: baseErrorMessage, isLoading = false, readOnly = false, isSearchable = false, id, label, optionMaxHeight, showAsterisk, leftIcon: LeftIcon, onSearch, onChange, onBlur, notFoundText = "Sem opções disponíveis", onFocus, disabled: baseDisabled = false, prefix, size = "md", value, variant = "solid", unShowFieldTemplate = false, orientation = "vertical", } = props;
-    const { fieldErrors } = useForm();
-    const multiSelectRef = useRef(null);
-    const multiSelectId = id || useId();
-    const errorMessage = baseErrorMessage || fieldErrors?.[name];
-    const isError = !!errorMessage;
-    const disabled = baseDisabled || isLoading || readOnly;
-    const iconSizes = { md: 20, lg: 20 };
-    const iconSize = iconSizes[size];
-    const [search, setSearch] = useState("");
-    const [isFocused, setIsFocused] = useState(false);
-    const [selectedOptions, setSelectedOptions] = useState(defaultValue);
-    const forceSelectedOptions = value || selectedOptions;
-    function optionHasSelected(value) {
-        return forceSelectedOptions.includes(value);
-    }
-    function getOptionLabel(value) {
-        const option = options.find((option) => option.value === value);
-        return option?.label || "";
-    }
-    function handleContainerFocus() {
-        if (disabled || !multiSelectRef?.current || isFocused)
-            return;
-        setIsFocused(true);
-        multiSelectRef.current.focus();
-        onFocus && onFocus();
-    }
-    function handleBlur() {
-        setIsFocused(false);
-        if (onBlur && multiSelectRef.current)
-            multiSelectRef.current.blur();
-    }
-    function handleSearch(value) {
-        setSearch(value);
-        if (onSearch)
-            onSearch(value);
-    }
-    function handleChangeValue(value) {
-        if (optionHasSelected(value)) {
-            setSelectedOptions(selectedOptions.filter((v) => v !== value));
-            if (onChange)
-                onChange(selectedOptions.filter((v) => v !== value));
-        }
-        else {
-            setSelectedOptions([...selectedOptions, value]);
-            if (onChange)
-                onChange([...selectedOptions, value]);
-        }
-        if (closeOnSelect)
-            handleBlur();
-    }
-    const mappedOptions = options.filter((option) => {
-        if (props.onSearch)
-            return true;
-        if (!props.isSearchable)
-            return true;
-        if (option.label.toLowerCase().includes(search.toLowerCase()))
-            return true;
-        return false;
-    });
-    return (_jsx(FieldTemplate, { name: name, label: label, showAsterisk: showAsterisk, className: wrapperClassName, errorMessage: errorMessage, unShowFieldTemplate: unShowFieldTemplate, orientation: orientation, children: _jsxs(MultiSelectContainer, { handleContainerFocus: handleContainerFocus, disabled: disabled, isError: isError, isFocused: isFocused, isLoading: isLoading, readOnly: readOnly, size: size, variant: variant, prefixExists: !!prefix, id: multiSelectId, children: [_jsx("input", { ref: multiSelectRef, name: name, value: JSON.stringify(forceSelectedOptions), type: "hidden" }), _jsx(IconRenderer, { iconSize: iconSize, icon: prefix, className: "prefix" }), LeftIcon && _jsx(LeftIcon, { size: iconSize, strokeWidth: 2.5 }), _jsxs(MultiSelectContent, { size: size, children: [forceSelectedOptions.map((value) => (_jsx(MultiSelectMark, { label: getOptionLabel(value), value: value, handleChangeValue: handleChangeValue, disabled: disabled }, value))), forceSelectedOptions.length <= 0 && _jsx("p", { children: placeholder })] }), _jsxs(MultiSelectOptionsContainer, { isFocused: isFocused, isSearchable: isSearchable, search: search, onSearch: handleSearch, children: [mappedOptions.map(({ label, value }) => (_jsx(MultiSelectOption, { label: label, value: value, size: size, handleChangeValue: handleChangeValue, optionHasSelected: optionHasSelected }, value))), mappedOptions.length <= 0 && _jsx("p", { children: notFoundText })] }), _jsx(MultiSelectChevron, { disabled: disabled, isFocused: isFocused, readOnly: readOnly, iconSize: iconSize, isLoading: isLoading }), _jsx(MultiSelectSpinner, { iconSize: iconSize, isLoading: isLoading }), _jsx(MultiSelectOverlay, { handleBlur: handleBlur, isFocused: isFocused })] }) }));
-}
-export { MultiSelect };

package/dist/components/multiSelect/multiSelectChevron/index.js

@@ -1,18 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { ChevronDown } from "lucide-react";
-import "./styles.css";
-function MultiSelectChevron(props) {
-    const { iconSize, isLoading, disabled, readOnly, isFocused } = props;
-    const notAnimate = disabled || readOnly ? "notAnimate" : "";
-    const focused = isFocused ? "focused" : "";
-    const className = `arkynMultiSelectChevron ${notAnimate} ${focused}`;
-    if (isLoading)
-        return _jsx(_Fragment, {});
-    return (_jsx(ChevronDown, { className: className, strokeWidth: 2.5, style: {
-            minWidth: iconSize,
-            minHeight: iconSize,
-            maxWidth: iconSize,
-            maxHeight: iconSize,
-        } }));
-}
-export { MultiSelectChevron };

package/dist/components/multiSelect/multiSelectContainer/index.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-function MultiSelectContainer(props) {
-    const { children, handleContainerFocus, disabled, isError, isLoading, isFocused, className, readOnly, variant, size, id, prefixExists, } = props;
-    const hasPrefix = prefixExists ? "hasPrefix" : "";
-    const errored = isError ? "errored" : "";
-    const opacity = disabled || readOnly || isLoading ? "opacity" : "";
-    const focused = isFocused ? "focused" : "";
-    return (_jsx("section", { id: id, className: `arkynMultiSelectContainer ${hasPrefix} ${variant} ${size} ${opacity} ${errored} ${focused} ${className}`, onClick: handleContainerFocus, children: children }));
-}
-export { MultiSelectContainer };

package/dist/components/multiSelect/multiSelectContent/index.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-function MultiSelectContent(props) {
-    const { children, size } = props;
-    const className = `arkynMultiSelectContent ${size}`;
-    return _jsx("div", { className: className, children: children });
-}
-export { MultiSelectContent };

package/dist/components/multiSelect/multiSelectMark/index.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { X } from "lucide-react";
-import "./styles.css";
-function MultiSelectMark(props) {
-    const { label, value, disabled, handleChangeValue } = props;
-    return (_jsxs("div", { className: "arkynMultiSelectMark", children: [label, _jsx("button", { disabled: disabled, type: "button", onClick: (e) => {
-                    e.stopPropagation();
-                    handleChangeValue(value);
-                }, children: _jsx(X, {}) })] }));
-}
-export { MultiSelectMark };

package/dist/components/multiSelect/multiSelectOption/index.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check } from "lucide-react";
-import "./styles.css";
-function MultiSelectOption(props) {
-    const { label, optionHasSelected, handleChangeValue, value, size } = props;
-    const hasActive = optionHasSelected(value) ? "active" : "";
-    const className = `arkynMultiSelectOption ${size} ${hasActive}`;
-    return (_jsxs("div", { onClick: () => handleChangeValue(value), className: className, children: [label, " ", _jsx(Check, {})] }));
-}
-export { MultiSelectOption };

package/dist/components/multiSelect/multiSelectOptionsContainer/index.js

@@ -1,44 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Search } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
-import { useScrollLock } from "../../../hooks/useScrollLock";
-import { Input } from "../../input";
-import "./styles.css";
-function MultiSelectOptionsContainer(props) {
-    const { children, isFocused, isSearchable, search, onSearch } = props;
-    const containerRef = useRef(null);
-    const [position, setPosition] = useState("bottom");
-    useScrollLock(isFocused);
-    useEffect(() => {
-        if (!isFocused)
-            return;
-        const checkContainerPosition = () => {
-            if (!containerRef.current)
-                return;
-            const parentElement = containerRef.current.parentElement;
-            if (!parentElement)
-                return;
-            const parentRect = parentElement.getBoundingClientRect();
-            const viewportHeight = window.innerHeight;
-            const estimatedContainerHeight = 300;
-            const spaceBelow = viewportHeight - parentRect.bottom;
-            if (spaceBelow < estimatedContainerHeight &&
-                parentRect.top > estimatedContainerHeight) {
-                setPosition("top");
-            }
-            else {
-                setPosition("bottom");
-            }
-        };
-        checkContainerPosition();
-    }, [isFocused]);
-    function handleSearch(e) {
-        if (!isSearchable)
-            return;
-        onSearch(e.target.value);
-    }
-    if (!isFocused)
-        return _jsx(_Fragment, {});
-    return (_jsxs("div", { ref: containerRef, className: `arkynMultiSelectOptionsContainer ${position}`, children: [isSearchable && (_jsx(Input, { type: "search", name: "search-select", variant: "underline", leftIcon: Search, value: search, onChange: handleSearch })), children] }));
-}
-export { MultiSelectOptionsContainer };

package/dist/components/multiSelect/multiSelectOverlay/index.js

@@ -1,9 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-function MultiSelectOverlay(props) {
-    const { isFocused, handleBlur } = props;
-    if (!isFocused)
-        return _jsx(_Fragment, {});
-    return _jsx("aside", { className: "arkynMultiSelectOverlay", onClick: handleBlur });
-}
-export { MultiSelectOverlay };

package/dist/components/multiSelect/multiSelectSpinner/index.js

@@ -1,10 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { Loader2 } from "lucide-react";
-import "./styles.css";
-function MultiSelectSpinner(props) {
-    const { iconSize, isLoading } = props;
-    if (!isLoading)
-        return _jsx(_Fragment, {});
-    return (_jsx(Loader2, { className: "arkynMultiSelectSpinner", size: iconSize, strokeWidth: 2.5 }));
-}
-export { MultiSelectSpinner };

package/dist/components/pagination/chevronButton/index.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import "./styles.css";
-function ChevronButton(props) {
-    const { orientation, handlePageChange, disabled } = props;
-    const icon = { left: _jsx(ChevronLeft, {}), right: _jsx(ChevronRight, {}) };
-    return (_jsx("button", { className: "arkynChevronPageButton", disabled: disabled, onClick: handlePageChange, children: icon[orientation] }));
-}
-export { ChevronButton };

package/dist/components/pagination/currentButton/index.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-function CurrentButton({ currentPage }) {
-    return (_jsx("button", { className: "arkynPaginationCurrentButton", disabled: true, children: currentPage }));
-}
-export { CurrentButton };

package/dist/components/pagination/index.js

@@ -1,46 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronButton } from "./chevronButton";
-import { CurrentButton } from "./currentButton";
-import { PageButton } from "./pageButton";
-import { PaginationService } from "./paginationService";
-import { Spread } from "./spread";
-import "./styles.css";
-/**
- * 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)}
- * />
- * ```
- */
-function Pagination(props) {
-    const { totalCountRegisters: baseTotalCountRegisters, siblingsCount: baseSiblingsCount, currentPage: baseCurrentPage, registerPerPage: baseRegisterPerPage, onChange: baseOnChange, ...rest } = props;
-    const { currentPage, siblingsCount, previousPages, nextPages, lastPage, handlePageChange, handleMinusChange, handlePlusChange, } = new PaginationService({
-        totalCountRegisters: baseTotalCountRegisters,
-        currentPage: baseCurrentPage,
-        registerPerPage: baseRegisterPerPage,
-        siblingsCount: baseSiblingsCount,
-        onChange: baseOnChange,
-    });
-    return (_jsxs("div", { className: "arkynPagination", ...rest, children: [_jsx(ChevronButton, { orientation: "left", handlePageChange: handleMinusChange, disabled: currentPage <= 1 }), currentPage > 1 + siblingsCount && (_jsxs(_Fragment, { children: [_jsx(PageButton, { page: 1, handlePageChange: () => handlePageChange(1) }), currentPage > 2 + siblingsCount && _jsx(Spread, {})] })), previousPages.map((page, index) => (_jsx(PageButton, { page: page, handlePageChange: handleMinusChange }, index))), _jsx(CurrentButton, { currentPage: currentPage }), nextPages.map((page, index) => (_jsx(PageButton, { page: page, handlePageChange: handlePlusChange }, index))), currentPage + siblingsCount < lastPage && (_jsxs(_Fragment, { children: [currentPage + 1 + siblingsCount < lastPage && _jsx(Spread, {}), _jsx(PageButton, { page: lastPage, handlePageChange: () => handlePageChange(lastPage) })] })), _jsx(ChevronButton, { orientation: "right", handlePageChange: handlePlusChange, disabled: currentPage >= lastPage })] }));
-}
-export { Pagination };

package/dist/components/pagination/pageButton/index.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-function PageButton(props) {
-    const { page, handlePageChange } = props;
-    return (_jsx("button", { className: "arkynPaginationPageButton", onClick: handlePageChange, children: page }));
-}
-export { PageButton };

package/dist/components/pagination/paginationService.js

@@ -1,62 +0,0 @@
-class PaginationService {
-    currentPage;
-    totalCountRegisters;
-    registerPerPage;
-    siblingsCount;
-    lastPage;
-    onChange;
-    previousPages;
-    nextPages;
-    generatePagesArray(from, to) {
-        return [...new Array(to - from)]
-            .map((_, index) => from + index + 1)
-            .filter((page) => page > 0);
-    }
-    generatePreviousPages(currentPage, siblingsCount) {
-        if (!(currentPage > 1))
-            return [];
-        return this.generatePagesArray(currentPage - 1 - siblingsCount, currentPage - 1);
-    }
-    generateNextPages(currentPage, siblingsCount) {
-        if (!(currentPage < this.lastPage))
-            return [];
-        return this.generatePagesArray(currentPage, Math.min(currentPage + siblingsCount, this.lastPage));
-    }
-    constructor(props) {
-        this.totalCountRegisters = props.totalCountRegisters;
-        this.currentPage = props.currentPage;
-        this.registerPerPage = props?.registerPerPage || 20;
-        this.siblingsCount = props?.siblingsCount || 2;
-        this.lastPage = Math.ceil(this.totalCountRegisters / this.registerPerPage);
-        this.onChange = props?.onChange;
-        this.previousPages = this.generatePreviousPages(this.currentPage, this.siblingsCount);
-        this.nextPages = this.generateNextPages(this.currentPage, this.siblingsCount);
-    }
-    handlePageChange = (page) => {
-        if (page < 1)
-            return;
-        if (page > this.lastPage)
-            return;
-        if (this.onChange) {
-            this.currentPage = page;
-            this.onChange(this.currentPage);
-        }
-    };
-    handlePlusChange = () => {
-        if (this.currentPage >= this.lastPage)
-            return;
-        if (this.onChange) {
-            this.currentPage += 1;
-            this.onChange(this.currentPage);
-        }
-    };
-    handleMinusChange = () => {
-        if (this.currentPage <= 1)
-            return;
-        if (this.onChange) {
-            this.currentPage -= 1;
-            this.onChange(this.currentPage);
-        }
-    };
-}
-export { PaginationService };

package/dist/components/pagination/spread/index.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Ellipsis } from "lucide-react";
-import "./styles.css";
-function Spread() {
-    return (_jsx("p", { className: "arkynPaginationSpread", children: _jsx(Ellipsis, {}) }));
-}
-export { Spread };