@zuzjs/ui 0.8.7 → 0.8.9

package/dist/cjs/comps/AutoComplete/index.d.ts

@@ -4,6 +4,7 @@ declare const AutoComplete: import("react").ForwardRefExoticComponent<import("..
     size?: Size;
     variant?: import("../..").Variant;
     with?: import("../..").FORMVALIDATION | `${import("../..").FORMVALIDATION}${string}`;
+    onConfirm?: (value: string) => void;
 } & {
     action?: string;
     data?: string[];

package/dist/cjs/comps/Crumb/index.d.ts

@@ -1,5 +1,5 @@
 declare const Crumb: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
     items: import("./types").CrumbItem[];
     maxItems?: number;
-} & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;
+} & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
 export default Crumb;

package/dist/cjs/comps/Form/index.js

@@ -3,8 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { withPost } from "@zuzjs/core";
 import { forwardRef, startTransition, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { addPropsToChildren, isEmail, isEmpty } from "../../funs";
-import { useBase } from "../../hooks";
-import { FORMVALIDATION, SHEET } from "../../types/enums";
+import { useBase, useToast } from "../../hooks";
+import { FORMVALIDATION } from "../../types/enums";
 import Box from "../Box";
 import Cover from "../Cover";
 import Sheet, { isSheetHandler } from "../Sheet";
@@ -24,6 +24,7 @@ const Form = forwardRef((props, ref) => {
     const innerRef = useRef(null);
     const sheet = useRef(null);
     const submit = useRef(null);
+    const toast = useToast();
     /**
      * Utility function to select multiple DOM elements within the form based on a CSS query.
      * @param query - CSS selector to match elements inside the form.
@@ -188,7 +189,8 @@ const Form = forwardRef((props, ref) => {
     const _onSubmit = useCallback(() => {
         const { error, errorMsg, payload } = _buildFormData();
         if (error) {
-            sheet.current.error(errorMsg);
+            toast.error(errorMsg);
+            // sheet.current!.error(errorMsg)
         }
         else if (action) {
             // If `action` is defined, submit the form data to the specified endpoint
@@ -199,7 +201,8 @@ const Form = forwardRef((props, ref) => {
                 }
                 else
                     setLoading(true);
-                sheet.current.hide();
+                // sheet.current!.hide()
+                toast.clearAll();
                 // submit.current?.setState(ButtonState.Loading)
                 withPost(action, { ...payload, ...(withData || {}) })
                     .then(_resp => {
@@ -219,8 +222,10 @@ const Form = forwardRef((props, ref) => {
                     if (onSuccess)
                         onSuccess(resp);
                     else {
-                        sheet.current.hide();
-                        sheet.current.success(resp.message || `Redirecting..`);
+                        toast.clearAll();
+                        // sheet.current!.hide()
+                        // sheet.current!.success(resp.message || `Redirecting..`)
+                        toast.success(resp.message || `Redirecting...`);
                     }
                 })
                     .catch(err => {
@@ -234,7 +239,8 @@ const Form = forwardRef((props, ref) => {
                     if (onError)
                         onError(err);
                     else
-                        sheet.current.show(err.message || `We cannot process your request at this time.`, 4, SHEET.Error);
+                        toast.error(err.message || `We cannot process your request at this time.`);
+                    // sheet.current!.show(err.message || `We cannot process your request at this time.`, 4, SHEET.Error)
                 });
             });
         }
@@ -261,14 +267,27 @@ const Form = forwardRef((props, ref) => {
         setLoading(mod) {
             if (mod) {
                 sheet.current.hide();
+                try {
+                    toast.clearAll();
+                }
+                catch (e) { }
             }
             setLoading(mod);
         },
         showError(errorMsg) {
-            sheet.current.error(errorMsg, 4);
+            if (typeof errorMsg == `string`) {
+                toast.error(errorMsg);
+            }
+            else {
+                sheet.current.error(errorMsg, 4);
+            }
         },
         hideError() {
             sheet.current.hide();
+            try {
+                toast.clearAll();
+            }
+            catch (e) { }
         },
         init() {
             _init();

package/dist/cjs/comps/Input/index.d.ts

@@ -5,11 +5,19 @@ export type InputProps = Props<`input`> & {
     size?: Size;
     variant?: Variant;
     with?: FORMVALIDATION | `${FORMVALIDATION}${string}`;
+    /**
+     * Triggers when Enter / Return is Pressed
+     */
+    onConfirm?: (value: string) => void;
 };
 declare const Input: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../..").ZuzProps> & {
     numeric?: boolean;
     size?: Size;
     variant?: Variant;
     with?: FORMVALIDATION | `${FORMVALIDATION}${string}`;
+    /**
+     * Triggers when Enter / Return is Pressed
+     */
+    onConfirm?: (value: string) => void;
 } & import("react").RefAttributes<HTMLInputElement>>;
 export default Input;

package/dist/cjs/comps/Input/index.js

@@ -3,14 +3,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useBase } from '../../hooks';
 const Input = forwardRef((props, ref) => {
-    const { size, variant, numeric, ...pops } = props;
+    const { size, variant, numeric, onConfirm, ...pops } = props;
     const { style, className, rest } = useBase(pops);
     const handleInput = (event) => {
         if (numeric) {
             event.currentTarget.value = event.currentTarget.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');
         }
     };
-    return _jsx("input", { className: `--input ${size || variant ? `--${size || variant}` : ``} flex ${className}`.trim(), style: style, onInput: handleInput, ref: ref, ...rest });
+    return _jsx("input", { className: `--input ${size || variant ? `--${size || variant}` : ``} flex ${className}`.trim(), style: style, onInput: handleInput, onKeyDown: (e) => {
+            if (e.key == `Enter`) {
+                onConfirm?.(e.currentTarget.value);
+            }
+        }, ref: ref, ...rest });
 });
 Input.displayName = `Zuz.Input`;
 export default Input;

package/dist/cjs/comps/List/index.d.ts

@@ -6,5 +6,5 @@ declare const List: import("react").ForwardRefExoticComponent<import("../..").Zu
     direction?: "cols" | "rows";
     seperator?: import("react").ReactNode;
     ol?: boolean;
-} & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;
+} & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
 export default List;

package/dist/cjs/comps/PinInput/index.d.ts

@@ -9,6 +9,7 @@ declare const PinInput: import("react").ForwardRefExoticComponent<import("../.."
     size?: import("../..").Size;
     variant?: import("../..").Variant;
     with?: import("../..").FORMVALIDATION | `${import("../..").FORMVALIDATION}${string}`;
+    onConfirm?: (value: string) => void;
 } & {
     mask?: boolean;
     size?: number;

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

@@ -3,5 +3,6 @@ import { ProgressHandler } from "./types";
 declare const ProgressBar: import("react").ForwardRefExoticComponent<BoxProps & {
     progress?: number;
     type?: import("../..").PROGRESS;
+    animated?: boolean;
 } & import("react").RefAttributes<ProgressHandler>>;
 export default ProgressBar;

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

@@ -4,20 +4,25 @@ import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { useBase } from "../../hooks";
 import Box from "../Box";
 const ProgressBar = forwardRef((props, ref) => {
-    const { progress, type, ...pops } = props;
+    const { progress, type, animated, ...pops } = props;
     const bar = useRef(null);
     useImperativeHandle(ref, () => ({
-        setWidth: (p) => {
+        setProgress: (p) => {
             bar.current.style.width = `${p * 100}%`;
         }
     }), []);
     useEffect(() => {
+        console.log(`progressChanged`, progress);
         if (progress && bar.current) {
-            bar.current.style.width = `${progress * 100}%`;
+            if (animated) {
+                setTimeout(() => bar.current.style.width = `${progress * 100}%`, 500);
+            }
+            else
+                bar.current.style.width = `${progress * 100}%`;
         }
     }, [progress, bar.current]);
     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` }) });
+    return _jsx(Box, { className: `--progress ${animated ? `--animated` : ``} flex rel ${className}`.trim(), style: style, ...rest, children: _jsx(Box, { ref: bar, className: `--bar rel` }) });
 });
 ProgressBar.displayName = `Zuz.ProgressBar`;
 export default ProgressBar;

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

@@ -3,7 +3,8 @@ import { BoxProps } from "../Box";
 export type ProgressBarProps = BoxProps & {
     progress?: number;
     type?: PROGRESS;
+    animated?: boolean;
 };
 export interface ProgressHandler {
-    setWidth?: (w: number) => void;
+    setProgress?: (p: number) => void;
 }

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

@@ -5,9 +5,11 @@ declare const Search: import("react").ForwardRefExoticComponent<import("../..").
     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;

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

@@ -9,7 +9,7 @@ import Input from '../Input';
 import KeyBoardKeys from '../KeyboardKeys';
 import SVGIcons from '../svgicons';
 const Search = forwardRef((props, ref) => {
-    const { fx, animate, withStyle, as, reverse, onChange, ...pops } = props;
+    const { fx, animate, withStyle, as, reverse, onChange, onClear, ...pops } = props;
     const { style, className } = useBase({ as: props.as });
     // const { className : searchStyle } = useBase({ as: withStyle || `` } as Props<`div`>)
     const [query, setQuery] = useState(``);
@@ -28,12 +28,14 @@ const Search = forwardRef((props, ref) => {
             onChange?.(``);
             if (innerRef.current) {
                 innerRef.current.value = ``;
+                props.onConfirm?.(``);
             }
         }
         // onSubmit?.(query)
     };
     useImperativeHandle(ref, () => ({
-        focus: () => innerRef.current?.focus()
+        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 && _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 })] });

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

@@ -3,6 +3,7 @@ import { InputProps } from "../Input";
 export type SearchProps = InputProps & {
     onSubmit?: (value: string) => void;
     onChange?: (value: string) => void;
+    onClear?: () => void;
     withStyle?: string;
     shortcut?: KeyCombination;
     reverse?: boolean;

package/dist/cjs/comps/TextWheel/index.js

@@ -34,7 +34,7 @@ const TextWheel = forwardRef((props, ref) => {
         // console.log(value)
         _setValue(value || 0);
     }, [value]);
-    return _jsxs(Box, { className: `--text-wheel flex aic jcc rel`, "aria-hidden": true, as: as, ref: divRef, ...rest, children: [(_value || 0).toString().split('').map((char, index) => {
+    return _jsxs(Box, { className: `--text-wheel flex aic rel`, "aria-hidden": true, as: as, ref: divRef, ...rest, children: [(_value || 0).toString().split('').map((char, index) => {
                 if (isNaN(parseInt(char, 10))) {
                     return _jsx(Span, { className: "--wheel-char wheel-char-symbol grid", children: char }, `wheel-char-${index}`);
                 }

package/dist/cjs/comps/Toast/types.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import { dynamic } from "../..";
 import { TRANSITION_CURVES } from "../../types/enums";
 export declare enum ToastType {
@@ -12,8 +13,8 @@ export interface ToastData {
     id: number;
     type: ToastType;
     icon?: string;
-    title?: string;
-    message?: string;
+    title?: string | ReactNode;
+    message?: string | ReactNode;
     duration?: number;
     onClick?: () => void;
 }

package/dist/cjs/funs/css.js

@@ -899,6 +899,12 @@ export const buildWithStyles = (source) => {
         for (const _prop in source) {
             let prop = _prop;
             if (prop in cssWithKeys) {
+                // console.log(
+                //     prop,
+                //     cssTransformKeys.includes(cssWithKeys[prop].toString()),
+                //     cssFilterKeys.includes(cssWithKeys[prop].toString()),
+                //     cssWithKeys[prop]
+                // )
                 if (cssTransformKeys.includes(cssWithKeys[prop].toString())) {
                     _transform.push(`${cssWithKeys[prop]}(${source[prop]}${_css.makeUnit(prop, source[prop])})`);
                 }

package/dist/cjs/funs/stylesheet.js

@@ -453,7 +453,11 @@ export const cssFilterKeys = [
 ];
 export const cssWithKeys = {
     w: `width`,
+    minW: `minWidth`,
+    maxW: `maxWidth`,
     h: `height`,
+    minH: `minHeight`,
+    maxH: `maxHeight`,
     x: `translateX`,
     y: `translateY`,
     z: `translateZ`,

package/dist/cjs/hooks/useBase.js

@@ -1,6 +1,6 @@
 import { cleanProps, css } from "../funs";
 import { buildWithStyles, getAnimationCurve, getAnimationTransition } from "../funs/css";
-import { cssFilterKeys, cssTransformKeys, cssWithKeys } from "../funs/stylesheet";
+import { cssFilterKeys, cssProps, cssTransformKeys, cssWithKeys } from "../funs/stylesheet";
 let useDrag = null;
 const buildSkeletonStyle = (s) => {
     const makeValue = (v, unit = `px`) => {
@@ -76,7 +76,7 @@ const useBase = (props) => {
             if (prop in cssWithKeys) {
                 _subTrans = cssTransformKeys.includes(cssWithKeys[prop].toString()) ? `transform`
                     : cssFilterKeys.includes(cssWithKeys[prop].toString()) ? `filter`
-                        : _subTrans;
+                        : _subTrans in cssProps ? cssProps[_subTrans] : _subTrans; //(cssWithKeys[prop] || _subTrans).toString() // _subTrans
             }
             else if (cssTransformKeys.includes(prop)) {
                 _subTrans = `transform`;

package/dist/cjs/hooks/useSlider.d.ts

@@ -2,6 +2,6 @@ declare const useSlider: () => {
     push: (key: string) => void;
     goBack: () => void;
     prevKey: string | null;
-    direction: "right" | "left";
+    direction: "left" | "right";
 };
 export default useSlider;

package/dist/cjs/types/index.d.ts

@@ -67,7 +67,11 @@ export type FormInputs = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElem
 export type cssShortKey = keyof cssShortKeys;
 export type cssShortKeys = {
     w: string | number;
+    minW: string | number;
+    maxW: string | number;
     h: string | number;
+    minH: string | number;
+    maxH: string | number;
     x: string | number;
     y: string | number;
     z: string | number;