@zuzjs/ui 0.4.0 → 0.4.2

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

@@ -1,12 +1,15 @@
 import { ReactNode } from "react";
+import { animationProps } from "./base";
 import { SHEET } from "../types/enums";
 export interface SheetProps {
     as?: string;
+    animate?: animationProps;
     title?: string;
     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,63 +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 })] });
 });
-// import { forwardRef, ReactNode, Ref, useEffect, useImperativeHandle, useRef, useState } from "react";
-// import { css, cleanProps } from "../funs";
-// import { UIProps } from "../types/interfaces";
-// import { SHEET } from "../types/enums";
-// export interface SheetProps extends UIProps<HTMLDivElement> {
-//     title?: string,
-//     message?: string | ReactNode
-// }
-// export interface SheetHandler {
-//     show: ( message : string, duration?: number, type?: SHEET ) => void,
-//     hide: () => void
-// }
-// let _sheetTimeout: NodeJS.Timeout | null = null
-// let _sheetWobbleTimeout: NodeJS.Timeout | null = null
-// const Sheet = forwardRef<SheetHandler, SheetProps>(( props :  SheetProps, ref ) => {
-//     const { as, title } = props
-//     const { cx } = css.Build(as)
-//     const [ visible, setVisible ] = useState(false)
-//     const [ msg, setMsg ] = useState(``)
-//     const [ _errorType, setErrorType ] = useState(SHEET.Default)
-//     const divRef = useRef<HTMLDivElement>(null);
-//     useImperativeHandle(ref, () => ({
-//         show( message: string, duration?: number, type?: SHEET ){
-//             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)
-//             }                      
-//             _sheetTimeout = setTimeout(() => {
-//                 setVisible(false)
-//                 _sheetTimeout = null
-//                 _sheetWobbleTimeout = null
-//             }, (duration || 4) * 1000)
-//             setErrorType(type || SHEET.Default)
-//             setMsg(message);
-//             setVisible(true);
-//         },
-//         hide(){
-//             setVisible(false)
-//         }
-//     }))
-//     useEffect(() => {
-//     }, [])
-//     return <div 
-//         ref={divRef}
-//         className={[`zuz-sheet toast-${_errorType.toLowerCase()} zuz-toast${visible ? ` is-visible` : ``} fixed`, ...cx].join(` `).trim()}
-//         {...(cleanProps(props) as UIProps<HTMLDivElement>)}>
-//             {msg == `` ? `Lorem ipsum dolor sit amet, consectetur adipiscing...` : msg}
-//         </div>
-// })
 export default Sheet;

package/dist/comps/spinner.d.ts

@@ -1,7 +1,9 @@
 import { ComponentPropsWithoutRef } from "react";
+import { animationProps } from "./base";
 import { SPINNER } from "../types/enums";
 export interface SpinnerProps extends ComponentPropsWithoutRef<`div`> {
     as?: string;
+    animate?: animationProps;
     type?: SPINNER;
     size?: number;
     width?: number;

package/dist/comps/spinner.js

@@ -6,7 +6,6 @@ import { hexToRgba } from "../funs";
 const Spinner = forwardRef((props, ref) => {
     const { as, type, width, speed, size, color, background, foreground, ...rest } = props;
     const defaultColor = `#000000`;
-    // console.log(`sp`, props)
     const buildSimple = () => {
         const c = hexToRgba(color || defaultColor);
         const bg = hexToRgba(color || defaultColor, .3);

package/dist/funs/colors.d.ts

@@ -1,7 +1 @@
-/**
- * An array of color names.
- *
- * @remarks
- * This array contains a list of color names that can be used in CSS or other color-related operations.
- */
 export declare const colorNames: string[];

package/dist/funs/colors.js

@@ -1,9 +1,3 @@
-/**
- * An array of color names.
- *
- * @remarks
- * This array contains a list of color names that can be used in CSS or other color-related operations.
- */
 export const colorNames = [
     'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure', 'beige', 'bisque', 'black', 'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'fuchsia', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green', 'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'lime', 'limegreen', 'linen', 'magenta', 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'navy', 'oldlace', 'olive', 'olivedrab', 'orange', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'purple', 'rebeccapurple', 'red', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue', 'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue', 'tan', 'teal', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen'
 ];

package/dist/funs/css.d.ts

@@ -1,263 +1,37 @@
-import { dynamicObject } from "../types/index.js";
+import { dynamicObject } from "../types";
+import Hashids from "hashids";
 declare class CSS {
-    unit: any;
-    PROPS: {
-        [x: string]: any;
-        alignContent: string;
-        alignItems: string;
-        alignSelf: string;
-        animation: string;
-        animationDelay: string;
-        animationDirection: string;
-        animationDuration: string;
-        animationFillMode: string;
-        animationIterationCount: string;
-        animationName: string;
-        animationPlayState: string;
-        animationTimingFunction: string;
-        background: string;
-        backgroundColor: string;
-        backgroundImage: string;
-        backgroundOrigin: string;
-        backgroundPosition: string;
-        backgroundRepeat: string;
-        backgroundSize: string;
-        backfaceVisibility: string;
-        backgroundAttachment: string;
-        backgroundBlendMode: string;
-        backgroundClip: string;
-        border: string;
-        borderBottom: string;
-        borderBottomColor: string;
-        borderBottomStyle: string;
-        borderBottomWidth: string;
-        borderCollapse: string;
-        borderColor: string;
-        borderImage: string;
-        borderImageOutset: string;
-        borderImageRepeat: string;
-        borderImageSlice: string;
-        borderImageSource: string;
-        borderImageWidth: string;
-        borderLeft: string;
-        borderLeftColor: string;
-        borderLeftStyle: string;
-        borderLeftWidth: string;
-        borderRight: string;
-        borderRightColor: string;
-        borderRightStyle: string;
-        borderRightWidth: string;
-        borderSpacing: string;
-        borderStyle: string;
-        borderTop: string;
-        borderTopColor: string;
-        borderTopStyle: string;
-        borderTopWidth: string;
-        borderWidth: string;
-        borderRadius: string;
-        borderTopLeftRadius: string;
-        borderTopRightRadius: string;
-        borderBottomLeftRadius: string;
-        borderBottomRightRadius: string;
-        bottom: string;
-        boxDecorationBreak: string;
-        boxShadow: string;
-        boxSizing: string;
-        captionSide: string;
-        caretColor: string;
-        "@charset": string;
-        clear: string;
-        clip: string;
-        clipPath: string;
-        color: string;
-        columnCount: string;
-        columnFill: string;
-        columnGap: string;
-        colGap: string;
-        columnRule: string;
-        columnRuleColor: string;
-        columnRuleStyle: string;
-        columnRuleWidth: string;
-        columnSpan: string;
-        columnWidth: string;
-        columns: string;
-        content: string;
-        counterIncrement: string;
-        counterReset: string;
-        cursor: string;
-        pointer: string;
-        direction: string;
-        display: string;
-        emptyCells: string;
-        filter: string;
-        flex: string;
-        flexBasis: string;
-        flexDirection: string;
-        flexFlow: string;
-        flexGrow: string;
-        flexShrink: string;
-        flexWrap: string;
-        float: string;
-        font: string;
-        fontFamily: string;
-        fontKerning: string;
-        fontSize: string;
-        fontSizeAdjust: string;
-        fontStretch: string;
-        fontStyle: string;
-        fontVariant: string;
-        bold: string;
-        fontWeight: string;
-        gap: string;
-        grid: string;
-        gridArea: string;
-        gridAutoColumns: string;
-        gridAutoFlow: string;
-        gridAutoRows: string;
-        gridColumn: string;
-        gridColumnEnd: string;
-        gridColumnGap: string;
-        gridColumnStart: string;
-        gridGap: string;
-        gridRow: string;
-        gridRowEnd: string;
-        gridRowGap: string;
-        gridRowStart: string;
-        gridTemplate: string;
-        gridTemplateAreas: string;
-        gridTemplateColumns: string;
-        gridTemplateRows: string;
-        hangingPunctuation: string;
-        hyphens: string;
-        isolation: string;
-        justifyContent: string;
-        left: string;
-        letterSpacing: string;
-        lineHeight: string;
-        listStyle: string;
-        listStyleImage: string;
-        listStylePosition: string;
-        listStyleType: string;
-        aspectRatio: string;
-        margin: string;
-        marginBottom: string;
-        marginLeft: string;
-        marginRight: string;
-        marginTop: string;
-        height: string;
-        minHeight: string;
-        maxHeight: string;
-        width: string;
-        minWidth: string;
-        maxWidth: string;
-        mixBlendMode: string;
-        objectFit: string;
-        objectPosition: string;
-        opacity: string;
-        order: string;
-        outline: string;
-        outlineColor: string;
-        outlineOffset: string;
-        outlineStyle: string;
-        outlineWidth: string;
-        overflow: string;
-        overflowX: string;
-        overflowY: string;
-        padding: string;
-        paddingBottom: string;
-        paddingLeft: string;
-        paddingRight: string;
-        paddingTop: string;
-        pageBreakAfter: string;
-        pageBreakBefore: string;
-        pageBreakInside: string;
-        perspective: string;
-        perspectiveOrigin: string;
-        pointerEvents: string;
-        position: string;
-        quotes: string;
-        resize: string;
-        right: string;
-        scrollBehavior: string;
-        tabSize: string;
-        tableLayout: string;
-        align: string;
-        textAlign: string;
-        textAlignLast: string;
-        textDecoration: string;
-        textDecorationColor: string;
-        textDecorationLine: string;
-        textDecorationStyle: string;
-        textIndent: string;
-        textJustify: string;
-        textOverflow: string;
-        textShadow: string;
-        textTransform: string;
-        top: string;
-        transform: string;
-        "transform(2D)": string;
-        "transformOrigin(twoValue syntax)": string;
-        transformStyle: string;
-        transition: string;
-        transitionDelay: string;
-        transitionDuration: string;
-        transitionProperty: string;
-        transitionTimingFunction: string;
-        unicodeBidi: string;
-        userSelect: string;
-        verticalAlign: string;
-        visibility: string;
-        whiteSpace: string;
-        wordBreak: string;
-        wordSpacing: string;
-        textWrap: string;
-        wordWrap: string;
-        writingMode: string;
-        zIndex: string;
-        backdropFilter: string;
-    };
-    DIRECT: {
-        [x: string]: any;
-        fill: string;
-        abc: string;
-    };
-    IGNORE: string[];
-    chars: string;
-    hashids: any;
     cx: string[];
-    cache: {
-        [x: string]: any;
-    };
-    pseudoRegExp: RegExp;
-    pseudoList: string[];
-    pseudoCounter: {
-        [key: string]: number;
-    };
-    pseudoPattern: string;
-    pseudoReg: RegExp;
-    propCounter: dynamicObject;
-    keysWithoutCommaToSpace: string[];
+    cache: dynamicObject;
+    PROPS: dynamicObject;
+    DIRECT: dynamicObject;
+    hashids: Hashids;
+    chars: string;
     rgbaRegex: RegExp;
+    IGNORE: string[];
+    unit: any;
+    keysWithoutCommaToSpace: string[];
+    propCounter: dynamicObject;
     seperator: string;
-    constructor(options?: {
-        [x: string]: any;
-    } | undefined);
-    getStyleSheet(cache: {
-        [key: string]: any;
-    }, indentLevel?: number, pseudo?: boolean): string;
-    makeColor(): void;
+    pseudoList: string[];
+    ids: string[];
+    constructor(options?: dynamicObject | undefined);
+    styleSheet(cache: dynamicObject, pseudo?: string): string;
+    _styleSheet(cache: dynamicObject): string;
+    cleanKey(key: string): string;
+    deepClean(cache: dynamicObject, level?: number): dynamicObject;
     makeUnit(k: string, v: any): any;
     makeValue(k: string, v: any): string;
+    calcIndexes(str: string): string;
+    mmakeID(k: string, v: string, _out: string): string;
     makeID(k: string, v: string, _out: string): string;
-    makeIDFromObject(key: string, obj: dynamicObject): string;
-    parseRawLine(line: string): {
-        [key: string]: {};
-    };
-    makeCSS(line: string): void;
-    cleanPseudo(cache: dynamicObject): dynamicObject;
-    Build(css: string | string[][]): {
+    lexer(line: string): dynamicObject;
+    processLine(line: string): void;
+    Build(css: string | string[][], cli?: boolean): {
         cx: string[];
         sheet: string;
     };
 }
 export default CSS;
+export declare const buildWithStyles: (source: dynamicObject) => dynamicObject;
+export declare const getAnimationCurve: (curve?: string) => string;