@zuzjs/ui 0.10.6 → 0.10.8

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

@@ -1,21 +0,0 @@
-import { Variant } from '../../types/enums';
-import { SearchHandler } from './types';
-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?: import("../..").Size;
-    variant?: Variant;
-    with?: import("../..").FORMVALIDATION | `${import("../..").FORMVALIDATION}${string}`;
-    onConfirm?: (value: string) => void;
-} & {
-    onSubmit?: (value: string) => void;
-    onChange?: (value: string) => void;
-    onClear?: () => void;
-    withStyle?: string;
-    shortcut?: import("..").KeyCombination;
-    reverse?: boolean;
-    searchIcon?: string | import("react").ReactNode;
-    hideSearchIcon?: boolean;
-    clearIcon?: string | import("react").ReactNode;
-    hideClearIcon?: boolean;
-} & import("react").RefAttributes<SearchHandler>>;
-export default Search;

package/dist/esm/comps/Search/index.js

@@ -1,48 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { useBase } from '../../hooks';
-import { Variant } from '../../types/enums';
-import Box from '../Box';
-import Button from '../Button';
-import Icon from '../Icon';
-import Input from '../Input';
-import KeyBoardKeys from '../KeyboardKeys';
-import SVGIcons from '../svgicons';
-const Search = forwardRef((props, ref) => {
-    const { fx, animate, withStyle, as, reverse = false, searchIcon = SVGIcons.search, hideSearchIcon = false, clearIcon = SVGIcons.close, hideClearIcon = false, onChange, onClear, ...pops } = props;
-    const { style, className } = useBase({ as: props.as });
-    // const { className : searchStyle } = useBase({ as: withStyle || `` } as Props<`div`>)
-    const [query, setQuery] = useState(``);
-    const innerRef = useRef(null);
-    const actionBtn = useMemo(() => _jsx(Button, { tabIndex: -1, onClick: e => handleSubmit(), className: `--send flex aic jcc`, variant: props.variant || Variant.Small, children: query !== `` ?
-            !hideClearIcon && (`string` === typeof clearIcon ? _jsx(Icon, { name: clearIcon, as: `--search-action` }) : clearIcon) :
-            !hideSearchIcon && (`string` === typeof searchIcon ? _jsx(Icon, { name: searchIcon, as: `--search-action` }) : searchIcon) }), [reverse, searchIcon, hideClearIcon, clearIcon, hideSearchIcon]);
-    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 = ``;
-                props.onConfirm?.(``);
-            }
-        }
-        // onSubmit?.(query)
-    };
-    useImperativeHandle(ref, () => ({
-        focus: () => innerRef.current?.focus(),
-        value: () => innerRef.current?.value
-    }));
-    useEffect(() => { }, []);
-    return _jsxs(Box, { style: style, className: `--search ${reverse ? `--search-rev` : ``} --${props.variant || Variant.Small} flex aic ${props.as?.includes(`abs`) ? `` : `rel`} ${className}`.trim(), children: [reverse && actionBtn, _jsx(Input, { ref: innerRef, onChange: handleChange, className: `--${props.variant || Variant.Small}`, ...pops }), props.shortcut && _jsx(KeyBoardKeys, { keys: props.shortcut, as: `abs` }), !reverse && actionBtn] });
-});
-Search.displayName = `Zuz.Search`;
-export default Search;

package/dist/esm/comps/Search/types.d.ts

@@ -1,18 +0,0 @@
-import { ReactNode } from "react";
-import { KeyCombination } from "../..";
-import { InputProps } from "../Input";
-export type SearchProps = InputProps & {
-    onSubmit?: (value: string) => void;
-    onChange?: (value: string) => void;
-    onClear?: () => void;
-    withStyle?: string;
-    shortcut?: KeyCombination;
-    reverse?: boolean;
-    searchIcon?: string | ReactNode;
-    hideSearchIcon?: boolean;
-    clearIcon?: string | ReactNode;
-    hideClearIcon?: boolean;
-};
-export interface SearchHandler {
-    focus: () => void;
-}

package/dist/esm/comps/Search/types.js

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

package/dist/esm/comps/Segmented/index.d.ts

@@ -1,29 +0,0 @@
-import { Variant } from "../../types/enums";
-import { BoxProps } from "../Box";
-import { Segment, SegmentController } from "./types";
-/**
- * `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?: import("../..").Size;
-    variant?: Variant;
-    selected?: number;
-    onSwitch?: (segment: Segment) => void;
-    items: Segment[];
-} & import("react").RefAttributes<SegmentController>>;
-export default Segmented;

package/dist/esm/comps/Segmented/index.js

@@ -1,77 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
-import { useBase } from "../../hooks";
-import { Variant } from "../../types/enums";
-import Box from "../Box";
-import SegmentItem from "./item";
-/**
- * `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, fx, items, selected, size, variant, onSwitch, ...pops } = props;
-    const [_selected, setSelected] = useState(selected || 0);
-    const hasMounted = useRef(false);
-    const prevSelectedRef = useRef(_selected);
-    const { className, style, rest } = useBase(pops);
-    const _tab = useRef(null);
-    const _segmented = useRef(null);
-    /**
-     * 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 && _selected != -2)) {
-            setSelected(index);
-            prevSelectedRef.current = _selected;
-            if (hasMounted.current)
-                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`);
-        }
-    };
-    useImperativeHandle(ref, () => ({
-        setSelected: (index) => {
-            if (typeof index === `number` && index != _selected) {
-                setSelected(index);
-            }
-        }
-    }), [_selected]);
-    // useEffect(() => {
-    //     if (typeof selected === `number` && selected != _selected) {
-    //         prevSelectedRef.current = _selected;
-    //         setSelected(selected);
-    //     }
-    // }, [selected, _selected]);
-    useEffect(() => {
-        hasMounted.current = true;
-    }, []);
-    return _jsxs(Box, { ref: _segmented, "data-selected": _selected, className: `${className} --segmented --${variant || Variant.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}`))] });
-});
-Segmented.displayName = `Zuz.SelectTabs`;
-export default Segmented;

package/dist/esm/comps/Segmented/item.d.ts

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

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

@@ -1,40 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { useDelayed } from "../../hooks";
-import Box from "../Box";
-import Button from "../Button";
-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 hydrated = useDelayed();
-    // const observer = useResizeObserver(ref)
-    useLayoutEffect(() => {
-        if (hydrated && ref.current) {
-            const { width, x } = ref.current.getBoundingClientRect();
-            // const { width, left } =  observer
-            // console.log(pos, { x: left, width })
-            setPos({ x, width });
-            if (selected) {
-                onSelect(index, width, x, meta, true);
-            }
-            // else if ( pos.x != left || pos.width != width ){
-            //     // console.log(`re-triggered`)
-            //     setPos({ x: left, width })
-            //     onSelect(-2, width, left, meta, false)
-            // }
-            // console.log(`hydrated`, index, width, x, observer)
-        }
-    }, [hydrated, 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, className: `--segment-item flex aic rel ${selected ? `--segment-active` : ``}`.trim(), children: [icon ?
-                `string` == typeof icon ? _jsx(Icon, { name: icon, as: `--segment-icon` }) : _jsx(Box, { as: `--segment-icon flex aic jcc`, children: icon })
-                : null, label && String(label).trim() != `` && _jsx(Box, { className: `--segment-label`, children: label || `Item ${index}` })] });
-};
-SegmentItem.displayName = `SelectTabItem`;
-export default SegmentItem;

package/dist/esm/comps/Segmented/types.d.ts

@@ -1,41 +0,0 @@
-import { ReactNode } from "react";
-import { Size, Variant } from "../../types/enums";
-import { BoxProps } from "../Box";
-/**
- * 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 | number;
-    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 & {
-    /**
-     * @deprecated use variant
-     */
-    size?: Size;
-    variant?: Variant;
-    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;
-};
-export interface SegmentController {
-    setSelected: (index: number) => void;
-}

package/dist/esm/comps/Segmented/types.js

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

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

@@ -1,15 +0,0 @@
-import { Option, SelectHandler } from "./types";
-declare const Select: import("react").ForwardRefExoticComponent<Omit<import("..").BoxProps, "onChange"> & {
-    variant?: import("../..").Variant;
-    required?: import("../..").FORMVALIDATION;
-    options: Option[];
-    label?: string;
-    selected?: string | Option;
-    search?: boolean;
-    onChange?: (v: Option) => void;
-    searchPlaceholder?: string;
-    maxHeight?: number;
-    arrowDownIcon?: string | import("react").ReactNode;
-    arrowUpIcon?: string | import("react").ReactNode;
-} & import("react").RefAttributes<SelectHandler>>;
-export default Select;

package/dist/esm/comps/Select/index.js

@@ -1,83 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { useBase, usePosition } from "../../hooks";
-import { Position } from "../../types/enums";
-import Box from "../Box";
-import Button from "../Button";
-import Icon from "../Icon";
-import Input from "../Input";
-import SVGIcons from "../svgicons";
-import Text from "../Text";
-import OptionItem from "./optionItem";
-const Select = forwardRef((props, ref) => {
-    const { selected, options, label, name, variant, search: withSearch, searchPlaceholder, maxHeight, arrowDownIcon = SVGIcons.arrowDown, arrowUpIcon = SVGIcons.arrowUp, 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 _pop = useRef(null);
-    const _did = useId();
-    const _id = useMemo(() => name || _did, []);
-    const { reposition } = usePosition(_pop, { direction: Position.Bottom, offset: 2 });
-    const { className, style, rest } = useBase(pops);
-    const updateValue = (o) => {
-        setValue(o);
-        onChange && onChange(o);
-    };
-    useImperativeHandle(ref, () => ({
-        setSelected: (option) => {
-            if (typeof option === `string`) {
-                const foundOption = options.find(o => o.value === option);
-                if (foundOption) {
-                    setValue(foundOption);
-                }
-            }
-            else {
-                setValue(option);
-            }
-        }
-    }));
-    useEffect(() => {
-        document.body.addEventListener(`click`, (e) => {
-            setChoosing(false);
-        });
-        window.dispatchEvent(new Event('resize'));
-    }, []);
-    useEffect(() => {
-        if (choosing) {
-            _search.current && _search.current.focus();
-        }
-        else {
-            if (_search.current) {
-                _search.current.value = ``;
-            }
-            setQuery(null);
-        }
-        reposition();
-    }, [choosing]);
-    return _jsxs(Box, { className: `--select ${variant ? `--${variant}` : ``} ${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 ?
-                            `string` === typeof arrowUpIcon ? _jsx(Icon, { name: arrowUpIcon, as: `--search-action` }) : arrowUpIcon :
-                            `string` === typeof arrowDownIcon ? _jsx(Icon, { name: arrowDownIcon, as: `--search-action` }) : arrowDownIcon })] }), _jsxs(Box, { id: _id, className: `--options-list flex cols abs`, "aria-hidden": !choosing, style: {
-                    maxHeight: maxHeight || `auto`
-                }, ref: _pop, fx: {
-                    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}`))] })] });
-});
-Select.displayName = `Zuz.Select`;
-export default Select;

package/dist/esm/comps/Select/optionItem.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import { OptionItemProps } from "./types";
-declare const OptionItem: {
-    ({ value, updateValue, o }: OptionItemProps): React.ReactElement;
-    displayName: string;
-};
-export default OptionItem;

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

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon, Text } from "..";
-import Button from "../Button";
-const OptionItem = ({ value, updateValue, o }) => {
-    return _jsxs(Button, { onClick: (e) => updateValue(o), as: `--select-option-item`, className: value && (`string` == typeof o ? o : o.value) == (`string` == typeof value ? value : value.value) ? `selected` : ``, children: [o.icon && _jsx(Icon, { name: o.icon, as: `--select-option-icon --icon-${o.value}`, color: o.iconColor || undefined }), _jsx(Text, { children: `string` == typeof o ? o : o.label })] });
-};
-OptionItem.displayName = `Option`;
-export default OptionItem;

package/dist/esm/comps/Select/types.d.ts

@@ -1,69 +0,0 @@
-import { FormEventHandler, ReactNode } from "react";
-import { FORMVALIDATION, Variant } from "../../types/enums";
-import { BoxProps } from "../Box";
-export interface SelectHandler {
-    setSelected: (option: Option | string) => void;
-}
-/**
- * Represents an option which can be either a string or an OptionObject.
- */
-export type Option = {
-    icon?: string | ReactNode;
-    iconColor?: string;
-    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 = Omit<BoxProps, "onChange"> & {
-    /**
-     * Size of the select field.
-     * @default "md"
-     */
-    variant?: Variant;
-    /**
-     * 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;
-    /**
-     * Max Height
-     */
-    maxHeight?: number;
-    arrowDownIcon?: string | ReactNode;
-    arrowUpIcon?: string | ReactNode;
-};

package/dist/esm/comps/Select/types.js

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

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

@@ -1,47 +0,0 @@
-import { ReactNode } from "react";
-import { ZuzProps } from "../../types";
-import { SHEET, SHEET_ACTION_POSITION, SPINNER, TRANSITION_CURVES, TRANSITIONS } from "../../types/enums";
-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;
-    onShow?: () => void;
-    onHide?: () => void;
-};
-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;
-    onShow?: () => void;
-    onHide?: () => void;
-} & import("react").RefAttributes<SheetHandler>>;
-export declare const isSheetHandler: (src: unknown) => src is SheetHandler;
-export default Sheet;