@zuzjs/ui 0.4.1 → 0.4.2

package/dist/comps/base.js

@@ -1,6 +1,6 @@
 import { createElement, forwardRef } from "react";
 import { css, cleanProps } from "../funs";
-import { buildWithStyles } from "../funs/css";
+import { buildWithStyles, getAnimationCurve } from "../funs/css";
 const With = forwardRef(({ tag, as, animate, className, propsToRemove, style, ...rest }, ref) => {
     const Comp = tag || 'div';
     let cx = [];
@@ -9,7 +9,7 @@ const With = forwardRef(({ tag, as, animate, className, propsToRemove, style, ..
     }
     const { from, to, when, duration, delay, curve } = animate || {};
     let _style = {};
-    const _transition = from && to ? { transition: `all ${duration || `0.2`}s ${curve || `linear`} ${delay || 0}s` } : {};
+    const _transition = from && to ? { transition: `all ${duration || `0.2`}s ${getAnimationCurve(curve)} ${delay || 0}s` } : {};
     if (undefined === when) {
         _style = { ...from, ...to };
     }

package/dist/comps/cover.js

@@ -6,7 +6,7 @@ import { hexToRgba } from "../funs";
 const Cover = forwardRef((props, ref) => {
     const { spinner, message, color, as, ...rest } = props;
     return (_jsxs(With, { className: `zuz-cover flex aic jcc cols abs fill`, ref: ref, style: {
-            backgroundColor: hexToRgba(color || `#ffffff`, .9)
+            backgroundColor: color ? !color.startsWith(`#`) ? hexToRgba(color, .9) : color : hexToRgba(color || `#ffffff`, .9)
         }, as: as, ...rest, children: [_jsx(Spinner, { ...spinner }), _jsx(With, { tag: `h1`, className: `label`, children: message || `loading` })] }));
 });
 export default Cover;

package/dist/comps/dialog.js

@@ -0,0 +1 @@
+"use strict";

package/dist/comps/form.d.ts

@@ -16,5 +16,8 @@ export interface FormProps {
         message?: string;
     };
 }
-declare const Form: import("react").ForwardRefExoticComponent<FormProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface FormHandler {
+    setLoading: (mode: boolean) => void;
+}
+declare const Form: import("react").ForwardRefExoticComponent<FormProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<FormHandler>>;
 export default Form;

package/dist/comps/form.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef, useState, useTransition } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState, useTransition } from "react";
 import With from "./base";
 import { isEmail, withPost } from "../funs";
 import Sheet from "./sheet";
@@ -134,7 +134,15 @@ const Form = forwardRef((props, ref) => {
             });
         }
     };
+    useImperativeHandle(ref, () => ({
+        setLoading(mod) {
+            setLoading(mod);
+        },
+        showError(errorMsg) {
+            sheet.current.show(errorMsg, 4, SHEET.Error);
+        }
+    }));
     useEffect(_init, []);
-    return _jsxs(With, { as: as, className: `rel`, ref: _ref, propsToRemove: [`withData`, `action`, `onSubmit`, `onSuccess`, `onError`], ...rest, children: [_jsx(Sheet, { ref: sheet }), loading && _jsx(Cover, { message: cover.message || `working`, ...{ spinner, color: cover.color || `#ffffff` } }), children] });
+    return _jsxs(With, { as: as, className: `rel`, ref: _ref, propsToRemove: [`withData`, `action`, `onSubmit`, `onSuccess`, `onError`], ...rest, children: [_jsx(Sheet, { ref: sheet }), loading && _jsx(Cover, { message: cover ? cover.message || undefined : `working`, ...{ spinner, color: cover ? `color` in cover ? cover.color : `#ffffff` : `#ffffff` } }), children] });
 });
 export default Form;

package/dist/comps/select.d.ts

@@ -0,0 +1,18 @@
+import { animationProps } from "./base";
+import { FORMVALIDATION } from "../types/enums";
+import { dynamicObject } from "../types";
+export interface SelectProps {
+    as?: string;
+    name?: string;
+    animate?: animationProps;
+    required?: FORMVALIDATION;
+    options: dynamicObject[];
+    label?: string;
+    defaultValue?: string | dynamicObject;
+    onChange?: (v: string | dynamicObject) => void;
+}
+export interface SelectHandler {
+    onChange?: (v: string | dynamicObject) => void;
+}
+declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<SelectHandler>>;
+export default Select;

package/dist/comps/select.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import With from "./base";
+import { uuid } from "../funs";
+const chevronExpand = () => _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", className: "bi bi-chevron-expand", viewBox: "0 0 16 16", children: _jsx("path", { fillRule: "evenodd", d: "M3.646 9.146a.5.5 0 01.708 0L8 12.793l3.646-3.647a.5.5 0 01.708.708l-4 4a.5.5 0 01-.708 0l-4-4a.5.5 0 010-.708zm0-2.292a.5.5 0 00.708 0L8 3.207l3.646 3.647a.5.5 0 00.708-.708l-4-4a.5.5 0 00-.708 0l-4 4a.5.5 0 000 .708z" }) });
+const Select = forwardRef((props, ref) => {
+    const { as, options, name, label, defaultValue, onChange, ...rest } = props;
+    const _ref = useRef(null);
+    const _id = useMemo(() => name || uuid(), []);
+    const [choosing, setChoosing] = useState(false);
+    const [value, setValue] = useState(defaultValue || options[0]);
+    const updateValue = (o) => {
+        setValue(o);
+        onChange && onChange(o);
+    };
+    useEffect(() => {
+        document.body.addEventListener(`click`, (e) => {
+            setChoosing(false);
+        });
+    }, []);
+    return _jsxs(_Fragment, { children: [_jsxs(With, { popovertarget: _id, tag: `button`, as: as, className: `zuz-select rel flex aic`, ref: _ref, onClick: (e) => setChoosing(true), ...rest, children: [_jsx(With, { tag: `h2`, className: `zuz-selected`, children: value ? `string` == typeof value ? value : value.value : label || `Choose` }), chevronExpand()] }), _jsx(With, { popover: true, id: _id, className: `zuz-select-options abs flex cols`, style: {
+                    pointerEvents: choosing ? `auto` : `none`,
+                }, animate: {
+                    from: { height: 0, opacity: 0 },
+                    to: { height: `auto`, opacity: 1 },
+                    when: choosing,
+                    curve: `spring`,
+                    duration: .4
+                }, children: options.map((o) => _jsx(With, { onClick: (e) => updateValue(o), className: value && (`string` == typeof o ? o : o.value) == (`string` == typeof value ? value : value.value) ? `selected` : ``, tag: `button`, children: `string` == typeof o ? o : o.label }, `option-${(`string` == typeof o ? o : o.label).replace(/\s+/g, `-`)}-${`string` == typeof o ? o : o.value}`)) })] });
+});
+export default Select;

package/dist/comps/sheet.d.ts

@@ -8,7 +8,8 @@ export interface SheetProps {
     message?: string | ReactNode;
 }
 export interface SheetHandler {
-    show: (message: string, duration?: number, type?: SHEET) => void;
+    showDialog: (message: string | ReactNode, onShow: () => void) => void;
+    show: (message: string | ReactNode, duration?: number, type?: SHEET) => void;
     hide: () => void;
 }
 declare const Sheet: import("react").ForwardRefExoticComponent<SheetProps & import("react").RefAttributes<SheetHandler>>;

package/dist/comps/sheet.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import With from "./base";
 import { SHEET } from "../types/enums";
@@ -12,6 +12,24 @@ const Sheet = forwardRef((props, ref) => {
     const [_errorType, setErrorType] = useState(SHEET.Default);
     const divRef = useRef(null);
     useImperativeHandle(ref, () => ({
+        showDialog(message, onShow) {
+            if (_sheetTimeout) {
+                clearTimeout(_sheetTimeout);
+                if (_sheetWobbleTimeout) {
+                    clearTimeout(_sheetWobbleTimeout);
+                }
+                divRef.current.classList.remove(`wobble`);
+                setTimeout(() => divRef.current.classList.add(`wobble`), 50);
+                _sheetWobbleTimeout = setTimeout(() => {
+                    divRef.current.classList.remove(`wobble`);
+                    _sheetWobbleTimeout = null;
+                }, 500);
+            }
+            setErrorType(SHEET.Dialog);
+            setMsg(message);
+            setVisible(true);
+            setTimeout(() => onShow ? onShow() : () => { }, 1000);
+        },
         show(message, duration, type) {
             if (_sheetTimeout) {
                 clearTimeout(_sheetTimeout);
@@ -40,6 +58,25 @@ const Sheet = forwardRef((props, ref) => {
     }));
     useEffect(() => {
     }, []);
-    return _jsx(With, { as: as, className: `zuz-sheet toast-${_errorType.toLowerCase()} zuz-toast${visible ? ` is-visible` : ``} fixed`.trim(), ...rest, ref: divRef, children: msg == `` ? `Lorem ipsum dolor sit amet, consectetur adipiscing...` : msg });
+    return _jsxs(_Fragment, { children: [_errorType == SHEET.Dialog && _jsx(With, { className: `zuz-sheet-overlay fixed fill`, animate: {
+                    from: { y: `-100vh`, opacity: 0 },
+                    to: { y: 0, opacity: 1 },
+                    when: visible,
+                    duration: 0.1,
+                } }), _jsx(With, { animate: _errorType == SHEET.Dialog ? {
+                    from: { scale: 0, x: `-50%`, y: `-50%`, opacity: 0 },
+                    to: { scale: 1, x: `-50%`, y: `-50%`, opacity: 1 },
+                    when: visible,
+                    duration: 0.3,
+                    delay: 0.1,
+                    curve: `spring`
+                } : {
+                    from: { scale: 0, x: `-50%`, y: `-10vh`, opacity: 0 },
+                    to: { scale: 1, x: `-50%`, y: 0, opacity: 1 },
+                    when: visible,
+                    duration: 0.3,
+                    delay: 0.1,
+                    curve: `spring`
+                }, as: as, className: `zuz-sheet toast-${_errorType.toLowerCase()} fixed`.trim(), ...rest, ref: divRef, children: visible && msg == `` ? `Lorem ipsum dolor sit amet, consectetur adipiscing...` : msg })] });
 });
 export default Sheet;

package/dist/funs/css.d.ts

@@ -34,3 +34,4 @@ declare class CSS {
 }
 export default CSS;
 export declare const buildWithStyles: (source: dynamicObject) => dynamicObject;
+export declare const getAnimationCurve: (curve?: string) => string;

package/dist/funs/css.js

@@ -523,3 +523,18 @@ export const buildWithStyles = (source) => {
     }
     return _;
 };
+export const getAnimationCurve = (curve) => {
+    if (!curve)
+        return `linear`;
+    const _curves = [`spring`];
+    if (_curves.includes(curve)) {
+        switch (curve) {
+            case "spring":
+                return `cubic-bezier(0.2, -0.36, 0, 1.46)`;
+                break;
+            default:
+                return `linear`;
+        }
+    }
+    return curve;
+};

package/dist/funs/index.d.ts

@@ -6,6 +6,8 @@ export declare const LINE_KEY = "__LINE__";
 export declare const toHash: (n: number, len?: number) => string;
 export declare const fromHash: (n: string) => number;
 export declare const css: () => CSS;
+export declare const uuid: (len?: number) => string;
+export declare const numberInRange: (min: number, max: number) => number;
 export declare const hexColorRegex: RegExp;
 export declare const rgbaColorRegex: RegExp;
 export declare const hslColorRegex: RegExp;

package/dist/funs/index.js

@@ -3,6 +3,7 @@ import CSS from './css.js';
 import axios from "axios";
 import { colorNames } from "./colors.js";
 import Hashids from "hashids";
+import { nanoid } from "nanoid";
 let __css;
 export const __SALT = `zuzjs-ui`;
 export const FIELNAME_KEY = `__FILENAME__`;
@@ -10,6 +11,10 @@ export const LINE_KEY = `__LINE__`;
 export const toHash = (n, len = 6) => new Hashids(__SALT, len).encode(n);
 export const fromHash = (n) => Number(new Hashids(__SALT).decode(n));
 export const css = () => __css ? __css : __css = new CSS();
+export const uuid = (len) => nanoid(len);
+export const numberInRange = (min, max) => {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+};
 export const hexColorRegex = /^#([A-Fa-f0-9]{3}){1,2}$/;
 export const rgbaColorRegex = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(,\s*((0|1|0?\.\d+)\s*))?\)$/;
 export const hslColorRegex = /^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/;

package/dist/funs/stylesheet.js

@@ -267,6 +267,7 @@ export const cssDirect = {
     "rel": "position:relative;",
     "abs": "position:absolute;",
     "fixed": "position:fixed;",
+    "sticky": "position:sticky;",
     "abc": "top: 50%;left: 50%;transform: translate(-50%, -50%);",
     "tdn": "text-decoration:none;",
     "tdu": "text-decoration:underline;",

package/dist/index.d.ts

@@ -9,5 +9,6 @@ export { default as Heading } from "./comps/heading";
 export { default as Icon } from "./comps/icon";
 export { default as Image } from "./comps/image";
 export { default as Input } from "./comps/input";
+export { default as Select } from "./comps/select";
 export { default as Sheet } from "./comps/sheet";
 export { default as Spinner } from "./comps/spinner";

package/dist/index.js

@@ -9,5 +9,6 @@ export { default as Heading } from "./comps/heading";
 export { default as Icon } from "./comps/icon";
 export { default as Image } from "./comps/image";
 export { default as Input } from "./comps/input";
+export { default as Select } from "./comps/select";
 export { default as Sheet } from "./comps/sheet";
 export { default as Spinner } from "./comps/spinner";

package/dist/styles.css

@@ -1 +1 @@
-button{user-select:none;cursor:pointer}input{user-select:none}input:-webkit-autofill{background-color:rgba(0,0,0,0) !important;-webkit-box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset;box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset}:root{--checkbox-checked: rgb(46, 161, 42);--checkbox-unchecked: rgb(203, 203, 203);--checkbox-thumb: #fff;--checkbox-thumb-shadow: #000;--checkbox-thumb-shadow-size: 2px}.flex{display:flex}.flex.cols{flex-direction:column}.flex.aic{align-items:center}.flex.jcc{justify-content:center}.abs{position:absolute}.fixed{position:fixed}.fill{top:0px;left:0px;bottom:0px;right:0px}.rel{position:relative}.input-with-error{box-shadow:inset 0px 0px 0px 1px #ff8b8b}.zuz-checkbox{height:25px;width:45px;cursor:pointer}.zuz-checkbox input[type=checkbox]{z-index:0;left:10px;top:10px;opacity:0}.zuz-checkbox:before{content:"";position:absolute;width:45px;height:25px;background:var(--checkbox-unchecked);border-radius:50px;z-index:1;transition:all .3s linear 0s}.zuz-checkbox:after{content:"";position:absolute;width:21px;height:21px;background:var(--checkbox-thumb);border-radius:50px;z-index:2;top:2px;left:2px;box-shadow:0px 0px --checkbox-thumb-shadow-size --checkbox-thumb-shadow;transition:all .2s linear 0s}.zuz-checkbox.is-checked:before{box-shadow:inset 0px 0px 0px 15px var(--checkbox-checked)}.zuz-checkbox.is-checked:after{transform:translateX(20px)}.zuz-spinner{animation:spin infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.zuz-cover{backdrop-filter:blur(4px);z-index:99999;gap:15px}.zuz-cover .label{font-size:14px;animation:breath 1s linear infinite}@keyframes breath{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}.zuz-sheet{top:0px;left:50%;transform:translate(-50%, -10vh);z-index:2147483647;transition:all .5s cubic-bezier(0.68, -0.2, 0.27, 1.5) 0s}.zuz-sheet.toast-default{background:#333;color:#fff}.zuz-sheet.toast-error{background:#ff4747;color:#fff}.zuz-sheet.toast-success{background:#23ac28;color:#fff}.zuz-sheet.toast-warn{background:#ffba00}.zuz-sheet.is-visible{transform:translate(-50%, 0vh)}.zuz-sheet.is-visible.wobble{transform:translate(-50%, 10px);transition:all .5s cubic-bezier(0.68, -0.2, 0.27, 1.5) 0s}.zuz-sheet.zuz-toast{top:-20px;border-radius:0px 0px 5px 5px;padding:25px 15px 5px 15px;font-size:14px}.zuz-context-menu{z-index:99;background:var(--context-background);border-radius:var(--context-radius);padding:10px;box-shadow:var(--context-shadow)}.zuz-context-menu .context-line{height:1px;background:var(--context-seperator);margin:3px 6px}.zuz-context-menu .context-menu-item{width:220px;padding:6px 10px;gap:10px;cursor:pointer;font-size:var(--context-label-size);border-radius:var(--context-radius)}.zuz-context-menu .context-menu-item .ico{font-size:var(--context-icon-size)}.zuz-context-menu .context-menu-item:hover{background:var(--context-hover)}
+*,*::before,*::after{box-sizing:border-box}button{user-select:none;cursor:pointer}input{user-select:none}input:-webkit-autofill{background-color:rgba(0,0,0,0) !important;-webkit-box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset;box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset}[popover]{margin:0;padding:0;border:0}:root{--checkbox-checked: rgb(46, 161, 42);--checkbox-unchecked: rgb(203, 203, 203);--checkbox-thumb: #fff;--checkbox-thumb-shadow: #000;--checkbox-thumb-shadow-size: 2px;--select: #fff;--select-options: #fff;--select-option-font-size: 16px;--select-hover: #eee;--select-selected: #ddd;--select-padding: 6px 8px;--select-radius: 5px}.flex{display:flex}.flex.cols{flex-direction:column}.flex.aic{align-items:center}.flex.jcc{justify-content:center}.abs{position:absolute}.fixed{position:fixed}.fill{top:0px;left:0px;bottom:0px;right:0px}.rel{position:relative}.input-with-error{box-shadow:inset 0px 0px 0px 1px #ff8b8b}.zuz-checkbox{height:25px;width:45px;cursor:pointer}.zuz-checkbox input[type=checkbox]{z-index:0;left:10px;top:10px;opacity:0}.zuz-checkbox:before{content:"";position:absolute;width:45px;height:25px;background:var(--checkbox-unchecked);border-radius:50px;z-index:1;transition:all .3s linear 0s}.zuz-checkbox:after{content:"";position:absolute;width:21px;height:21px;background:var(--checkbox-thumb);border-radius:50px;z-index:2;top:2px;left:2px;box-shadow:0px 0px --checkbox-thumb-shadow-size --checkbox-thumb-shadow;transition:all .2s linear 0s}.zuz-checkbox.is-checked:before{box-shadow:inset 0px 0px 0px 15px var(--checkbox-checked)}.zuz-checkbox.is-checked:after{transform:translateX(20px)}.zuz-spinner{animation:spin infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.zuz-cover{backdrop-filter:blur(4px);z-index:99999;gap:15px}.zuz-cover .label{font-size:14px;animation:breath 1s linear infinite}@keyframes breath{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}.zuz-toast,.zuz-sheet.toast-warn,.zuz-sheet.toast-success,.zuz-sheet.toast-error{border-radius:6px;padding:6px 12px;font-size:14px;white-space:pre}.zuz-sheet{top:50%;left:50%;transform:translate(-50%, -50%);z-index:214748364;transform-origin:top left;transition:all .5s cubic-bezier(0.2, -0.36, 0, 1.46) 0s}.zuz-sheet.toast-default{background:#333;color:#fff}.zuz-sheet.toast-error{background:#ff4747;color:#fff;top:-20px}.zuz-sheet.toast-success{background:#23ac28;color:#fff}.zuz-sheet.toast-warn{background:#ffba00}.zuz-sheet-overlay{background:rgba(0,0,0,.7);z-index:111;backdrop-filter:blur(10px)}.zuz-context-menu{z-index:99;background:var(--context-background);border-radius:var(--context-radius);padding:10px;box-shadow:var(--context-shadow)}.zuz-context-menu .context-line{height:1px;background:var(--context-seperator);margin:3px 6px}.zuz-context-menu .context-menu-item{width:220px;padding:6px 10px;gap:10px;cursor:pointer;font-size:var(--context-label-size);border-radius:var(--context-radius)}.zuz-context-menu .context-menu-item .ico{font-size:var(--context-icon-size)}.zuz-context-menu .context-menu-item:hover{background:var(--context-hover)}.zuz-select{gap:5px;background:var(--select);border-radius:var(--select-radius)}.zuz-select .zuz-selected{flex:1}.zuz-select-options{max-height:400px;overflow-x:hidden;gap:2px;background:var(--select-options);border-radius:var(--select-radius);padding:4px 0px}.zuz-select-options button{background:rgba(0,0,0,0);border:0px;text-align:left;padding:var(--select-padding);border-radius:var(--select-radius);font-size:var(--select-option-font-size)}.zuz-select-options button:hover{background:var(--select-hover)}.zuz-select-options button.selected{background:var(--select-selected)}

package/dist/types/enums.d.ts

@@ -12,6 +12,7 @@ export declare enum FORMVALIDATION {
     MatchField = "MATCHFIELD"
 }
 export declare enum SHEET {
+    Dialog = "DIALOG",
     Default = "DEFAULT",
     Error = "ERROR",
     Success = "SUCCESS",

package/dist/types/enums.js

@@ -16,6 +16,7 @@ export var FORMVALIDATION;
 })(FORMVALIDATION || (FORMVALIDATION = {}));
 export var SHEET;
 (function (SHEET) {
+    SHEET["Dialog"] = "DIALOG";
     SHEET["Default"] = "DEFAULT";
     SHEET["Error"] = "ERROR";
     SHEET["Success"] = "SUCCESS";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zuzjs/ui",
-    "version": "0.4.1",
+    "version": "0.4.2",
     "keywords": [
         "react",
         "zuz",