@zuzjs/ui 0.8.6 → 0.8.8

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/Drawer/index.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { DRAWER_SIDE } from "../../types/enums";
+import { DRAWER_SIDE, TRANSITION_CURVES } from "../../types/enums";
 import { BoxProps } from "../Box";
 import { DrawerHandler } from "./types";
 declare const Drawer: import("react").ForwardRefExoticComponent<BoxProps & {
@@ -9,6 +9,7 @@ declare const Drawer: import("react").ForwardRefExoticComponent<BoxProps & {
     children?: string | ReactNode | ReactNode[];
     prerender?: boolean;
     margin?: number;
+    animation?: TRANSITION_CURVES;
     onClose?: () => void;
 } & import("react").RefAttributes<DrawerHandler>>;
 export default Drawer;

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

@@ -6,7 +6,7 @@ import { DRAWER_SIDE, KeyCode, TRANSITION_CURVES } from "../../types/enums";
 import Box from "../Box";
 import Overlay from "../Overlay";
 const Drawer = forwardRef((props, ref) => {
-    const { from, speed, children, margin, prerender, onClose, ...pops } = props;
+    const { from, speed, children, margin, animation, prerender, onClose, ...pops } = props;
     const [render, setRender] = useState(undefined == prerender ? true : prerender);
     const [visible, setVisible] = useState(false);
     const divRef = useRef(null);
@@ -60,7 +60,7 @@ const Drawer = forwardRef((props, ref) => {
                     from: { ..._style.from, opacity: 0 },
                     to: { ..._style.to, opacity: 1 },
                     when: visible,
-                    curve: TRANSITION_CURVES.EaseInOut,
+                    curve: animation || TRANSITION_CURVES.EaseInOut,
                     duration: speed || .5,
                 }, ...rest, children: [from == DRAWER_SIDE.Top || from == DRAWER_SIDE.Bottom ? _jsx(Box, { className: `--handle` }) : null, render ? content : visible ? content : null] })] });
 });

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

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { DRAWER_SIDE } from "../../types/enums";
+import { DRAWER_SIDE, TRANSITION_CURVES } from "../../types/enums";
 import { BoxProps } from "../Box";
 export type DrawerProps = BoxProps & {
     as?: string;
@@ -8,6 +8,7 @@ export type DrawerProps = BoxProps & {
     children?: string | ReactNode | ReactNode[];
     prerender?: boolean;
     margin?: number;
+    animation?: TRANSITION_CURVES;
     onClose?: () => void;
 };
 export interface DrawerHandler {

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/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/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/Sheet/index.js

@@ -178,7 +178,7 @@ const Sheet = forwardRef((props, ref) => {
         }
     }, [visible]);
     if (sheetType == SHEET.Dialog) {
-        return _jsxs(_Fragment, { children: [_jsx(Overlay, { when: visible }), _jsxs(Box, { className: `--sheet --sheet-${sheetType.toLowerCase()} ${className} fixed`.trim(), style: style, fx: buildAnimation, ...rest, ref: innerRef, children: [_jsx(Cover, { when: loading, spinner: spinner, message: loadingMessage }), _jsxs(Box, { className: `--head flex aic rel`, children: [_jsx(Box, { className: `--${title ? `title` : `dot`} flex aic rel`, children: title || `` }), _jsx(Button, { onClick: (e) => setVisible(false), className: `--closer abs`, children: "\u00D7" })] }), _jsx(Box, { className: `--body flex aic rel ${action ? `` : `--no-action`}`.trim(), children: render ? renderMessage : null }), action && _jsx(Box, { className: `--footer flex aic rel ${actionPosition ? actionPosition == SHEET_ACTION_POSITION.Center ? `jcc` : `` : `jce`}`.trim(), children: action.map((a, i) => _jsx(Button, { onClick: (e) => a.handler ? a.handler() : a.onClick ? a.onClick() : console.log(`onClick Handler missing`), className: `--action`, children: a.label }, `sheet-${sheetID}-action-${a.key}`)) })] })] });
+        return _jsxs(_Fragment, { children: [_jsx(Overlay, { when: visible }), _jsxs(Box, { className: `--sheet --sheet-${sheetType.toLowerCase()} ${visible ? `is-visible` : ``} ${className} fixed`.trim(), style: style, fx: buildAnimation, ...rest, ref: innerRef, children: [_jsx(Cover, { when: loading, spinner: spinner, message: loadingMessage }), _jsxs(Box, { className: `--head flex aic rel`, children: [_jsx(Box, { className: `--${title ? `title` : `dot`} flex aic rel`, children: title || `` }), _jsx(Button, { onClick: (e) => setVisible(false), className: `--closer abs`, children: "\u00D7" })] }), _jsx(Box, { className: `--body flex aic rel ${action ? `` : `--no-action`}`.trim(), children: render ? renderMessage : null }), action && _jsx(Box, { className: `--footer flex aic rel ${actionPosition ? actionPosition == SHEET_ACTION_POSITION.Center ? `jcc` : `` : `jce`}`.trim(), children: action.map((a, i) => _jsx(Button, { onClick: (e) => a.handler ? a.handler() : a.onClick ? a.onClick() : console.log(`onClick Handler missing`), className: `--action`, children: a.label }, `sheet-${sheetID}-action-${a.key}`)) })] })] });
     }
     return _jsx(Box, { className: `--sheet --sheet-${sheetType.toLowerCase()} ${className} abs`.trim(), style: style, ...rest, fx: buildAnimation, ref: innerRef, children: visible ? msg : null });
 });

package/dist/cjs/funs/css.js

@@ -935,6 +935,8 @@ export const getAnimationCurve = (curve) => {
     switch (curve.toUpperCase()) {
         case TRANSITION_CURVES.Bounce:
             return `var(--bounce)`;
+        case TRANSITION_CURVES.Liquid:
+            return `var(--liquid)`;
         case TRANSITION_CURVES.Spring:
             // return `cubic-bezier(0.2, -0.36, 0, 1.46)`
             return `var(--spring)`;

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

@@ -29,6 +29,6 @@ export { default as useResizeObserver } from './useResizeObserver';
 export { default as useSlider } from './useSlider';
 export { default as useToast } from './useToast';
 export { default as useTruncateText } from './useTruncateText';
-export { default as useUploader } from './useUploader';
+export { QueItem as UploadQueItem, Status as UploadStatus, default as useUploader, type Uploadify } from './useUploader';
 export { default as useViewTransition } from './useViewTransition';
 export { default as useWebSocket, type WebSocketOptions } from './useWebSocket';

package/dist/cjs/hooks/index.js

@@ -30,6 +30,6 @@ export { default as useResizeObserver } from './useResizeObserver';
 export { default as useSlider } from './useSlider';
 export { default as useToast } from './useToast';
 export { default as useTruncateText } from './useTruncateText';
-export { default as useUploader } from './useUploader';
+export { Status as UploadStatus, default as useUploader } from './useUploader';
 export { default as useViewTransition } from './useViewTransition';
 export { default as useWebSocket } from './useWebSocket';

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

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

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

@@ -5,7 +5,8 @@ export declare enum Status {
     Idle = 0,
     FetchingServer = 1,
     Uploading = 2,
-    Saving = 3
+    Saving = 3,
+    Saved = 4
 }
 export interface QueItem {
     ID: string;
@@ -37,9 +38,12 @@ export type Uploadify = {
 export interface Uploader {
     apiUrl: string;
     onChange?: (file: QueItem | null) => void;
+    onComplete?: (index: number, que: QueItem[], currentFile: QueItem | null) => void;
+    onError?: (index: number, que: QueItem[], currentFile: QueItem | null) => void;
     onQueFinished?: () => void;
 }
 declare const useUploader: (conf: Uploader) => {
+    get: () => import("react").RefObject<Uploadify>;
     getQue: () => QueItem[];
     addToQue: (f: dynamic) => void;
 };

package/dist/cjs/hooks/useUploader.js

@@ -1,4 +1,6 @@
+"use client";
 import { getCancelToken, withPost } from "@zuzjs/core";
+import { useRef } from "react";
 import { uuid } from "..";
 export var Status;
 (function (Status) {
@@ -7,21 +9,22 @@ export var Status;
     Status[Status["FetchingServer"] = 1] = "FetchingServer";
     Status[Status["Uploading"] = 2] = "Uploading";
     Status[Status["Saving"] = 3] = "Saving";
+    Status[Status["Saved"] = 4] = "Saved";
 })(Status || (Status = {}));
 const useUploader = (conf) => {
     const { apiUrl, onChange, onQueFinished } = conf;
-    const self = {
+    const self = useRef({
         que: [],
         index: -1,
         speed: 0,
         stamp: null,
         token: null,
         status: Status.Idle
-    };
+    });
     const sync = () => onChange?.(currentFile());
     const importFile = () => { };
     const uploadFile = () => {
-        self.stamp = Date.now();
+        self.current.stamp = Date.now();
         const file = currentFile();
         const formData = new FormData();
         formData.append("ID", file.ID);
@@ -30,47 +33,54 @@ const useUploader = (conf) => {
         formData.append("token", file.server.token);
         formData.append('file', file.file);
         formData.append('fs', file.file.size.toString());
-        self.cancelToken = getCancelToken();
-        withPost(`${self.que[self.index].server.uri}/receive`, formData, 86400, true, (ev) => {
-            console.log(ev);
+        self.current.cancelToken = getCancelToken();
+        withPost(`${self.current.que[self.current.index].server.uri}/receive`, formData, 86400, true, undefined, (ev) => {
+            self.current.que[self.current.index].status = Status.Uploading;
+            onChange?.({ ...currentFile(), progress: (ev.progress || 0) });
         })
-            .catch(resp => {
-            console.log(`Uploaded`, resp);
+            .then(resp => {
+            // console.log(`Uploaded`, resp)
+            self.current.que[self.current.index].progress = 1;
+            self.current.que[self.current.index].status = Status.Saved;
+            self.current.status = Status.Idle;
+            sync();
+            Que();
         })
             .catch(err => {
-            self.que[self.index].status = Status.Error;
-            self.status = Status.Idle;
+            // console.error(`UploadFailed`, err)
+            self.current.que[self.current.index].status = Status.Error;
+            self.current.status = Status.Idle;
             sync();
             Que();
         });
     };
     const getServer = (force) => {
-        self.que[self.index].status = Status.FetchingServer;
+        self.current.que[self.current.index].status = Status.FetchingServer;
         sync();
         withPost(`${apiUrl}get_server`, { size: currentFile().file.size })
             .then((resp) => {
-            self.que[self.index].server = resp.server;
-            self.que[self.index].status = Status.Uploading;
+            self.current.que[self.current.index].server = resp.server;
+            self.current.que[self.current.index].status = Status.Uploading;
             sync();
             uploadFile();
         })
             .catch((err) => {
-            self.que[self.index].status = Status.Error;
-            self.status = Status.Idle;
+            self.current.que[self.current.index].status = Status.Error;
+            self.current.status = Status.Idle;
             sync();
             Que();
         });
     };
-    const currentFile = () => self.que[self.index];
-    const getQue = () => self.que;
+    const currentFile = () => self.current.que[self.current.index];
+    const getQue = () => self.current.que;
     const Que = () => {
-        if (self.status == Status.Idle &&
-            (self.que.length - 1) > self.index) {
-            self.status = Status.Uploading;
-            self.index++;
-            self.que[self.index].status = Status.Uploading;
+        if (self.current.status == Status.Idle &&
+            (self.current.que.length - 1) > self.current.index) {
+            self.current.status = Status.Uploading;
+            self.current.index++;
+            self.current.que[self.current.index].status = Status.Uploading;
             sync();
-            if (self.que[self.index].remote)
+            if (self.current.que[self.current.index].remote)
                 importFile();
             else
                 getServer(true);
@@ -79,7 +89,7 @@ const useUploader = (conf) => {
             onQueFinished?.();
     };
     const addToQue = (f) => {
-        self.que.push({
+        self.current.que.push({
             ID: uuid(),
             file: f.file,
             dir: f.dir,
@@ -94,6 +104,7 @@ const useUploader = (conf) => {
         Que();
     };
     return {
+        get: () => self,
         getQue,
         addToQue,
     };

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

@@ -34,6 +34,7 @@ export declare enum SHEET_ACTION_POSITION {
 }
 export declare enum TRANSITION_CURVES {
     Spring = "SPRING",
+    Liquid = "LIQUID",
     EaseInOut = "EASEINOUT",
     Bounce = "BOUNCE"
 }

package/dist/cjs/types/enums.js

@@ -45,6 +45,7 @@ export var TRANSITION_CURVES;
     // Ease = "EASE",
     // EaseIn = "EASEIN",
     // EaseOut = "EASEOUT",
+    TRANSITION_CURVES["Liquid"] = "LIQUID";
     TRANSITION_CURVES["EaseInOut"] = "EASEINOUT";
     TRANSITION_CURVES["Bounce"] = "BOUNCE";
     // Linear = "LINEAR",