@zuzjs/ui 0.7.3 → 0.7.5

package/dist/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?: string | ReactNode;
-    label?: string;
-}
-/**
- * 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/comps/Span/index.d.ts

@@ -1,4 +0,0 @@
-import { Props } from '../../types';
-export type SpanProps = Props<`span`> & {};
-declare const Span: import("react").ForwardRefExoticComponent<import("../../types").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, keyof import("../../types").ZuzProps> & import("react").RefAttributes<HTMLSpanElement>>;
-export default Span;

package/dist/comps/Switch/index.d.ts

@@ -1,9 +0,0 @@
-import { CheckboxHandler } from "../CheckBox/types";
-import { CHECKBOX } from "../../types/enums";
-declare const Switch: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../..").ZuzProps> & {
-    type?: CHECKBOX;
-    size?: import("../../types/enums").Size;
-    variant?: import("../../types/enums").Variant;
-    onSwitch?: (checked: boolean, value: string | number | readonly string[]) => void;
-} & import("react").RefAttributes<CheckboxHandler>>;
-export default Switch;

package/dist/comps/TabView/index.d.ts

@@ -1,9 +0,0 @@
-import { Tab, TabViewHandler } from "./types";
-import { BoxProps } from "../Box";
-declare const TabView: import("react").ForwardRefExoticComponent<BoxProps & {
-    onChange?: (tab: Tab, index: number) => void;
-    speed?: number;
-    tabs: Tab[];
-    prerender?: boolean;
-} & import("react").RefAttributes<TabViewHandler>>;
-export default TabView;

package/dist/comps/TabView/index.js

@@ -1,41 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
-import { uuid } from "../../funs";
-import { useResizeObserver } from "../../hooks";
-import Box from "../Box";
-import TabItem from "./tab";
-const TabView = forwardRef((props, ref) => {
-    const { as, tabs: _tabs, speed, prerender, onChange, ...rest } = props;
-    const tabs = useMemo(() => _tabs.reduce((ts, t) => {
-        ts.push({
-            ...t,
-            key: t.key || uuid()
-        });
-        return ts;
-    }, []), [_tabs]);
-    const tabview = useRef(null);
-    const tabViewID = useMemo(() => uuid(), []);
-    const [activeTab, setActiveTab] = useState(0);
-    const size = useResizeObserver(tabview);
-    const render = useMemo(() => prerender == undefined || prerender == true ? true : false, []);
-    const handleTabClick = (index) => {
-        setActiveTab(index);
-    };
-    useEffect(() => {
-        onChange && onChange(tabs[0], 0);
-    }, []);
-    return _jsxs(Box, { ref: tabview, className: `--tabview flex cols`, children: [_jsx(Box, { className: `--head flex aic`, children: tabs.map((tab, index) => _jsx(TabItem, { tab: tab, index: index, activeTab: activeTab, onClick: idx => {
-                        handleTabClick(idx);
-                        tab.onSelect && tab.onSelect(tab, idx);
-                        onChange && onChange(tab, idx);
-                    } }, `tab-${tabViewID}-${tab.key || index}`)) }), _jsx(Box, { className: `--body rel`, children: _jsx(Box, { className: `--track flex aic`, style: {
-                        transition: `all ${speed || 0.3}s ease-in-out 0s`, transform: `translate(-${activeTab * size.width}px, 0)`
-                    }, children: tabs.map((tab, index) => _jsx(Box, { style: {
-                            width: size.width,
-                            minWidth: size.width,
-                            maxWidth: size.width,
-                            opacity: index === activeTab ? 1 : 0,
-                            transition: 'opacity 0.5s ease',
-                        }, className: `--content`, children: (render || activeTab == index) && tab.body })) }) })] });
-});
-export default TabView;

package/dist/comps/TabView/types.d.ts

@@ -1,26 +0,0 @@
-import { ReactNode } from "react";
-import { BoxProps } from "../Box";
-export interface Tab {
-    onSelect: (tab: Tab, index: number) => void;
-    tag?: string;
-    key?: string;
-    icon?: string | ReactNode | ReactNode[];
-    label: string | ReactNode | ReactNode[];
-    body: string | ReactNode | ReactNode[];
-    render?: boolean;
-}
-export type TabProps = {
-    tab: Tab;
-    index: number;
-    activeTab: number;
-    onClick: (index: number) => void;
-};
-export type TabViewProps = BoxProps & {
-    onChange?: (tab: Tab, index: number) => void;
-    speed?: number;
-    tabs: Tab[];
-    prerender?: boolean;
-};
-export interface TabViewHandler {
-    setTab: (index: number) => void;
-}

package/dist/comps/Table/col.d.ts

@@ -1,7 +0,0 @@
-import { CSSProperties } from "react";
-import type { Column } from "./types";
-declare const TColumn: React.FC<Column & {
-    idx: number;
-    style?: CSSProperties;
-}>;
-export default TColumn;

package/dist/comps/Table/col.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Box from "../Box";
-const TColumn = (props) => {
-    const { idx, id, weight, style, value, render, resize, sort } = props;
-    return _jsx(Box, { style: {
-            flex: weight || 1,
-            ...style
-        }, as: `--col flex aic`, children: value });
-};
-export default TColumn;

package/dist/comps/Table/index.d.ts

@@ -1,17 +0,0 @@
-import type { Column } from "./types";
-import { dynamicObject } from "../../types";
-declare const Table: import("react").ForwardRefExoticComponent<import("../Box").BoxProps & {
-    schema: Column[];
-    rows?: dynamicObject[];
-    rowCount?: number;
-    rowsPerPage?: number;
-    rowClassName?: string;
-    currentPage?: number;
-    pagination?: boolean;
-    showPaginationOnZeroPageCount?: boolean;
-    animateRows?: boolean;
-    header?: boolean;
-    onRowContextMenu?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, row: dynamicObject) => void;
-    onPageChange?: import("../Pagination/types").PaginationCallback;
-} & import("react").RefAttributes<HTMLDivElement>>;
-export default Table;

package/dist/comps/Table/index.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
-import Box from "../Box";
-import { useBase } from "../../hooks";
-import TRow from "./row";
-import Pagination from "../Pagination";
-import { PaginationStyle } from "../Pagination/types";
-const Table = forwardRef((props, ref) => {
-    const { schema, rows, rowCount, rowsPerPage, currentPage, pagination, animateRows, header, showPaginationOnZeroPageCount, rowClassName, onPageChange, onRowContextMenu, ...pops } = props;
-    const _schemaParsed = useMemo(() => schema.reduce((prev, c) => {
-        prev[c.id] = {
-            flex: c.weight || 1,
-            ...(c.w && { width: c.w }),
-            ...(c.maxW && { maxWidth: c.maxW }),
-            ...(c.minW && { minWidth: c.minW }),
-            ...(c.h && { height: c.h }),
-            ...(c.maxH && { maxHeight: c.maxH }),
-            ...(c.minH && { minHeight: c.minH }),
-        };
-        // prev.push(c.id.toString())
-        return prev;
-    }, {}), [schema]);
-    const _cols = useMemo(() => Object.keys(_schemaParsed), [schema]);
-    const _header = useMemo(() => header == undefined ? true : header, [header]);
-    const { style, className, rest } = useBase(pops);
-    return _jsxs(Box, { as: `--table flex cols ${className}`, children: [_header == true && _jsx(TRow, { index: -1, schema: schema, styles: _schemaParsed }), rows && rows.map((row, index) => _jsx(TRow, { index: index, schema: schema, ids: _cols, styles: _schemaParsed, animate: animateRows, data: row, rowClassName: rowClassName, onContextMenu: onRowContextMenu }, `--trow-${index}`)), pagination && _jsx(Box, { as: `--row flex aic --row-footer`, children: _jsx(Pagination, { renderOnZeroPageCount: showPaginationOnZeroPageCount, onPageChange: onPageChange, paginationStyle: PaginationStyle.Table, itemCount: rowCount || (rows ? rows.length : 0), itemsPerPage: rowsPerPage || 10 }) })] });
-});
-export default Table;

package/dist/comps/Table/row.d.ts

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

package/dist/comps/Table/row.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
-import Box from "../Box";
-import TColumn from "./col";
-import { TRANSITION_CURVES, TRANSITIONS } from "../../types/enums";
-import { useDelayed } from "../../hooks";
-const TRow = (props) => {
-    const { index, schema, data, ids, styles, animate, rowClassName, onContextMenu } = props;
-    const mounted = useDelayed();
-    const _animation = useMemo(() => ({
-        transition: TRANSITIONS.SlideInBottom,
-        curve: TRANSITION_CURVES.EaseInOut,
-        delay: .02 * (index + 1),
-    }), []);
-    return _jsxs(Box, { onContextMenu: e => onContextMenu ? onContextMenu(e, data) : null, ...(animate ? { animate: { ..._animation, when: mounted } } : {}), as: `--row flex aic ${index == -1 ? `--row-head` : ``} ${rowClassName || ``}`, children: [index == -1 && schema.map((c, i) => {
-                const { renderWhenHeader, render, value, ...cc } = c;
-                return _jsx(TColumn, { idx: -1, value: renderWhenHeader && render ? render(index == -1 ? c : data, index) : value, ...cc, style: styles[c.id] }, `--col-${c.id}`);
-            }), index > -1 && ids && data && schema.map((c, i) => {
-                return ids.includes(String(c.id)) ? _jsx(TColumn, { idx: i, id: String(c.id), style: styles[String(c.id)], value: c.render ? c.render(data, index) : data[String(c.id)] }, `--${String(c.id)}-val-${i}`) : null;
-            })] });
-};
-export default TRow;

package/dist/comps/Table/types.d.ts

@@ -1,43 +0,0 @@
-import { ReactNode } from "react";
-import { BoxProps } from "../Box";
-import { dynamicObject } from "../../types";
-import { PaginationCallback } from "../Pagination/types";
-export type Row = {
-    index: number;
-    schema: Column[];
-    styles: dynamicObject;
-    ids?: string[];
-    animate?: boolean;
-    data?: dynamicObject;
-    rowClassName?: string;
-    onContextMenu?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, row: dynamicObject) => void;
-};
-export type Column = {
-    id: string | number;
-    value: string | ReactNode | dynamicObject;
-    weight?: number;
-    w?: number | string;
-    maxW?: number | string;
-    minW?: number | string;
-    h?: number | string;
-    maxH?: number | string;
-    minH?: number | string;
-    resize?: boolean;
-    sort?: boolean;
-    renderWhenHeader?: boolean;
-    render?: (row: dynamicObject, index: number) => ReactNode;
-};
-export type TableProps = BoxProps & {
-    schema: Column[];
-    rows?: dynamicObject[];
-    rowCount?: number;
-    rowsPerPage?: number;
-    rowClassName?: string;
-    currentPage?: number;
-    pagination?: boolean;
-    showPaginationOnZeroPageCount?: boolean;
-    animateRows?: boolean;
-    header?: boolean;
-    onRowContextMenu?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, row: dynamicObject) => void;
-    onPageChange?: PaginationCallback;
-};

package/dist/comps/Text/index.d.ts

@@ -1,11 +0,0 @@
-import { HTMLAttributes, ReactNode } from 'react';
-import { Props } from '../../types';
-export type TextProps = Props<`h1` | `h2` | `h3` | `h4` | `h5` | `h6`> & {
-    h?: number;
-    html?: ReactNode | string;
-};
-declare const Text: import("react").ForwardRefExoticComponent<import("../../types").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref">, keyof import("../../types").ZuzProps> & {
-    h?: number;
-    html?: ReactNode | string;
-} & import("react").RefAttributes<HTMLHeadingElement>>;
-export default Text;

package/dist/comps/TextArea/index.d.ts

@@ -1,11 +0,0 @@
-import { Props } from '../../types';
-import { Variant } from '../../types/enums';
-export type TextAreaProps = Props<`textarea`> & {
-    autoResize?: boolean;
-    variant?: Variant;
-};
-declare const TextArea: import("react").ForwardRefExoticComponent<import("../../types").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, keyof import("../../types").ZuzProps> & {
-    autoResize?: boolean;
-    variant?: Variant;
-} & import("react").RefAttributes<HTMLTextAreaElement>>;
-export default TextArea;

package/dist/comps/TextWheel/index.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { TextWheelHandler } from './types';
-declare const TextWheel: React.ForwardRefExoticComponent<Omit<import("../Box").BoxProps, "name"> & {
-    value?: number | string;
-    color?: string;
-    direction?: `up` | `down`;
-} & React.RefAttributes<TextWheelHandler>>;
-export default TextWheel;

package/dist/comps/Treeview/item.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState } from "react";
-import Box from "../Box";
-import Button from "../Button";
-import Icon from "../Icon";
-import Text from "../Text";
-const TreeItem = forwardRef((props, ref) => {
-    const { as, meta, nodes, icons, onSelect, treeTag, selected, ...rest } = props;
-    const { tag, label, icon, under } = meta;
-    const [isOpen, setIsOpen] = useState(tag == `root`);
-    const toggle = () => {
-        localStorage.setItem(`--tn${treeTag}-${tag}`, isOpen ? `0` : `1`);
-        setIsOpen(!isOpen);
-    };
-    useEffect(() => {
-        if (tag == `root` && !localStorage.getItem(`--tn${treeTag}-${tag}`)) {
-            localStorage.setItem(`--tn${treeTag}-${tag}`, `1`);
-            setIsOpen(true);
-        }
-        else
-            setIsOpen(localStorage.getItem(`--tn${treeTag}-${tag}`) == `1`);
-    }, []);
-    const _nodes = nodes.filter(x => x.under == tag);
-    return _jsxs(Box, { className: `--treenode --treenode-${tag} flex cols`, children: [_jsxs(Box, { className: `--node --node-${tag} flex aic${selected == tag ? ` --selected` : ``}`, children: [_jsx(Button, { skeleton: rest.skeleton, onClick: toggle, className: `--node-aro-btn`, children: _jsx(Icon, { skeleton: rest.skeleton, className: `--node-aro-icon`, name: isOpen ? icons?.arrowOpen : icons?.arrowClose }) }), _jsxs(Button, { className: `--node-meta flex aic`, onClick: (e) => onSelect(tag), children: [_jsx(Icon, { skeleton: rest.skeleton, className: `--node-icon`, name: icon || (isOpen ? icons?.dirOpen : icons?.dirClose) }), _jsx(Text, { ...{ className: `--node-label` }, skeleton: rest.skeleton, children: label })] })] }), isOpen && _nodes.length > 0 && _jsx(Box, { className: `--sub-node tree-sub-node-${tag} flex cols`, children: _nodes.map(node => _jsx(TreeItem, { treeTag: treeTag, selected: selected, onSelect: onSelect, icons: icons, meta: node, nodes: nodes }, `--node-${node.tag}`)) })] });
-});
-export default TreeItem;

package/dist/comps/Treeview/types.d.ts

@@ -1,38 +0,0 @@
-import { ReactNode } from "react";
-import { BoxProps } from "../Box";
-export interface TreeNodeIcons {
-    dirOpen: ReactNode;
-    dirClose: ReactNode;
-    arrowOpen: ReactNode;
-    arrowClose: ReactNode;
-}
-export type TreeViewProps = Omit<BoxProps, `tag`> & {
-    tag?: string;
-    roots: string[];
-    nodes: TreeNode[];
-    onNodeSelect: (tag: string) => void;
-    icons?: TreeNodeIcons;
-    selected?: string;
-};
-export interface TreeViewHandler {
-    getSelected?: () => String;
-}
-export interface TreeNode {
-    tag: string;
-    label: string;
-    icon?: ReactNode;
-    under?: string;
-    selected?: string;
-    expanded?: boolean;
-}
-export type TreeItemProps = BoxProps & {
-    treeTag: string;
-    meta: TreeNode;
-    nodes: TreeNode[];
-    onSelect: (tag: string) => void;
-    selected?: String;
-    icons?: TreeNodeIcons;
-};
-export interface TreeItemHandler {
-    onSelect?: (v: TreeNode) => void;
-}

package/dist/funs/index.d.ts

@@ -1,73 +0,0 @@
-import CSS from "./css.js";
-import { dynamicObject, FormatNumberParams, sortOptions } from "../types/index.js";
-import { AxiosProgressEvent } from "axios";
-import { KeyCode } from "../types/enums.js";
-import { ReactElement, ReactNode, Ref } from "react";
-export declare const __SALT: string;
-export declare const FIELNAME_KEY = "__FILENAME__";
-export declare const LINE_KEY = "__LINE__";
-export declare const withGlobals: () => void;
-export declare const isBrowser: boolean;
-export declare const is: (o: any, v: any) => boolean;
-export declare const isTypeOf: (o: any, v: any) => boolean;
-/**
- * Check if 2 objects have the same keys and values, including nested objects.
- * @param obj1
- * @param obj2
- * @returns @boolean
- */
-export declare const compare: (obj1: any, obj2: any) => boolean;
-export declare const equals: (o: any, v: any) => boolean;
-export declare const isNull: (o: any) => boolean;
-export declare const isString: (o: any) => o is string;
-export declare const isNumber: (o: string) => boolean;
-export declare const isObject: (o: any) => boolean;
-export declare const isArray: (o: any) => o is any[];
-export declare const isEmpty: (o: any) => boolean;
-export declare const toHMS: (tm: string | number) => string;
-export declare const isEmail: (e: string) => boolean;
-export declare const isUrl: (o: string) => boolean;
-export declare const toLowerCase: (o: string) => string;
-export declare const ucfirst: (o: any) => string;
-export declare const toHash: (n: number, len?: number) => string;
-export declare const fromHash: (n: string) => number;
-export declare const css: () => CSS;
-export declare const withCSS: (cx: string | string[]) => string;
-export declare const uuid: (len?: number) => string;
-export declare const MD5: (str: string) => string;
-export declare const numberInRange: (min: number, max: number) => number;
-export declare const getCSSVariable: (el: HTMLElement, name: string) => string;
-export declare const hexColorRegex: RegExp;
-export declare const rgbaColorRegex: RegExp;
-export declare const hslColorRegex: RegExp;
-export declare const isHexColor: (color: string) => boolean;
-export declare const isRgbaColor: (color: string) => boolean;
-export declare const isHslColor: (color: string) => boolean;
-export declare const isColor: (color: string) => boolean;
-export declare const hexToRgba: (hex: string, alpha?: number) => string;
-export declare const cleanProps: <T extends dynamicObject>(props: T, withProps?: string[]) => T;
-export declare const withZuz: (cx: string | string[]) => string;
-export declare const setDeep: (object: dynamicObject, path: string, value: any, seperator?: string) => dynamicObject;
-export declare const removeDuplicatesFromArray: <T>(array: T[]) => T[];
-export declare const withPost: (uri: string, data: dynamicObject | FormData, timeout?: number, onProgress?: (ev: AxiosProgressEvent) => void) => Promise<dynamicObject>;
-export declare const withTime: (fun: (...args: any[]) => any) => {
-    result: any;
-    executionTime: number;
-};
-export declare const time: (stamp?: number, format?: string) => string;
-export declare const timeSince: (stamp: number) => string;
-export declare const arrayRand: (arr: any[]) => any;
-export declare const formatNumber: ({ number, locale, style, decimal, currency }: FormatNumberParams) => string;
-export declare const formatSize: (bytes: number | string) => string;
-export declare const copyToClipboard: (text: string) => Promise<unknown>;
-export declare const natsort: (options?: sortOptions) => (a: string | number, b: string | number) => number;
-export declare const bindKey: (key: KeyCode, fun: () => void, element?: HTMLElement) => void;
-export declare const camelCase: (str: string) => string;
-export declare const pluralize: (word: string, count: number) => string;
-export declare const addPropsToChildren: (children: ReactNode, conditions: (child: ReactElement<any>) => boolean, newProps: object) => ReactNode;
-export declare const getPositionAroundElement: (x: number, y: number, distance: number, childCount: number) => {
-    x: number;
-    y: number;
-}[];
-export declare const clamp: (value: number, min: number, max: number) => number;
-export declare function mergeRefs<T>(...refs: (Ref<T> | undefined)[]): Ref<T>;