@zuzjs/ui 0.9.6 → 0.9.7

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

@@ -2,12 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useBase } from "../../hooks";
-import { SPINNER } from "../../types/enums";
+import { SPINNER, Variant } from "../../types/enums";
 import Box from "../Box";
 import Spinner from "../Spinner";
 import Text from "../Text";
 const Cover = forwardRef((props, ref) => {
-    const { message, spinner, color, when, hideMessage, ...pops } = props;
+    const { message, spinner, spinnerSize, color, when, hideMessage, ...pops } = props;
     const { className, style, rest } = useBase(pops);
     if (`when` in props && props.when == false) {
         return null;
@@ -15,7 +15,7 @@ const Cover = forwardRef((props, ref) => {
     return _jsxs(Box, { className: `--cover flex aic jcc cols abs fillx nope nous ${className}`.trim(), style: {
             ...style,
             backgroundColor: `var(--cover-bg)`
-        }, ...rest, children: [_jsx(Spinner, { type: spinner || SPINNER.Simple }), !hideMessage && _jsx(Text, { className: `--label`, style: { color: `var(--cover-label)` }, children: message || `loading` })] });
+        }, ...rest, children: [_jsx(Spinner, { variant: spinnerSize || Variant.Small, type: spinner || SPINNER.Simple }), !hideMessage && _jsx(Text, { className: `--label`, style: { color: `var(--cover-label)` }, children: message || `loading` })] });
 });
 Cover.displayName = `Zuz.Cover`;
 export default Cover;

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

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

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

@@ -13,5 +13,9 @@ declare const Search: import("react").ForwardRefExoticComponent<import("../..").
     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,19 +1,23 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+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, onChange, onClear, ...pops } = props;
+    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`];
     }
@@ -38,7 +42,7 @@ const Search = forwardRef((props, ref) => {
         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 && _jsx(Button, { tabIndex: -1, onClick: e => handleSubmit(), className: `--send flex aic jcc`, variant: props.variant || Variant.Small, children: query !== `` ? SVGIcons.close : SVGIcons.search }), _jsx(Input, { ref: innerRef, onChange: handleChange, className: `--${props.variant || Variant.Small}`, ...pops }), props.shortcut && _jsx(KeyBoardKeys, { keys: props.shortcut, as: `abs` }), !reverse && _jsx(Button, { tabIndex: -1, onClick: e => handleSubmit(), className: `--send flex aic jcc`, variant: props.variant || Variant.Small, children: query !== `` ? SVGIcons.close : SVGIcons.search })] });
+    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,3 +1,4 @@
+import { ReactNode } from "react";
 import { KeyCombination } from "../..";
 import { InputProps } from "../Input";
 export type SearchProps = InputProps & {
@@ -7,6 +8,10 @@ export type SearchProps = InputProps & {
     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/Select/index.d.ts

@@ -9,5 +9,7 @@ declare const Select: import("react").ForwardRefExoticComponent<Omit<import(".."
     onChange?: (v: Option) => void;
     searchPlaceholder?: string;
     maxHeight?: number;
+    arrowDownIcon?: string | import("react").ReactNode;
+    arrowUpIcon?: string | import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export default Select;

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

@@ -5,12 +5,13 @@ 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, onChange, ...pops } = props;
+    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]);
@@ -45,7 +46,9 @@ const Select = forwardRef((props, ref) => {
         }
         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 ? SVGIcons.arrowUp : SVGIcons.arrowDown })] }), _jsxs(Box, { id: _id, className: `--options-list flex cols abs`, "aria-hidden": !choosing, style: {
+    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 },

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

@@ -1,4 +1,4 @@
-import { FormEventHandler } from "react";
+import { FormEventHandler, ReactNode } from "react";
 import { FORMVALIDATION, Variant } from "../../types/enums";
 import { BoxProps } from "../Box";
 /**
@@ -59,4 +59,6 @@ export type SelectProps = Omit<BoxProps, "onChange"> & {
      * Max Height
      */
     maxHeight?: number;
+    arrowDownIcon?: string | ReactNode;
+    arrowUpIcon?: string | ReactNode;
 };

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

@@ -1,8 +1,9 @@
-import { Size, SPINNER } from "../../types/enums";
+import { Size, SPINNER, Variant } from "../../types/enums";
 import { BoxProps } from "../Box";
 export type SpinnerProps = BoxProps & {
     type?: SPINNER;
     size?: Size | number;
+    variant?: Variant | number;
     width?: number;
     color?: string;
     background?: string;
@@ -12,6 +13,7 @@ export type SpinnerProps = BoxProps & {
 declare const Spinner: import("react").ForwardRefExoticComponent<BoxProps & {
     type?: SPINNER;
     size?: Size | number;
+    variant?: Variant | number;
     width?: number;
     color?: string;
     background?: string;

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

@@ -2,10 +2,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef } from "react";
 import { hexToRgba } from "../../funs";
 import { useBase } from "../../hooks";
-import { Size, SPINNER } from "../../types/enums";
+import { Size, SPINNER, Variant } from "../../types/enums";
 import Box from "../Box";
 const Spinner = forwardRef((props, ref) => {
-    const { type, size, width, speed, color, background, foreground, ...pops } = props;
+    const { type, size, variant, width, speed, color, background, foreground, ...pops } = props;
     const defaultColor = `#000000`;
     const { className, style, rest } = useBase(pops);
     const build = () => {
@@ -18,13 +18,20 @@ const Spinner = forwardRef((props, ref) => {
             default: 20
         };
         const _size = size ? Object.values(Size).includes(size) ? sizes[size] : size : sizes.default;
+        const variants = {
+            [Variant.Small]: 20,
+            [Variant.Medium]: 30,
+            [Variant.Large]: 50,
+            default: 20
+        };
+        const _variant = variant ? Object.values(Variant).includes(variant) ? variants[variant] : variant : variants.default;
         const _animationSetting = {
             animationDuration: `${speed || .6}s`,
             animationTimingFunction: `linear`
         };
         const _props = (type || SPINNER.Simple) == SPINNER.Simple ? {
-            width: _size,
-            height: _size,
+            width: _variant || _size,
+            height: _variant || _size,
             border: `${width || 3}px solid ${bg}`,
             borderRadius: `50%`,
             borderTopColor: c,

package/dist/esm/funs/stylesheet.js

@@ -308,11 +308,13 @@ export const cssDirect = {
     "translate": "transform: translate(__VALUE__);",
     "translateX": "transform: translateX(__VALUE__);",
     "translateY": "transform: translateY(__VALUE__);",
+    "translateZ": "transform: translateZ(__VALUE__);",
     "x": "transform: translateX(__VALUE__);",
     "y": "transform: translateY(__VALUE__);",
+    "z": "transform: translateZ(__VALUE__);",
     "rotate": "transform: rotate(__VALUE__);",
     "rotateX": "transform: rotateX(__VALUE__);",
-    "rotateY": "transform: rotatY(__VALUE__);",
+    "rotateY": "transform: rotateY(__VALUE__);",
     "rotateZ": "transform: rotateZ(__VALUE__);",
     "rotate3d": "transform: rotate3d(__X__, __Y__, __Z__, __A__);",
     "scale": "transform: scale(__VALUE__);",