@zuzjs/ui 0.7.4 → 0.7.5

package/dist/esm/src/comps/Form/index.js

@@ -0,0 +1,267 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, startTransition, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import Box from "../Box";
+import { useBase } from "../../hooks";
+import Sheet, { isSheetHandler } from "../Sheet";
+import Cover from "../Cover";
+import { FORMVALIDATION, SHEET } from "../../types/enums";
+import { addPropsToChildren, isEmail, withPost } from "../../funs";
+/**
+ * {@link Form} is a controlled component designed to handle form data submission, validation, and display of loading or error states.
+ * It allows for optional server-side submission through an action endpoint and customizable success/error handling callbacks.
+ *
+ * The component also provides an interface for controlling loading and error states from a parent component using {@link FormHandler}.
+ *
+ * @param props - Properties to configure form behavior, validation messages, submission handling, and visual feedback.
+ * @param ref - Reference to the {@link FormHandler} interface, exposing methods to control loading and error states from the parent.
+ */
+const Form = forwardRef((props, ref) => {
+    const { name, cover, spinner, errors, action, children, withData, beforeSubmit, onSubmit, onError, onSuccess, resetOnSuccess, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
+    const [loading, setLoading] = useState(false);
+    const innerRef = useRef(null);
+    const sheet = useRef(null);
+    const submit = useRef(null);
+    /**
+     * Utility function to select multiple DOM elements within the form based on a CSS query.
+     * @param query - CSS selector to match elements inside the form.
+     */
+    const _nodes = useCallback((query) => {
+        if (innerRef.current)
+            return innerRef.current.querySelectorAll(query);
+        return [];
+    }, [innerRef.current]);
+    const _getFields = (el) => {
+        return {
+            name: el.name || el.getAttribute(`name`) || el.getAttribute(`data-name`),
+            required: el.required ? true
+                : el.getAttribute(`data-required`) ? el.getAttribute(`data-required`) == `true` : false,
+            with: el.with || el.getAttribute(`with`)
+        };
+    };
+    const _getPinValue = (el) => {
+        const _pin = [];
+        el.querySelectorAll(`.--input`).forEach((input) => {
+            _pin.push(input.value);
+        });
+        return _pin.join('');
+    };
+    /**
+     * Validates form fields based on their type and custom attributes.
+     *
+     * @param el - The element to validate.
+     * @returns Whether the element meets the required validation criteria.
+     */
+    const _validate = useCallback((el) => {
+        const { name: _name, required: _required, with: _with } = _getFields(el);
+        if (_required) {
+            /**
+             * @internal
+             * Required field validation */
+            if (el.type == `checkbox` && el.checked == false) {
+                return false;
+            }
+            if (el.classList.contains(`--otp`)) {
+                const _pin = _getPinValue(el);
+                if (_pin == `` || _pin.length < parseInt(el.getAttribute(`data-size`))) {
+                    return false;
+                }
+            }
+            if (el.classList.contains(`--select`) && el.querySelector(`button.--selected`).dataset.value == `-1`) {
+                return false;
+            }
+            if (el.value == ``)
+                return false;
+        }
+        /**
+         * @internal
+         * Additional validation based on `with` attribute
+         */
+        if (el.getAttribute(`with`)) {
+            let _with = el.getAttribute(`with`);
+            if (_with.includes(`@`)) {
+                _with = _with.split(`@`)[0];
+                if (_with == `match`) {
+                    _with = FORMVALIDATION.MatchField;
+                }
+            }
+            switch (_with.toUpperCase()) {
+                case FORMVALIDATION.Email:
+                    return isEmail(el.value);
+                    break;
+                case FORMVALIDATION.Uri:
+                    console.log(`Add FORMVALIDATION.Uri`);
+                    return false;
+                    break;
+                case FORMVALIDATION.Password:
+                    console.log(`Add FORMVALIDATION.Password`);
+                    return false;
+                    break;
+                case FORMVALIDATION.MatchField:
+                    const [__, field] = el.getAttribute(`with`).split(`@`);
+                    const _el = document.querySelector(`[name=${field.trim()}]`);
+                    if (!_el)
+                        return false;
+                    // console.log(`matching`, _el.name, _el.value, el.name, el.value)                    
+                    if (_el && _el.value != el.value) {
+                        return false;
+                    }
+                    break;
+                default:
+                    return true;
+            }
+        }
+        return true;
+    }, [innerRef.current]);
+    /**
+     * Constructs the form data and validates the fields.
+     *
+     * @returns Form data object along with validation status and error information.
+     */
+    const _buildFormData = useCallback(() => {
+        const data = {};
+        const payload = {};
+        let _error = null;
+        let _errorMsg = null;
+        Array.from(_nodes(`[name]`))
+            .forEach((el) => {
+            const { name: _name, required: _required, with: _with } = _getFields(el);
+            let valid = true;
+            if (_required || _with)
+                valid = _validate(el);
+            data[_name] = {
+                valid: valid,
+                value: el.type == `checkbox` ? el.checked == true ? el.value : false
+                    : el.classList.contains(`--otp`) ? _getPinValue(el)
+                        : el.classList.contains(`--select`) ? el.querySelector(`button.--selected`).dataset.value : el.value
+            };
+            payload[_name] = el.type == `checkbox` ? el.checked == true ? true : false
+                : el.classList.contains(`--otp`) ? _getPinValue(el)
+                    : el.classList.contains(`--select`) ? el.querySelector(`button.--selected`).dataset.value : el.value;
+            if (!valid) {
+                if (_error == null && errors) {
+                    _error = el;
+                    _errorMsg = errors[_name];
+                }
+                el.classList.add(`input-with-error`);
+            }
+            else
+                el.classList.remove(`input-with-error`);
+        });
+        if (_error) {
+            const _nxt = _error;
+            if (_nxt.classList.contains(`--otp`)) {
+                for (const i of Array.from(_nxt.querySelectorAll(`.--input`))) {
+                    const input = i;
+                    if (input.value == ``) {
+                        input.focus();
+                        break;
+                    }
+                }
+            }
+            else
+                _nxt.focus();
+        }
+        return {
+            error: _error != null,
+            errorMsg: _errorMsg || `Fix errors to continue...`,
+            data, payload
+        };
+    }, [innerRef.current]);
+    /**
+     * Handler for form submission that validates and processes the form data.
+     */
+    const _onSubmit = useCallback(() => {
+        const { error, errorMsg, payload } = _buildFormData();
+        if (error) {
+            sheet.current.error(errorMsg);
+        }
+        else if (action) {
+            // If `action` is defined, submit the form data to the specified endpoint
+            startTransition(async () => {
+                beforeSubmit && beforeSubmit(payload);
+                if (isSheetHandler(cover)) {
+                    cover.setLoading(true);
+                }
+                else
+                    setLoading(true);
+                sheet.current.hide();
+                // submit.current?.setState(ButtonState.Loading)
+                withPost(action, { ...payload, ...(withData || {}) })
+                    .then(_resp => {
+                    const resp = _resp;
+                    // submit.current?.reset()
+                    if (isSheetHandler(cover)) {
+                        cover.setLoading(false);
+                    }
+                    else
+                        setLoading(false);
+                    if (resetOnSuccess) {
+                        Array.from(_nodes(`[name]`)).forEach((el) => {
+                            if (el instanceof HTMLInputElement)
+                                el.value = ``;
+                        });
+                    }
+                    if (onSuccess)
+                        onSuccess(resp);
+                    else {
+                        sheet.current.hide();
+                        sheet.current.success(resp.message || `Redirecting..`);
+                    }
+                })
+                    .catch(err => {
+                    // console.warn(`Error occurred while submitting form`, err)
+                    if (isSheetHandler(cover)) {
+                        cover.setLoading(false);
+                    }
+                    else
+                        setLoading(false);
+                    // submit.current?.reset()
+                    if (onError)
+                        onError(err);
+                    else
+                        sheet.current.show(err.message || `We cannot process your request at this time.`, 4, SHEET.Error);
+                });
+            });
+        }
+        else {
+            onSubmit && onSubmit(payload);
+        }
+    }, [action, sheet.current, innerRef.current]);
+    /**
+     * Initializes the form by adding click event listeners to submit buttons.
+     */
+    const _init = useCallback(() => {
+        const _submit = _nodes(`[type=submit]`);
+        if (!_submit || _submit.length == 0) {
+            console.warn(`You should add at least 1 button with type=\`SUBMIT\``);
+        }
+        else {
+            _submit.forEach(el => {
+                el.addEventListener(`click`, _onSubmit);
+            });
+        }
+    }, [innerRef.current]);
+    const buildChildren = useMemo(() => addPropsToChildren(children, child => child.props.type == `submit`, { ref: submit }), [children]);
+    useImperativeHandle(ref, () => ({
+        setLoading(mod) {
+            if (mod) {
+                sheet.current.hide();
+            }
+            setLoading(mod);
+        },
+        showError(errorMsg) {
+            sheet.current.error(errorMsg, 4);
+        },
+        hideError() {
+            sheet.current.hide();
+        },
+        init() {
+            _init();
+        }
+    }));
+    useEffect(_init, []);
+    return _jsxs(Box, { ref: innerRef, style: style, className: `--form flex rel ${className} ${name ? `--form-${name.replace(/\s+/g, `-`)}` : ``}`, propsToRemove: [`withData`, `action`, `onSubmit`, `onSuccess`, `onError`], children: [_jsx(Sheet, { ref: sheet, as: `--sheet-form` }), !isSheetHandler(cover) && _jsx(Cover, { message: cover ? cover.message || undefined : `working`, spinner: spinner, color: cover ? `color` in cover ? cover.color : `#ffffff` : `#ffffff`, when: loading }), buildChildren] });
+});
+export default Form;

package/dist/esm/src/comps/Icon/index.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import { BoxProps } from "../Box";
+import { Size } from "../../types/enums";
+export type IconProps = Omit<BoxProps, `name`> & {
+    name: string | ReactNode;
+    pathCount?: number;
+    size?: Size;
+};
+declare const Icon: import("react").ForwardRefExoticComponent<Omit<BoxProps, "name"> & {
+    name: string | ReactNode;
+    pathCount?: number;
+    size?: Size;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Icon;

package/dist/esm/src/comps/Icon/index.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useBase } from "../../hooks";
+import Span from "../Span";
+import { Size } from "../../types/enums";
+const Icon = forwardRef((props, ref) => {
+    const { name, pathCount, size, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
+    return _jsx("div", { style: style, className: `icon-${name} --icon --${size || Size.Default} ${className}`.trim(), ref: ref, ...rest, children: Array(pathCount || 0).fill(0).map((p, i) => _jsx(Span, { className: `path${i + 1}` }, `${name}-layer-${i}`)) });
+});
+export default Icon;

package/dist/esm/src/comps/Image/index.d.ts

@@ -0,0 +1,4 @@
+import { Props } from '../../types';
+export type ImageProps = Props<`img`> & {};
+declare const Image: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref">, keyof import("../..").ZuzProps> & import("react").RefAttributes<HTMLImageElement>>;
+export default Image;

package/dist/esm/src/comps/Image/index.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useBase } from '../../hooks';
+const Image = forwardRef((props, ref) => {
+    const { style, className, rest } = useBase(props);
+    if (!rest.src || rest.src == ``)
+        return null;
+    return _jsx("img", { ref: ref, style: style, className: `${className} flex`, ...rest });
+});
+export default Image;

package/dist/esm/src/comps/Input/index.d.ts

@@ -0,0 +1,15 @@
+import { Props } from '../../types';
+import { FORMVALIDATION, Size, Variant } from '../../types/enums';
+export type InputProps = Props<`input`> & {
+    numeric?: boolean;
+    size?: Size;
+    variant?: Variant;
+    with?: FORMVALIDATION;
+};
+declare const Input: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../..").ZuzProps> & {
+    numeric?: boolean;
+    size?: Size;
+    variant?: Variant;
+    with?: FORMVALIDATION;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default Input;

package/dist/esm/src/comps/Input/index.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useBase } from '../../hooks';
+const Input = forwardRef((props, ref) => {
+    const { size, variant, numeric, ...pops } = props;
+    const { style, className, rest } = useBase(pops);
+    const handleInput = (event) => {
+        if (numeric) {
+            event.currentTarget.value = event.currentTarget.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');
+        }
+    };
+    return _jsx("input", { className: `--input ${size || variant ? `--${size || variant}` : ``} flex ${className}`.trim(), style: style, onInput: handleInput, ref: ref, ...rest });
+});
+export default Input;

package/dist/esm/src/comps/Label/index.d.ts

@@ -0,0 +1,4 @@
+import { Props } from '../../types';
+export type LabelProps = Props<`label`> & {};
+declare const Label: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref">, keyof import("../..").ZuzProps> & import("react").RefAttributes<HTMLLabelElement>>;
+export default Label;

package/dist/esm/src/comps/Label/index.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useBase } from '../../hooks';
+const Label = forwardRef((props, ref) => {
+    const { style, className, rest } = useBase(props);
+    return _jsx("label", { ref: ref, style: style, className: className, ...rest });
+});
+export default Label;

package/dist/esm/src/comps/List/index.d.ts

@@ -0,0 +1,7 @@
+import { Size } from "../../types/enums";
+declare const List: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> | Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref">, keyof import("../..").ZuzProps> & {
+    size?: Size;
+    items: import("./types").ListItem[];
+    ol?: boolean;
+} & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
+export default List;

package/dist/esm/src/comps/List/index.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement, forwardRef } from "react";
+import { useBase } from "../../hooks";
+import { Size } from "../../types/enums";
+import Item from "./item";
+const List = forwardRef((props, ref) => {
+    const { items, size, ol, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
+    const Tag = ol == true ? 'ol' : 'ul';
+    return createElement(Tag, {
+        className: `--list --${size || Size.Small} flex cols ${className}`.trim(),
+        style, ref,
+        ...rest,
+        children: items.map((item, index) => _jsx(Item, { meta: item }, `list-item-${typeof item == `string` ? String(item) : item.label}-${index}`))
+    });
+});
+export default List;

package/dist/esm/src/comps/List/item.d.ts

@@ -0,0 +1,5 @@
+import { type ListItem } from "./types";
+declare const Item: (props: {
+    meta: ListItem;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Item;

package/dist/esm/src/comps/List/item.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useBase, useDelayed } from "../../hooks";
+const Item = (props) => {
+    const { meta } = props;
+    const mounted = useDelayed();
+    const { label, ...pops } = meta;
+    const { className, style, rest } = useBase({
+        ...pops,
+        ...(pops.animate ? { animate: {
+                ...pops.animate,
+                when: mounted
+            } } : {})
+    });
+    return _jsx("li", { style: style, className: className, ...rest, children: typeof meta == `string` ? meta : label });
+};
+export default Item;

package/dist/esm/src/comps/List/types.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+import { Props } from "../../types";
+import { Size } from "../../types/enums";
+import { animationProps } from "../../types/interfaces";
+export type ListItemObject = {
+    icon?: ReactNode;
+    label?: ReactNode;
+    action?: ReactNode;
+    className?: string;
+    animate?: animationProps;
+    onClick?: (event: any) => void;
+};
+export type ListItem = Props<`li`> & (ReactNode | ListItemObject);
+export type ListProps = Props<`ul` | `ol`> & {
+    size?: Size;
+    items: ListItem[];
+    ol?: boolean;
+};

package/dist/esm/src/comps/List/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/comps/Network/index.d.ts

@@ -0,0 +1,7 @@
+import { Size } from "../../types/enums";
+declare const NetworkManager: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
+    size?: Size;
+    offlineMessage?: string;
+    onlineMessage?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default NetworkManager;

package/dist/esm/src/comps/Network/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect } from "react";
+import Box from "../Box";
+import Text from "../Text";
+import { ALERT, Size, TRANSITION_CURVES } from "../../types/enums";
+import { useNetworkStatus } from "../../hooks";
+import SVGIcons from "../svgicons";
+const NetworkManager = forwardRef((props, ref) => {
+    const isOnline = useNetworkStatus();
+    const { onlineMessage, offlineMessage, size } = props;
+    useEffect(() => {
+    }, []);
+    return _jsxs(Box, { animate: {
+            from: { x: `-50%`, y: 200, opacity: 0 },
+            to: { x: `-50%`, y: 0, opacity: 1 },
+            when: isOnline == false,
+            curve: TRANSITION_CURVES.Spring,
+            duration: 0.5,
+            delay: 2
+        }, className: `--network-manager --${isOnline == true ? `online` : `offline`} --${size || Size.Small} fixed flex`, children: [_jsx(Box, { className: `--ico`, children: isOnline ? SVGIcons[ALERT.Success] : SVGIcons[ALERT.Error] }), _jsx(Text, { as: `--message`, children: isOnline ? onlineMessage || `internet connection restored :)` : offlineMessage || `no internet connection` })] });
+});
+export default NetworkManager;

package/dist/esm/src/comps/Network/types.d.ts

@@ -0,0 +1,7 @@
+import { Size } from "../../types/enums";
+import { BoxProps } from "../Box";
+export type NetworkManagerprops = BoxProps & {
+    size?: Size;
+    offlineMessage?: string;
+    onlineMessage?: string;
+};

package/dist/esm/src/comps/Network/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/comps/Overlay/index.d.ts

@@ -0,0 +1,8 @@
+import { BoxProps } from "../Box";
+export type OverlayProps = BoxProps & {
+    when?: boolean;
+};
+export declare const Overlay: import("react").ForwardRefExoticComponent<BoxProps & {
+    when?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Overlay;

package/dist/esm/src/comps/Overlay/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Box from "../Box";
+import { TRANSITIONS } from "../../types/enums";
+export const Overlay = forwardRef((props, ref) => {
+    const { when, ...pops } = props;
+    return _jsx(Box, { ref: ref, "aria-hidden": !when, className: `--overlay fixed fill`, animate: {
+            transition: TRANSITIONS.FadeIn,
+            when,
+        }, ...pops });
+});
+export default Overlay;

package/dist/esm/src/comps/Pagination/index.d.ts

@@ -0,0 +1,14 @@
+import { PaginationPage, PaginationStyle } from "./types";
+declare const Pagination: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
+    itemCount: number;
+    itemsPerPage: number;
+    startPage?: PaginationPage;
+    pageRange?: number;
+    paginationStyle?: PaginationStyle;
+    breakLabel?: string;
+    nextLabel?: string;
+    prevLabel?: string;
+    renderOnZeroPageCount?: boolean;
+    onPageChange?: import("./types").PaginationCallback;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Pagination;

package/dist/esm/src/comps/Pagination/index.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo, useState } from "react";
+import { PaginationStyle } from "./types";
+import { useBase } from "../../hooks";
+import Box from "../Box";
+import Button from "../Button";
+import SVGIcons from "../svgicons";
+const Pagination = forwardRef((props, ref) => {
+    const { itemCount, itemsPerPage, startPage, pageRange, paginationStyle, breakLabel, prevLabel, nextLabel, renderOnZeroPageCount, onPageChange, ...pops } = props;
+    const [_currentPage, setCurrentPage] = useState(startPage || 1);
+    const _breakLabel = useMemo(() => breakLabel || `...`, [breakLabel]);
+    /**
+     * @internal
+     * const _pageType = useMemo(() => startPage ? `number` === startPage, [breakLabel])
+     */
+    const { style, className, rest } = useBase(pops);
+    const getPageValue = useCallback((p) => {
+        return (`number` === typeof p ? p : +p.label);
+    }, []);
+    if (!itemCount)
+        throw new Error(`"itemCount" prop is required`);
+    const totalPages = useMemo(() => Math.ceil(itemCount / itemsPerPage), [itemCount, itemsPerPage]);
+    const pages = useMemo(() => {
+        const _pages = [];
+        const prevs = Math.max(getPageValue(_currentPage) - (pageRange || 2), 1);
+        const nexts = Math.min(getPageValue(_currentPage) + (pageRange || 2), totalPages);
+        if (prevs > 1)
+            _pages.push(1);
+        if (prevs > 2)
+            _pages.push(_breakLabel);
+        for (let i = prevs; i <= nexts; i++)
+            _pages.push(i);
+        if (nexts < totalPages - 1)
+            _pages.push(_breakLabel);
+        if (nexts < totalPages)
+            _pages.push(totalPages);
+        return _pages;
+    }, [_currentPage]);
+    const handlePage = useCallback((newPage) => {
+        if (newPage < 1 || newPage > totalPages)
+            return;
+        setCurrentPage(newPage);
+        onPageChange?.(newPage);
+    }, [itemCount, itemsPerPage, _currentPage]);
+    if (pages.length <= 1 && ((renderOnZeroPageCount == undefined ? false : renderOnZeroPageCount) === false))
+        return null;
+    return _jsxs(Box, { as: `--pagination --pgt-${paginationStyle || PaginationStyle.Table} flex aic w:100% jcc ${className}`, children: [_jsx(Box, { as: `flex flex:1 aic --pgt-btns`, children: (pages.length > 1 ? pages : [1, _breakLabel]).map((page, index, items) => _jsx(Button, { disabled: page == _breakLabel || getPageValue(_currentPage) == page, className: page == getPageValue(_currentPage) ? `--current-page` : ``, onClick: (ev) => typeof page == `number` && handlePage(page), children: page }, `--pg-${index}-${page}`)) }), _jsx(Box, { as: `flex aic jcc flex:1 --pagination-label`, children: [
+                    `Showing ${(getPageValue(_currentPage) - 1) * itemsPerPage + 1} - `,
+                    `${Math.min(getPageValue(_currentPage) * itemsPerPage, itemCount)} of ${itemCount} items`
+                ].join(` `) }), _jsxs(Box, { as: `flex aic jce flex:1 --pgt-btns --pgt-nav`, children: [_jsx(Button, { disabled: getPageValue(_currentPage) <= 1, onClick: (ev) => handlePage(getPageValue(_currentPage) - 1), children: SVGIcons.chevronLeftOutline }), _jsx(Button, { disabled: pages.length <= 1 || getPageValue(_currentPage) == pages[pages.length - 1], onClick: (ev) => handlePage(getPageValue(_currentPage) - 1), children: SVGIcons.chevronRightOutline })] })] });
+});
+export default Pagination;

package/dist/esm/src/comps/Pagination/types.d.ts

@@ -0,0 +1,23 @@
+import { BoxProps } from "../Box";
+export declare enum PaginationStyle {
+    Table = "table",
+    Gooey = "gooey"
+}
+export type PaginationPageItem = {
+    id: string | number;
+    label: string | number;
+};
+export type PaginationPage = number | PaginationPageItem;
+export type PaginationCallback = (page: PaginationPage) => void;
+export type PaginationProps = BoxProps & {
+    itemCount: number;
+    itemsPerPage: number;
+    startPage?: PaginationPage;
+    pageRange?: number;
+    paginationStyle?: PaginationStyle;
+    breakLabel?: string;
+    nextLabel?: string;
+    prevLabel?: string;
+    renderOnZeroPageCount?: boolean;
+    onPageChange?: PaginationCallback;
+};

package/dist/esm/src/comps/Pagination/types.js

@@ -0,0 +1,5 @@
+export var PaginationStyle;
+(function (PaginationStyle) {
+    PaginationStyle["Table"] = "table";
+    PaginationStyle["Gooey"] = "gooey";
+})(PaginationStyle || (PaginationStyle = {}));

package/dist/esm/src/comps/Password/index.d.ts

@@ -0,0 +1,4 @@
+import { InputProps } from '../Input';
+export type PasswordProps = Omit<InputProps, `type` | `numeric`> & {};
+declare const Password: import("react").ForwardRefExoticComponent<Omit<InputProps, "type" | "numeric"> & import("react").RefAttributes<HTMLInputElement>>;
+export default Password;

package/dist/esm/src/comps/Password/index.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { useBase } from '../../hooks';
+import Input from '../Input';
+import Box from '../Box';
+import Button from '../Button';
+import SVGIcons from '../svgicons';
+const Password = forwardRef((props, ref) => {
+    const { ...pops } = props;
+    if (`type` in pops) {
+        delete pops[`type`];
+    }
+    const { style, className, rest } = useBase(pops);
+    const [visible, setVisible] = useState(false);
+    return _jsxs(Box, { style: style, className: `--password flex aic rel`, children: [_jsx(Input, { ref: ref, type: visible ? 'text' : 'password', className: className, ...rest }), _jsx(Button, { tabIndex: -1, onClick: () => setVisible(prev => !prev), className: `--toggle flex aic jcc abs`, children: visible ? SVGIcons.eye : SVGIcons.eyeSlash })] });
+});
+export default Password;

package/dist/esm/src/comps/PinInput/index.d.ts

@@ -0,0 +1,17 @@
+import { InputProps } from '../Input';
+export type PinInputProps = InputProps & {
+    mask?: boolean;
+    size?: number;
+    length?: number;
+};
+declare const PinInput: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../..").ZuzProps> & {
+    numeric?: boolean;
+    size?: import("../..").Size;
+    variant?: import("../..").Variant;
+    with?: import("../..").FORMVALIDATION;
+} & {
+    mask?: boolean;
+    size?: number;
+    length?: number;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default PinInput;