@zuzjs/ui 0.3.7 → 0.3.9

package/dist/comps/sheet.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import { SHEET } from "../types/enums";
+export interface SheetProps {
+    as?: string;
+    title?: string;
+    message?: string | ReactNode;
+}
+export interface SheetHandler {
+    show: (message: string, duration?: number, type?: SHEET) => void;
+    hide: () => void;
+}
+declare const Sheet: import("react").ForwardRefExoticComponent<SheetProps & import("react").RefAttributes<SheetHandler>>;
+export default Sheet;

package/dist/comps/sheet.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import With from "./base";
+import { SHEET } from "../types/enums";
+let _sheetTimeout = null;
+let _sheetWobbleTimeout = null;
+const Sheet = forwardRef((props, ref) => {
+    const { as, ...rest } = props;
+    const [visible, setVisible] = useState(false);
+    const [msg, setMsg] = useState(``);
+    const [_errorType, setErrorType] = useState(SHEET.Default);
+    const divRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        show(message, duration, type) {
+            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 _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 });
+});
+// 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

@@ -0,0 +1,14 @@
+import { ComponentPropsWithoutRef } from "react";
+import { SPINNER } from "../types/enums";
+export interface SpinnerProps extends ComponentPropsWithoutRef<`div`> {
+    as?: string;
+    type?: SPINNER;
+    size?: number;
+    width?: number;
+    color?: string;
+    background?: string;
+    foreground?: string;
+    speed?: number;
+}
+declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Spinner;

package/dist/comps/spinner.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import With from "./base";
+import { SPINNER } from "../types/enums";
+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);
+        const pops = {
+            width: size || 50,
+            height: size || 50,
+            border: `${width || 3}px solid ${bg}`,
+            borderRadius: `50%`,
+            borderTopColor: c,
+            animationDuration: `${speed || .6}s`,
+            animationTimingFunction: `linear`
+        };
+        return pops;
+    };
+    const build = () => {
+        let _ = {};
+        switch (type || SPINNER.Simple) {
+            case SPINNER.Simple:
+                _ = buildSimple();
+                break;
+        }
+        return _;
+    };
+    const getChild = () => {
+        switch (type || SPINNER.Simple) {
+            case SPINNER.Simple:
+                break;
+        }
+        return null;
+    };
+    return _jsx(With, { as: as, ref: ref, tag: `div`, className: `zuz-spinner${type ? `-${type.toLowerCase()}` : ``}`, style: build(), ...rest, children: getChild() });
+});
+export default Spinner;

package/dist/funs/colors.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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

@@ -0,0 +1,9 @@
+/**
+ * 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

@@ -0,0 +1,269 @@
+import { dynamicObject } from "../types/index.js";
+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[];
+    baseRegex: RegExp;
+    pseudoCounter: {
+        [key: string]: number;
+    };
+    pseudoPattern: string;
+    pseudoReg: RegExp;
+    propCounter: dynamicObject;
+    keysWithoutCommaToSpace: string[];
+    rgbaRegex: RegExp;
+    constructor(options?: {
+        [x: string]: any;
+    } | undefined);
+    getStyleSheet(cache: {
+        [key: string]: any;
+    }, indentLevel?: number, pseudo?: boolean): string;
+    makeColor(): void;
+    makeUnit(k: string, v: any): any;
+    makeValue(k: string, v: any): string;
+    makeID(k: string, v: string, _out: string): string;
+    makeIDFromObject(key: string, obj: {
+        [key: string]: any;
+    }): string;
+    parseRawLine(line: string): {
+        [key: string]: {};
+    };
+    makeCSS(line: string): void;
+    cleanPseudo(cache: {
+        [key: string]: any;
+    }): {
+        [key: string]: any;
+    };
+    Build(css: string | string[][]): {
+        cx: string[];
+        sheet: string;
+    };
+}
+export default CSS;