@zuzjs/ui 0.7.4 → 0.7.6

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

@@ -0,0 +1,42 @@
+"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/esm/src/comps/ProgressBar/index.d.ts

@@ -0,0 +1,7 @@
+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/esm/src/comps/ProgressBar/index.js

@@ -0,0 +1,21 @@
+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/esm/src/comps/ProgressBar/types.d.ts

@@ -0,0 +1,9 @@
+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/esm/src/comps/ProgressBar/types.js

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

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

@@ -0,0 +1,8 @@
+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/esm/src/comps/Radio/index.js

@@ -0,0 +1,16 @@
+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/esm/src/comps/Radio/types.d.ts

@@ -0,0 +1,11 @@
+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/esm/src/comps/Radio/types.js

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

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

@@ -0,0 +1,18 @@
+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/esm/src/comps/Search/index.js

@@ -0,0 +1,37 @@
+"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/esm/src/comps/Segmented/index.d.ts

@@ -0,0 +1,28 @@
+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/esm/src/comps/Segmented/index.js

@@ -0,0 +1,62 @@
+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/esm/src/comps/Segmented/item.d.ts

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

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

@@ -0,0 +1,38 @@
+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/esm/src/comps/Segmented/types.d.ts

@@ -0,0 +1,34 @@
+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/esm/src/comps/Segmented/types.js

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

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

@@ -0,0 +1,13 @@
+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/esm/src/comps/Select/index.js

@@ -0,0 +1,61 @@
+"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/esm/src/comps/Select/optionItem.d.ts

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

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

@@ -0,0 +1,6 @@
+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/esm/src/comps/Select/types.d.ts

@@ -0,0 +1,53 @@
+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/esm/src/comps/Select/types.js

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

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

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