@zuzjs/ui 0.10.6 → 0.10.8

package/dist/cjs/src/comps/PinInput/index.js

@@ -1,42 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef } from 'react';
-import { useBase } from '../../hooks';
-import Input from '../Input';
-import Box from '../Box';
-const PinInput = forwardRef((props, ref) => {
-    const { size, length, mask, ...pops } = props;
-    const inputs = useRef([]);
-    let name = `pinput`;
-    let required = false;
-    if (`type` in pops) {
-        delete pops.type;
-    }
-    if (`name` in pops) {
-        name = pops.name;
-        delete pops.name;
-    }
-    if (`required` in pops) {
-        required = true;
-        delete pops.required;
-    }
-    const { style } = useBase(pops);
-    const handleInput = (event) => {
-        const input = event.currentTarget;
-        const nextInput = inputs.current[parseInt(input.dataset.index) + 1];
-        const prevInput = inputs.current[parseInt(input.dataset.index) - 1];
-        if (input.value.length === 1 && nextInput) {
-            nextInput.focus();
-        }
-        else if (input.value.length === 0 && prevInput) {
-            prevInput.focus();
-        }
-    };
-    useEffect(() => {
-        inputs.current = inputs.current.slice(0, size || length);
-    }, [size || length]);
-    return _jsx(Box, { name: name, style: style, className: `--otp flex aic rel`, "data-required": required, "data-size": size || length || 4, children: Array(size || length || 4).fill(1).map((a, i) => _jsx(Input, { "data-index": i, ref: (el) => {
-                inputs.current[i] = el;
-            }, numeric: true, onChange: handleInput, maxLength: 1, placeholder: `0`, type: mask ? `password` : 'text', ...pops }, `pin-${i}`)) });
-});
-export default PinInput;

package/dist/cjs/src/comps/ProgressBar/index.d.ts

@@ -1,7 +0,0 @@
-import { ProgressHandler } from "./types";
-import { BoxProps } from "../Box";
-declare const ProgressBar: import("react").ForwardRefExoticComponent<BoxProps & {
-    progress?: number;
-    type?: import("../..").PROGRESS;
-} & import("react").RefAttributes<ProgressHandler>>;
-export default ProgressBar;

package/dist/cjs/src/comps/ProgressBar/index.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
-import Box from "../Box";
-import { useBase } from "../../hooks";
-const ProgressBar = forwardRef((props, ref) => {
-    const { progress, type, ...pops } = props;
-    const bar = useRef(null);
-    useImperativeHandle(ref, () => ({
-        setWidth: (p) => {
-            bar.current.style.width = `${p * 100}%`;
-        }
-    }), []);
-    useEffect(() => {
-        if (progress && bar.current) {
-            bar.current.style.width = `${progress * 100}%`;
-        }
-    }, []);
-    const { className, style, rest } = useBase(pops);
-    return _jsx(Box, { className: `--progress flex rel ${className}`.trim(), style: style, ...rest, children: _jsx(Box, { ref: bar, className: `--bar rel` }) });
-});
-export default ProgressBar;

package/dist/cjs/src/comps/ProgressBar/types.d.ts

@@ -1,9 +0,0 @@
-import { PROGRESS } from "../../types/enums";
-import { BoxProps } from "../Box";
-export type ProgressBarProps = BoxProps & {
-    progress?: number;
-    type?: PROGRESS;
-};
-export interface ProgressHandler {
-    setWidth?: (w: number) => void;
-}

package/dist/cjs/src/comps/ProgressBar/types.js

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

package/dist/cjs/src/comps/Radio/index.d.ts

@@ -1,8 +0,0 @@
-import { RadioHandler } from "./types";
-import { RADIO, Size } from "../../types/enums";
-declare const Radio: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../..").ZuzProps> & {
-    type?: RADIO;
-    size?: Size;
-    onChange?: (checked: boolean, value: string | number | readonly string[]) => void;
-} & import("react").RefAttributes<RadioHandler>>;
-export default Radio;

package/dist/cjs/src/comps/Radio/index.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useState } from "react";
-import Label from "../Label";
-import { RADIO, Size } from "../../types/enums";
-import Input from "../Input";
-import Box from "../Box";
-const Radio = forwardRef((props, ref) => {
-    const { children, className, name, required, type, value, size, checked: defaultCheck, onChange, ...pops } = props;
-    const [checked, _setChecked] = useState(defaultCheck || false);
-    const bRef = useRef(null);
-    return _jsxs(Label, { className: `${className} --${(type || RADIO.Default).toLowerCase()} --radio${!type || type == RADIO.Default ? `` : `card`} --${size || Size.Default} flex aic rel`.trim(), ...pops, children: [_jsx(Input, { ...{}, ref: bRef, defaultChecked: checked, value: value || `rd`, type: `radio`, className: `abs`, name: name, required: required || false, onChange: (e) => {
-                    onChange && onChange(e.target.checked, value || `cb`);
-                    _setChecked(e.target.checked);
-                } }), _jsx(Box, { className: `--dot rel`, children: _jsx(Box, { className: `--rod abs abc` }) }), _jsx(Box, { className: `--value`, children: children })] });
-});
-export default Radio;

package/dist/cjs/src/comps/Radio/types.d.ts

@@ -1,11 +0,0 @@
-import { Props } from "../../types";
-import { RADIO, Size } from "../../types/enums";
-export type RadioProps = Props<"input"> & {
-    type?: RADIO;
-    size?: Size;
-    onChange?: (checked: boolean, value: string | number | readonly string[]) => void;
-};
-export interface RadioHandler {
-    setChecked: (mode: boolean, triggerChange?: boolean) => void;
-    toggle: (triggerChange?: boolean) => void;
-}

package/dist/cjs/src/comps/Radio/types.js

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

package/dist/cjs/src/comps/Search/index.d.ts

@@ -1,18 +0,0 @@
-import { InputProps } from '../Input';
-import { Size } from '../../types/enums';
-export type SearchProps = InputProps & {
-    onSubmit?: (value: string) => void;
-    onChange?: (value: string) => void;
-    withStyle?: string;
-};
-declare const Search: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../..").ZuzProps> & {
-    numeric?: boolean;
-    size?: Size;
-    variant?: import("../..").Variant;
-    with?: import("../..").FORMVALIDATION;
-} & {
-    onSubmit?: (value: string) => void;
-    onChange?: (value: string) => void;
-    withStyle?: string;
-} & import("react").RefAttributes<HTMLInputElement>>;
-export default Search;

package/dist/cjs/src/comps/Search/index.js

@@ -1,37 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef, useState } from 'react';
-import { useBase } from '../../hooks';
-import Input from '../Input';
-import Box from '../Box';
-import Button from '../Button';
-import SVGIcons from '../svgicons';
-import { Size } from '../../types/enums';
-const Search = forwardRef((props, ref) => {
-    const { animate, withStyle, onChange, ...pops } = props;
-    const { style } = useBase(pops);
-    const { className: searchStyle } = useBase({ as: withStyle || `` });
-    const [query, setQuery] = useState(``);
-    const innerRef = useRef(null);
-    if (`type` in props) {
-        delete props[`type`];
-    }
-    const handleChange = (e) => {
-        setQuery(e.target.value);
-        onChange?.(e.target.value);
-    };
-    const handleSubmit = (e) => {
-        e?.preventDefault();
-        if (query.trim() !== ``) {
-            setQuery(``);
-            onChange?.(``);
-            if (innerRef.current) {
-                innerRef.current.value = ``;
-            }
-        }
-        // onSubmit?.(query)
-    };
-    useEffect(() => { }, []);
-    return _jsxs(Box, { style: style, className: `--search --${props.size || Size.Small} flex aic rel ${searchStyle}`.trim(), children: [_jsx(Input, { ref: innerRef, onChange: handleChange, className: `--${props.size || Size.Small}`, ...pops }), _jsx(Button, { tabIndex: -1, onClick: e => handleSubmit(), className: `--send flex aic jcc abs`, size: props.size || Size.Small, children: query !== `` ? SVGIcons.close : SVGIcons.search })] });
-});
-export default Search;

package/dist/cjs/src/comps/Segmented/index.d.ts

@@ -1,28 +0,0 @@
-import { Segment } from "./types";
-import { BoxProps } from "../Box";
-import { Size } from "../../types/enums";
-/**
- * `SelectTabs` component is a segmented control that allows switching between segments.
- *
- * @component
- * @param {SegmentProps} props - Props for the segmented control component.
- * @param {React.Ref<HTMLDivElement>} ref - Ref for the root div element.
- * @returns {JSX.Element} The rendered segmented control.
- *
- * @example
- * // Usage example
- * const segments = [
- *   { index: 0, label: "Home", icon: "home_icon" },
- *   { index: 1, label: "Profile", icon: "profile_icon" },
- *   { index: 2, label: "Settings", icon: "settings_icon" }
- * ];
- *
- * <SelectTabs selected={1} items={segments} />
- */
-declare const Segmented: import("react").ForwardRefExoticComponent<BoxProps & {
-    size?: Size;
-    selected?: number;
-    onSwitch?: (segment: Segment) => void;
-    items: Segment[];
-} & import("react").RefAttributes<HTMLDivElement>>;
-export default Segmented;

package/dist/cjs/src/comps/Segmented/index.js

@@ -1,62 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef, useState } from "react";
-import { useBase } from "../../hooks";
-import Box from "../Box";
-import SegmentItem from "./item";
-import { Size } from "../../types/enums";
-/**
- * `SelectTabs` component is a segmented control that allows switching between segments.
- *
- * @component
- * @param {SegmentProps} props - Props for the segmented control component.
- * @param {React.Ref<HTMLDivElement>} ref - Ref for the root div element.
- * @returns {JSX.Element} The rendered segmented control.
- *
- * @example
- * // Usage example
- * const segments = [
- *   { index: 0, label: "Home", icon: "home_icon" },
- *   { index: 1, label: "Profile", icon: "profile_icon" },
- *   { index: 2, label: "Settings", icon: "settings_icon" }
- * ];
- *
- * <SelectTabs selected={1} items={segments} />
- */
-const Segmented = forwardRef((props, ref) => {
-    const { animate, items, selected, size, onSwitch, ...pops } = props;
-    const [_selected, setSelected] = useState(selected || 0);
-    const { className, style, rest } = useBase(pops);
-    const _tab = useRef(null);
-    const _segmented = useRef(null);
-    const [mounted, setMounted] = useState(false);
-    /**
-     * Handles selection of a segment.
-     *
-     * @param {number} index - The index of the selected segment.
-     * @param {number} width - The width of the selected segment.
-     * @param {number} x - The x-coordinate of the selected segment.
-     */
-    const handleSelect = (index, width, x, meta, force) => {
-        // console.log(selected, _selected, index, mounted)
-        if (force || _selected != index) {
-            setSelected(index);
-            if (onSwitch)
-                onSwitch(meta);
-        }
-        if (_tab.current) {
-            const _sp = _segmented.current?.getBoundingClientRect();
-            _tab.current.style.setProperty(`--w`, `${width}px`);
-            _tab.current.style.setProperty(`--x`, `${_sp ? x - _sp.left : x}px`);
-        }
-    };
-    useEffect(() => {
-        if (selected !== undefined && selected != _selected) {
-            setSelected(selected);
-        }
-    }, [selected, _selected]);
-    return _jsxs(Box, { suppressHydrationWarning: true, ref: _segmented, "data-selected": _selected, className: `${className} --segmented --${size || Size.Small} flex aic rel`, style: style, ...rest, children: [_jsx(Box, { ref: _tab, className: `--segment-tab abs` }), items.map((item, i) => _jsx(SegmentItem, { onSelect: handleSelect, selected: _selected == i, meta: {
-                    ...item,
-                    index: i
-                } }, `segment-${item.label}-${i}`))] });
-});
-export default Segmented;

package/dist/cjs/src/comps/Segmented/item.d.ts

@@ -1,3 +0,0 @@
-import { SegmentItemProps } from "./types";
-declare const SegmentItem: ({ onSelect, meta, selected }: SegmentItemProps) => import("react/jsx-runtime").JSX.Element;
-export default SegmentItem;

package/dist/cjs/src/comps/Segmented/item.js

@@ -1,38 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import Button from "../Button";
-import Box from "../Box";
-import Icon from "../Icon";
-const SegmentItem = ({ onSelect, meta, selected }) => {
-    const ref = useRef(null);
-    const { index, icon, label } = meta;
-    const [pos, setPos] = useState({ x: 0, width: 0 });
-    // const [ _selected, setSelected ] = useState(selected)
-    useEffect(() => {
-        if (ref.current) {
-            const { width, x } = ref.current.getBoundingClientRect();
-            setPos({ x, width });
-            if (selected) {
-                onSelect(index, width, x, meta, true);
-                // setSelected(meta.index)
-            }
-            // if ( selected && !_initial ){
-            //     ref.current.click()
-            //     setInitial(true)
-            // }
-        }
-        // else
-        //     setInitial(false)
-    }, [ref.current]);
-    useEffect(() => {
-        if (selected) {
-            onSelect(index, pos.width, pos.x, meta, false);
-        }
-    }, [selected]);
-    return _jsxs(Button, { onClick: () => onSelect(index, pos.width, pos.x, meta, false), ref: ref, 
-        // data-x={pos.x}
-        suppressHydrationWarning: true, className: `--segment-item flex aic rel ${selected ? `--segement-active` : ``}`.trim(), children: [icon ?
-                `string` == typeof icon ? _jsx(Icon, { name: icon, as: `--segment-icon` }) : _jsx(Box, { as: `--segment-icon`, children: icon })
-                : null, label && String(label).trim() != `` && _jsx(Box, { className: `--segment-label`, children: label || `Item ${index}` })] });
-};
-export default SegmentItem;

package/dist/cjs/src/comps/Segmented/types.d.ts

@@ -1,34 +0,0 @@
-import { ReactNode } from "react";
-import { BoxProps } from "../Box";
-import { Size } from "../../types/enums";
-/**
- * Individual segment in the `SelectTabs` component.
- * @typedef {Object} Segment
- * @property {number} index - The index of the segment.
- * @property {string} [icon] - The optional icon to display for the segment.
- * @property {string} [label] - The optional label to display for the segment.
- */
-export interface Segment {
-    tag?: string;
-    index: number;
-    icon?: ReactNode;
-    label?: ReactNode;
-}
-/**
- * Props for the `SelectTabs` component.
- * @typedef {Object} SegmentProps
- * @extends {Props<'div'>}
- * @property {number} [selected] - The index of the initially selected segment.
- * @property {Segment[]} items - Array of segments to display.
- */
-export type SegmentProps = BoxProps & {
-    size?: Size;
-    selected?: number;
-    onSwitch?: (segment: Segment) => void;
-    items: Segment[];
-};
-export type SegmentItemProps = {
-    meta: Segment;
-    selected: boolean;
-    onSelect: (index: number, width: number, x: number, segment: Segment, force: boolean) => void;
-};

package/dist/cjs/src/comps/Segmented/types.js

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

package/dist/cjs/src/comps/Select/index.d.ts

@@ -1,13 +0,0 @@
-import { FORMVALIDATION } from "../../types/enums";
-import { BoxProps } from "../Box";
-import { Option } from "./types";
-declare const Select: import("react").ForwardRefExoticComponent<BoxProps & {
-    required?: FORMVALIDATION;
-    options: Option[];
-    label?: string;
-    selected?: string | Option;
-    search?: boolean;
-    onChange?: (v: Option) => void;
-    searchPlaceholder?: string;
-} & import("react").RefAttributes<HTMLDivElement>>;
-export default Select;

package/dist/cjs/src/comps/Select/index.js

@@ -1,61 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
-import SVGIcons from "../svgicons";
-import Box from "../Box";
-import { useBase } from "../../hooks";
-import Button from "../Button";
-import Text from "../Text";
-import Input from "../Input";
-import OptionItem from "./optionItem";
-const Select = forwardRef((props, ref) => {
-    const { selected, options, label, name, search: withSearch, searchPlaceholder, onChange, ...pops } = props;
-    const [value, setValue] = useState(selected ?
-        typeof selected === `string` ? options.find(fo => fo.value === selected) : selected
-        : options[0]);
-    const [choosing, setChoosing] = useState(false);
-    const [query, setQuery] = useState(null);
-    const _ref = useRef(null);
-    const _search = useRef(null);
-    const _did = useId();
-    const _id = useMemo(() => name || _did, []);
-    const { className, style, rest } = useBase(pops);
-    const updateValue = (o) => {
-        setValue(o);
-        onChange && onChange(o);
-    };
-    useEffect(() => {
-        document.body.addEventListener(`click`, (e) => {
-            setChoosing(false);
-        });
-    }, []);
-    useEffect(() => {
-        if (choosing) {
-            _search.current && _search.current.focus();
-        }
-        else {
-            if (_search.current) {
-                _search.current.value = ``;
-            }
-            setQuery(null);
-        }
-    }, [choosing]);
-    return _jsxs(Box, { className: `--select ${name ? `--${name}` : ``} rel`.trim(), name: _id, children: [_jsxs(Button, { "data-value": value ? `string` == typeof value ? value : value.value : value || `-1`, className: `--selected flex aic rel ${className}`.trim(), withLabel: false, style: style, onClick: (e) => setChoosing(prev => !prev), ...rest, children: [_jsx(Text, { className: `--label`, children: value ? `string` == typeof value ? value : value.label : label || `Choose` }), _jsx(Box, { className: `--svg-arrow rel flex aic jcc`, children: choosing ? SVGIcons.arrowUp : SVGIcons.arrowDown })] }), _jsxs(Box, { id: _id, className: `--options-list flex cols abs`, style: {
-                    pointerEvents: choosing ? `auto` : `none`,
-                }, animate: {
-                    from: { y: 5, opacity: 0 },
-                    to: { y: 0, opacity: 1 },
-                    when: choosing,
-                    duration: .05
-                }, children: [withSearch && _jsx(Input, { ref: _search, onChange: (e) => {
-                            setQuery(e.target.value == `` ? null : e.target.value);
-                        }, className: `--select-search`, placeholder: searchPlaceholder || `Search...` }), (query == null ? options : options.filter((o) => {
-                        // return 
-                        // `string` == typeof o ? 
-                        // o.toLowerCase().includes(query.toLowerCase()) 
-                        // : 
-                        return o.label.toLowerCase().includes(query.toLowerCase()) || o.value.toLowerCase().includes(query.toLowerCase());
-                    }))
-                        .map((o) => _jsx(OptionItem, { updateValue: updateValue, value: value, o: o }, `option-${(`string` == typeof o ? o : o.label).replace(/\s+/g, `-`)}-${`string` == typeof o ? o : o.value}`))] })] });
-});
-export default Select;

package/dist/cjs/src/comps/Select/optionItem.d.ts

@@ -1,3 +0,0 @@
-import { OptionItemProps } from "./types";
-declare const OptionItem: ({ value, updateValue, o }: OptionItemProps) => import("react/jsx-runtime").JSX.Element;
-export default OptionItem;

package/dist/cjs/src/comps/Select/optionItem.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Button from "../Button";
-const OptionItem = ({ value, updateValue, o }) => {
-    return _jsx(Button, { onClick: (e) => updateValue(o), className: value && (`string` == typeof o ? o : o.value) == (`string` == typeof value ? value : value.value) ? `selected` : ``, children: `string` == typeof o ? o : o.label });
-};
-export default OptionItem;

package/dist/cjs/src/comps/Select/types.d.ts

@@ -1,53 +0,0 @@
-import { FormEventHandler } from "react";
-import { FORMVALIDATION } from "../../types/enums";
-import { BoxProps } from "../Box";
-/**
- * Represents an option which can be either a string or an OptionObject.
- */
-export type Option = {
-    label: string;
-    value: string;
-};
-/**
- * Represents an option object with a label and value.
- */
-export type Value = FormEventHandler<HTMLDivElement> & Option;
-export interface OptionItemProps {
-    updateValue: (o: Option) => void;
-    o: Option;
-    value: Option;
-}
-/**
- * Props for the Select component.
- */
-export type SelectProps = BoxProps & {
-    /**
-     * Indicates if the select field is required and its validation type.
-     */
-    required?: FORMVALIDATION;
-    /**
-     * Array of options to be displayed in the select dropdown.
-     */
-    options: Option[];
-    /**
-     * Label for the select field.
-     */
-    label?: string;
-    /**
-     * The currently selected option.
-     */
-    selected?: string | Option;
-    /**
-     * Enables the search functionality within the select dropdown.
-     */
-    search?: boolean;
-    /**
-     * Callback function triggered when the selected option changes.
-     * @param v - The newly selected option.
-     */
-    onChange?: (v: Option) => void;
-    /**
-     * Placeholder text for the search input field.
-     */
-    searchPlaceholder?: string;
-};

package/dist/cjs/src/comps/Select/types.js

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

package/dist/cjs/src/comps/Sheet/index.d.ts

@@ -1,43 +0,0 @@
-import { ReactNode } from "react";
-import { SHEET, SHEET_ACTION_POSITION, SPINNER, TRANSITION_CURVES, TRANSITIONS } from "../../types/enums";
-import { ZuzProps } from "../../types";
-export type SheetProps = ZuzProps & {
-    title?: string;
-    message?: string | ReactNode;
-    transition?: TRANSITIONS;
-    curve?: TRANSITION_CURVES;
-    speed?: Number;
-    type?: SHEET;
-    spinner?: SPINNER;
-    loadingMessage?: string;
-    actionPosition?: SHEET_ACTION_POSITION;
-};
-export interface SheetActionHandler {
-    key?: string;
-    label: string;
-    handler?: () => void;
-    onClick?: () => void;
-}
-export interface SheetHandler {
-    setLoading: (mode: boolean) => void;
-    showDialog: (title: string | ReactNode, message: string | ReactNode, action?: SheetActionHandler[], onShow?: () => void) => void;
-    dialog: (title: string | ReactNode, message: string | ReactNode, action?: SheetActionHandler[], onShow?: () => void) => void;
-    show: (message: string | ReactNode, duration?: number, type?: SHEET) => void;
-    success: (message: string | ReactNode, duration?: number) => void;
-    error: (message: string | ReactNode, duration?: number) => void;
-    warn: (message: string | ReactNode, duration?: number) => void;
-    hide: () => void;
-}
-declare const Sheet: import("react").ForwardRefExoticComponent<ZuzProps & {
-    title?: string;
-    message?: string | ReactNode;
-    transition?: TRANSITIONS;
-    curve?: TRANSITION_CURVES;
-    speed?: Number;
-    type?: SHEET;
-    spinner?: SPINNER;
-    loadingMessage?: string;
-    actionPosition?: SHEET_ACTION_POSITION;
-} & import("react").RefAttributes<SheetHandler>>;
-export declare const isSheetHandler: (src: unknown) => src is SheetHandler;
-export default Sheet;