@zuzjs/ui 0.5.3 → 0.5.5

package/dist/comps/form.js

@@ -1,21 +1,46 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState, useTransition } from "react";
-import With from "./base";
-import { isEmail, withPost } from "../funs";
+import { forwardRef, startTransition, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import Box from "./box";
+import useBase from "./useBase";
 import Sheet from "./sheet";
-import { FORMVALIDATION, SHEET } from "../types/enums";
 import Cover from "./cover";
+import { FORMVALIDATION, SHEET } from "../types/enums";
+import { isEmail, withPost } from "../funs";
+/**
+ * {@link Form} is a controlled component designed to handle form data submission, validation, and display of loading or error states.
+ * It allows for optional server-side submission through an action endpoint and customizable success/error handling callbacks.
+ *
+ * The component also provides an interface for controlling loading and error states from a parent component using {@link FormHandler}.
+ *
+ * @param props - Properties to configure form behavior, validation messages, submission handling, and visual feedback.
+ * @param ref - Reference to the {@link FormHandler} interface, exposing methods to control loading and error states from the parent.
+ */
 const Form = forwardRef((props, ref) => {
-    const { as, spinner, action, errors, cover, children, withData, onSuccess, onSubmit, onError, ...rest } = props;
+    const { name, cover, spinner, errors, action, children, withData, onSubmit, onError, onSuccess, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
     const [loading, setLoading] = useState(false);
-    const [isLoading, startTransition] = useTransition();
-    const [sheetType, setSheetType] = useState(SHEET.Default);
     const sheet = useRef(null);
-    const _ref = useRef(null);
-    const _nodes = (query) => _ref.current.querySelectorAll(query);
-    const _validate = (el) => {
+    const innerRef = useRef(null);
+    /**
+     * 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.
+     */
+    const _nodes = useCallback((query) => {
+        if (innerRef.current)
+            return innerRef.current.querySelectorAll(query);
+        return [];
+    }, [innerRef.current]);
+    /**
+     * Validates form fields based on their type and custom attributes.
+     *
+     * @param el - The element to validate.
+     * @returns Whether the element meets the required validation criteria.
+     */
+    const _validate = useCallback((el) => {
         if (el.required) {
+            /**
+             * @internal
+             * Required field validation */
             if (el.type == `checkbox` && el.checked == false) {
                 return false;
             }
@@ -25,6 +50,10 @@ const Form = forwardRef((props, ref) => {
             if (el.value == ``)
                 return false;
         }
+        /**
+         * @internal
+         * Additional validation based on `with` attribute
+         */
         if (el.getAttribute(`with`)) {
             let _with = el.getAttribute(`with`);
             if (_with.includes(`@`)) {
@@ -50,7 +79,7 @@ const Form = forwardRef((props, ref) => {
                     const _el = document.querySelector(`[name=${field.trim()}]`);
                     if (!_el)
                         return false;
-                    console.log(`matching`, _el.name, _el.value, el.name, el.value);
+                    // console.log(`matching`, _el.name, _el.value, el.name, el.value)                    
                     if (_el && _el.value != el.value) {
                         return false;
                     }
@@ -60,8 +89,13 @@ const Form = forwardRef((props, ref) => {
             }
         }
         return true;
-    };
-    const _buildFormData = () => {
+    }, [innerRef.current]);
+    /**
+     * Constructs the form data and validates the fields.
+     *
+     * @returns Form data object along with validation status and error information.
+     */
+    const _buildFormData = useCallback(() => {
         const data = {};
         const payload = {};
         let _error = null;
@@ -93,13 +127,17 @@ const Form = forwardRef((props, ref) => {
             errorMsg: _errorMsg || `Fix errors to continue...`,
             data, payload
         };
-    };
-    const _onSubmit = () => {
+    }, [innerRef.current]);
+    /**
+     * Handler for form submission that validates and processes the form data.
+     */
+    const _onSubmit = useCallback(() => {
         const { error, errorMsg, payload } = _buildFormData();
         if (error) {
             sheet.current.show(errorMsg, 4, SHEET.Error);
         }
         else if (action) {
+            // If `action` is defined, submit the form data to the specified endpoint
             startTransition(async () => {
                 setLoading(true);
                 sheet.current.hide();
@@ -125,18 +163,21 @@ const Form = forwardRef((props, ref) => {
         else {
             onSubmit && onSubmit(payload);
         }
-    };
-    const _init = () => {
+    }, [action, sheet.current, innerRef.current]);
+    /**
+     * Initializes the form by adding click event listeners to submit buttons.
+     */
+    const _init = useCallback(() => {
         const _submit = _nodes(`[type=submit]`);
         if (!_submit || _submit.length == 0) {
-            console.error(`You should add at least 1 button with type=\`SUBMIT\``);
+            console.warn(`You should add at least 1 button with type=\`SUBMIT\``);
         }
         else {
             _submit.forEach(el => {
                 el.addEventListener(`click`, _onSubmit);
             });
         }
-    };
+    }, [innerRef.current]);
     useImperativeHandle(ref, () => ({
         setLoading(mod) {
             if (mod) {
@@ -152,6 +193,11 @@ const Form = forwardRef((props, ref) => {
         }
     }));
     useEffect(_init, []);
-    return _jsxs(With, { as: as, className: `rel`, ref: _ref, propsToRemove: [`withData`, `action`, `onSubmit`, `onSuccess`, `onError`], ...rest, children: [_jsx(Sheet, { ref: sheet, as: `toast-form` }), loading && _jsx(Cover, { message: cover ? cover.message || undefined : `working`, ...{ spinner, color: cover ? `color` in cover ? cover.color : `#ffffff` : `#ffffff` } }), children] });
+    return _jsxs(Box, { ...{
+            className: `${className} rel --form${name ? `-${name.replace(/\s+/g, `-`)}` : ``}`,
+            style,
+            propsToRemove: [`withData`, `action`, `onSubmit`, `onSuccess`, `onError`],
+            ...rest
+        }, ref: innerRef, children: [_jsx(Sheet, { ref: sheet, as: `toast-form` }), 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/heading.js

@@ -7,4 +7,17 @@ const Heading = forwardRef((props, ref) => {
             props.html ? _jsx("span", { ...({ dangerouslySetInnerHTML: { __html: html } }) }) : props.children
             : null });
 });
+// import { Ref } from "react"
+// import { css, cleanProps } from "../funs";
+// import { UIProps } from "../types/interfaces";
+// const Heading = ( props: UIProps<HTMLHeadingElement> ) => {
+//     const { children, ref, h, html } = props
+//     let Tag : string = `h${h || 1}`;
+//     const HeadingTag = Tag as `h1` | `h2` | `h3` | `h4` | `h5` | `h6`
+//     const { cx } = css.Build(props.as)
+//     return <HeadingTag 
+//         ref={ref} 
+//         className={cx.join(` `)}
+//         {...(cleanProps(props) as UIProps<HTMLHeadingElement>)}>{props.html ? <span { ...({dangerouslySetInnerHTML:{ __html: html }}) as UIProps<HTMLSpanElement>} />  : children}</HeadingTag>
+// }
 export default Heading;

package/dist/comps/icon.d.ts

@@ -1,7 +1,6 @@
-import { animationProps } from "./base";
-declare const Icon: import("react").ForwardRefExoticComponent<{
+import { Props } from "./useBase/base.types";
+export interface IconProps extends Props<`div`> {
     name: string;
-    as?: string;
-    animate?: animationProps;
-} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}
+declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Icon;

package/dist/comps/icon.js

@@ -1,8 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import With from "./base";
+// import With, { Props } from "./base";
+import Box from "./box";
+import useBase from "./useBase";
 const Icon = forwardRef((props, ref) => {
-    const { as, name, ...rest } = props;
-    return _jsx(With, { className: `icon-${name}`, as: as, ...rest, ref: ref });
+    const { name, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
+    return _jsx(Box, { ...{
+            className: `${className} icon-${name}`,
+            style,
+            ...rest
+        } });
+    // return <With 
+    //     className={`icon-${name}`}
+    //     as={as} 
+    //     {...rest} 
+    //     ref={ref} />
 });
 export default Icon;

package/dist/comps/image.d.ts

@@ -1,5 +1,5 @@
-import { animationProps } from "./base";
 import React from "react";
+import { animationProps } from "../types/interfaces";
 interface ImageProps {
     width: string | number;
     height: string | number;

package/dist/comps/input.d.ts

@@ -1,9 +1,3 @@
-import { animationProps } from "./base";
-import { FORMVALIDATION } from "../types/enums";
-declare const Input: import("react").ForwardRefExoticComponent<{
-    required?: FORMVALIDATION;
-    textarea?: any;
-    as?: string;
-    animate?: animationProps;
-} & Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+import { Props } from "./useBase/base.types";
+declare const Input: import("react").ForwardRefExoticComponent<Props<"input"> & import("react").RefAttributes<HTMLInputElement>>;
 export default Input;

package/dist/comps/input.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import With from "./base";
+import { forwardRef, useRef } from "react";
+import useBase from "./useBase";
 const Input = forwardRef((props, ref) => {
-    const { as, textarea, value, ...rest } = props;
-    return textarea ? _jsx(With, { tag: `textarea`, as: as, ...rest, value: value, ref: ref })
-        : _jsx(With, { tag: `input`, as: as, value: value, ...rest, ref: ref });
+    const _innerRef = useRef(null);
+    const { className, style, rest } = useBase(props);
+    return _jsx("input", { className: className, style: style, ref: _innerRef, ...rest });
 });
 export default Input;

package/dist/comps/password.d.ts

@@ -0,0 +1,3 @@
+import { Props } from "./useBase/base.types";
+declare const Password: import("react").ForwardRefExoticComponent<Omit<Props<"input">, "type"> & import("react").RefAttributes<HTMLInputElement>>;
+export default Password;

package/dist/comps/password.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import Input from "./input";
+import Box from "./box";
+import Button from "./button";
+import useBase from "./useBase";
+const Icons = {
+    on: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", children: [_jsx("path", { fill: "#333", d: "M12 20.5c-4.299 0-8.24-3.023-10.544-8.086a1 1 0 010-.828C3.759 6.523 7.701 3.5 12 3.5s8.24 3.023 10.544 8.086a1.001 1.001 0 010 .828 18.14 18.14 0 01-1.391 2.52 1 1 0 11-1.666-1.106A15.87 15.87 0 0020.529 12C18.543 7.92 15.379 5.5 12 5.5S5.457 7.92 3.471 12c1.986 4.08 5.15 6.5 8.529 6.5a7.964 7.964 0 005.036-1.92 1 1 0 111.265 1.55A9.94 9.94 0 0112 20.5z" }), _jsx("path", { fill: "#333", d: "M12 16a4.004 4.004 0 01-3.929-4.756 1 1 0 011.965.375A2 2 0 1014 12a2.034 2.034 0 00-2.053-1.999 1.04 1.04 0 01-1.043-.947.963.963 0 01.902-1.05L12 8a4 4 0 010 8z" })] }),
+    off: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", children: [_jsx("path", { fill: "#333", d: "M12 15c-4.132 0-7.98-1.214-10.294-3.249a1 1 0 111.32-1.502C4.986 11.972 8.34 13 12 13s7.014-1.028 8.974-2.751a1 1 0 111.32 1.502C19.98 13.786 16.132 15 12 15z" }), _jsx("path", { fill: "#333", d: "M12 18a1 1 0 01-1-1v-3a1 1 0 012 0v3a1 1 0 01-1 1zM7.749 17.667a.964.964 0 01-.17-.014 1 1 0 01-.817-1.155l.505-2.935a1 1 0 111.97.339l-.504 2.935a1 1 0 01-.984.83zM3.636 16.306a1.001 1.001 0 01-.942-1.336l.978-2.745a1 1 0 111.884.672l-.978 2.745a1 1 0 01-.942.664zM16.251 17.667a1 1 0 01-.984-.83l-.505-2.935a1 1 0 011.97-.339l.506 2.935a1 1 0 01-.816 1.155.964.964 0 01-.17.014zM20.364 16.306a1 1 0 01-.942-.664l-.978-2.745a1 1 0 111.884-.672l.978 2.745a1.001 1.001 0 01-.942 1.336z" })] })
+};
+const Password = forwardRef((props, ref) => {
+    const [visible, setVisible] = useState(false);
+    const { animate, ...pops } = props;
+    const { style } = useBase(props);
+    if (`type` in props) {
+        delete props[`type`];
+    }
+    return _jsxs(Box, { style: style, ...{
+            className: `--password flex aic rel`
+        }, children: [_jsx(Input, { ...{
+                    ref,
+                    type: visible ? 'text' : 'password',
+                    ...pops
+                } }), _jsx(Button, { ...{
+                    tabIndex: -1,
+                    onClick: e => setVisible(prev => !prev),
+                    className: `--toggle flex aic jcc abs`
+                }, children: visible ? Icons.on : Icons.off })] });
+});
+export default Password;

package/dist/comps/select.d.ts

@@ -1,6 +1,6 @@
-import { animationProps } from "./base";
 import { FORMVALIDATION } from "../types/enums";
 import { dynamicObject } from "../types";
+import { animationProps } from "../types/interfaces";
 export interface SelectProps {
     as?: string;
     name?: string;
@@ -9,6 +9,7 @@ export interface SelectProps {
     options: dynamicObject[];
     label?: string;
     defaultValue?: string | dynamicObject;
+    search?: boolean;
     onChange?: (v: string | dynamicObject) => void;
 }
 export interface SelectHandler {

package/dist/comps/select.js

@@ -5,11 +5,13 @@ 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 { as, options, name, label, defaultValue, search: withSearch, onChange, ...rest } = props;
     const _ref = useRef(null);
+    const _search = useRef(null);
     const _id = useMemo(() => name || uuid(), []);
     const [choosing, setChoosing] = useState(false);
     const [value, setValue] = useState(defaultValue || options[0]);
+    const [query, setQuery] = useState(null);
     const updateValue = (o) => {
         setValue(o);
         onChange && onChange(o);
@@ -19,13 +21,36 @@ const Select = forwardRef((props, ref) => {
             setChoosing(false);
         });
     }, []);
-    return _jsxs(With, { className: `zuz-select-wrap rel`, children: [_jsxs(With, { "data-value": value ? `string` == typeof value ? value : value.value : value || `-1`, name: name, tag: `button`, as: as, className: `zuz-select rel flex aic --select`, ref: _ref, onClick: (e) => setChoosing(true), ...rest, children: [_jsx(With, { tag: `h2`, className: `zuz-selected`, children: value ? `string` == typeof value ? value : value.label : label || `Choose` }), chevronExpand()] }), _jsx(With, { id: _id, className: `zuz-select-options abs flex cols`, style: {
+    useEffect(() => {
+        if (choosing) {
+            _search.current && _search.current.focus();
+        }
+        else {
+            if (_search.current) {
+                _search.current.value = ``;
+            }
+            setQuery(null);
+        }
+    }, [choosing]);
+    return _jsxs(With, { className: `zuz-select-wrap rel`, children: [_jsxs(With, { "data-value": value ? `string` == typeof value ? value : value.value : value || `-1`, name: name, tag: `button`, as: as, className: `zuz-select rel flex aic --select`, ref: _ref, onClick: (e) => setChoosing(true), ...rest, children: [_jsx(With, { tag: `h2`, className: `zuz-selected`, children: value ? `string` == typeof value ? value : value.label : label || `Choose` }), chevronExpand()] }), _jsxs(With
+            // popover="true"
+            , { 
+                // popover="true"
+                id: _id, className: `zuz-select-options abs flex cols`, style: {
                     pointerEvents: choosing ? `auto` : `none`,
                 }, animate: {
                     from: { y: 5, opacity: 0 },
                     to: { y: 0, opacity: 1 },
                     when: choosing,
+                    // curve: `spring`,
                     duration: .05
-                }, 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}`)) })] });
+                }, children: [withSearch && _jsx(With, { ref: _search, onChange: (e) => {
+                            setQuery(e.target.value == `` ? null : e.target.value);
+                        }, tag: `input`, placeholder: `Search`, className: `--select-search` }), (query == null ? options : options.filter((o) => {
+                        return `string` == typeof o ?
+                            o.toLowerCase().includes(query.toLowerCase())
+                            : o.label.toLowerCase().includes(query.toLowerCase()) || o.value.toLowerCase().includes(query.toLowerCase());
+                    }))
+                        .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.js

@@ -11,6 +11,7 @@ let _sheetTimeout = null;
 let _sheetWobbleTimeout = null;
 const Sheet = forwardRef((props, ref) => {
     const { as, transition, curve, speed, editor, type, actionPosition, ...rest } = props;
+    // const _editor = useComponentEditor()
     const sheetID = useMemo(() => uuid(), []);
     const [visible, setVisible] = useState(false);
     const [title, setTitle] = useState(``);
@@ -22,6 +23,7 @@ const Sheet = forwardRef((props, ref) => {
     const _render = useRef(null);
     const divRef = useRef(null);
     const lastTransform = useRef(null);
+    // const dialogContent = useMemo(() => msg, [msg])
     useImperativeHandle(ref, () => ({
         setLoading(mode) {
             setLoading(mode);
@@ -68,6 +70,7 @@ const Sheet = forwardRef((props, ref) => {
                 if (_sheetWobbleTimeout) {
                     clearTimeout(_sheetWobbleTimeout);
                 }
+                // if ( lastTransform ) divRef.current!.style.transform = _lastTransform
                 lastTransform.current = divRef.current.style.transform;
                 divRef.current.style.transform = ``;
                 divRef.current.classList.remove(`wobble`);

package/dist/comps/spinner.d.ts

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

package/dist/comps/spinner.js

@@ -6,6 +6,7 @@ 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 = color && color.startsWith(`var`) ? color : hexToRgba(color || defaultColor);
         const bg = color && color.startsWith(`var`) ? color : hexToRgba(color || defaultColor, .3);

package/dist/comps/tabview.js

@@ -22,20 +22,27 @@ const TabView = forwardRef((props, ref) => {
         setActiveTab(index);
     };
     useEffect(() => {
+        // console.log(`TabRenderCount`)
         onChange && onChange(tabs[0], 0);
     }, []);
+    // useEffect(() => {
+    //     console.log(tabs)
+    // }, [tabs])
     return _jsxs(_Fragment, { children: [_jsxs(With, { ref: tabview, className: `tabview flex cols`, ...rest, children: [_jsx(With, { className: `tab-head flex aic`, children: tabs.map((tab, index) => _jsx(With, { tag: `button`, className: `tab-label rel ${index === activeTab ? 'active' : ''}`.trim(), onClick: () => {
                                 handleTabClick(index);
                                 tab.onSelect && tab.onSelect(tab, index);
                                 onChange && onChange(tab, index);
                             }, children: tab.label }, `tab-${tabViewID}-${tab.key}`)) }), _jsx(With, { className: `tab-content rel`, children: _jsx(With, { className: `tabs-track flex aic`, style: { transition: `all ${speed || 0.3}s ease-in-out 0s`, transform: `translate(-${activeTab * size.width}px, 0)` }, children: tabs.map((tab, index) => {
-                                return _jsx(With, { className: `tab-body rel`, style: {
+                                return _jsx(With
+                                // ref={tabBodyRef}
+                                , { className: `tab-body rel`, style: {
                                         width: size.width,
                                         minWidth: size.width,
                                         maxWidth: size.width,
                                         opacity: index === activeTab ? 1 : 0,
                                         transition: 'opacity 0.5s ease',
                                     }, children: (render || activeTab == index) && tab.body }, `tab-body-${tabViewID}-${tab.key}`);
+                                // onClick={() => tab.onSelect(index)}
                             }) }) })] }), props.editor && _jsx(ComponentEditor, { element: `.tabview`, title: `TabView`, attrs: {
                     "@group-Head": {
                         label: "Head",

package/dist/comps/textwheel.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { animationProps } from "./base";
+import { animationProps } from '../types/interfaces';
 export interface WheelProps {
     as?: string;
     direction?: `up` | `down`;

package/dist/comps/textwheel.js

@@ -8,6 +8,7 @@ const TextWheel = forwardRef((props, ref) => {
     const [_value, _setValue] = useState(value || 0);
     useImperativeHandle(ref, () => ({
         updateValue(v) {
+            // console.log(_value != v, _value.toString().length != v.toString().length)
             if (_value.toString().length != v.toString().length) {
                 _setValue(v);
             }
@@ -30,6 +31,7 @@ const TextWheel = forwardRef((props, ref) => {
         }
     }));
     useEffect(() => {
+        // console.log(value)
         _setValue(value || 0);
     }, [value]);
     return _jsxs(With, { className: `text-wheel flex aic jcc rel`, "aria-hidden": true, as: as, ref: divRef, ...rest, children: [(_value || 0).toString().split('').map((char, index) => {

package/dist/comps/useBase/base.types.d.ts

@@ -0,0 +1,64 @@
+import { ElementType, HTMLAttributes } from "react";
+import { dynamicObject } from "../../types";
+import { SHIMMER, SKELETON, TRANSITION_CURVES, TRANSITIONS } from "../../types/enums";
+/**
+ * `animationProps` defines the properties to control animation effects
+ * applied to elements. Supports transitions with timing configurations.
+ */
+export interface animationProps {
+    /**
+     * Specifies the type of transition to apply, based on predefined
+     * {@link TRANSITIONS}
+     */
+    transition?: TRANSITIONS;
+    /** Starting style properties for the animation */
+    from?: dynamicObject;
+    /** Target style properties after the animation completes */
+    to?: dynamicObject;
+    /** Condition that determines when the animation should trigger */
+    when?: boolean;
+    /** Duration of the animation in milliseconds */
+    duration?: number;
+    /** Delay before the animation starts, in milliseconds */
+    delay?: number;
+    /** Easing curve applied to the animation, as a string or {@link TRANSITION_CURVES} */
+    curve?: string | TRANSITION_CURVES;
+}
+/**
+ * `Skeleton` defines properties for a skeleton loader, used to indicate
+ * loading states with placeholders.
+ */
+export interface Skeleton {
+    /** Enables or disables the skeleton placeholder */
+    enabled: boolean;
+    /** Specifies the skeleton type, based on predefined {@link SKELETON} options */
+    type?: SKELETON;
+    /** General size of the skeleton, or can specify width/height separately */
+    size?: number | string;
+    /** Width of the skeleton placeholder */
+    width?: number | string;
+    /** Height of the skeleton placeholder */
+    height?: number | string;
+    /** Border radius for the skeleton, allowing rounded corners */
+    radius?: number | string;
+}
+/**
+ * `Props` defines the primary properties for components, extending standard
+ * HTML attributes with additional options for animations, skeletons, and tags.
+ */
+export interface Props<T extends ElementType> extends HTMLAttributes<T> {
+    /** Defines the React element or HTML tag to render */
+    tag?: T;
+    /** CSS Styles, such as "w:100" for "width: 100px"; */
+    as?: string | string[];
+    /** Animation configuration using {@link animationProps} */
+    animate?: animationProps;
+    /** Skeleton placeholder configuration using {@link Skeleton} */
+    skeleton?: Skeleton;
+    /** Additional class names for styling the component */
+    className?: string;
+    /** Shimmer effect for loading state, using predefined {@link SHIMMER} options */
+    shimmer?: SHIMMER;
+    /** Props to remove after processing so it won't appear in DOM */
+    propsToRemove?: string[];
+}

package/dist/comps/useBase/base.types.js

@@ -0,0 +1 @@
+export {};

package/dist/comps/useBase/index.d.ts

@@ -0,0 +1,10 @@
+import { ElementType } from "react";
+import { Props } from "./base.types";
+export declare const useBase: <T extends ElementType>(props?: Props<T>) => {
+    style: {
+        [x: string]: any;
+    };
+    className: string;
+    rest: Omit<Props<T>, keyof Props<T>>;
+};
+export default useBase;

package/dist/comps/useBase/index.js

@@ -0,0 +1,62 @@
+import { cleanProps, css } from "../../funs";
+import { buildWithStyles, getAnimationCurve, getAnimationTransition } from "../../funs/css";
+const buildSkeletonStyle = (s) => {
+    const makeValue = (v, unit = `px`) => {
+        return v ?
+            `string` == typeof v ? v : `${v}${unit}`
+            : `inherit`;
+    };
+    const style = {};
+    if (s.radius) {
+        style.borderRadius = makeValue(s.radius);
+    }
+    if (s.size) {
+        style.width = style.minWidth = style.maxWidth = style.height = style.minHeight = style.maxHeight = makeValue(s.size);
+    }
+    else if (s.width || s.height) {
+        if (s.width) {
+            style.width = style.minWidth = style.maxWidth = makeValue(s.width);
+        }
+        if (s.height) {
+            style.height = style.minHeight = style.maxHeight = makeValue(s.height);
+        }
+    }
+    else {
+        style.minWidth = style.minHeight = `100%`;
+    }
+    return style;
+};
+export const useBase = (props) => {
+    const { as, animate, skeleton, className, shimmer, propsToRemove, ...rest } = props || {};
+    let cx = [];
+    if (as) {
+        cx = css().Build(`string` == typeof as ? as : as.join(` `)).cx;
+    }
+    const { transition, from, to, when, duration, delay, curve } = animate || {};
+    let _style = {};
+    const _transition = transition || (from && to) ? { transition: `all ${duration || `0.2`}s ${getAnimationCurve(curve)} ${delay || 0}s` } : {};
+    if (undefined === when) {
+        _style = transition ? getAnimationTransition(transition, true) : { ...from, ...to };
+    }
+    else if (true === when) {
+        _style = transition ? getAnimationTransition(transition, false) : { ...(to || {}) };
+    }
+    else {
+        _style = transition ? getAnimationTransition(transition, false, true) : from || {};
+    }
+    return {
+        style: {
+            ...buildWithStyles(_style),
+            ..._transition,
+            ...(skeleton?.enabled ? buildSkeletonStyle(skeleton) : {})
+        },
+        className: [
+            className,
+            ...cx,
+            skeleton?.enabled ? `--skeleton` : ``,
+            shimmer ? `--shimmer --${shimmer.toLowerCase()}` : ``,
+        ].join(' ').trim(),
+        rest: cleanProps(rest, propsToRemove ? [...propsToRemove, `skeleton`] : [`skeleton`])
+    };
+};
+export default useBase;

package/dist/funs/colors.d.ts

@@ -1 +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

@@ -1,3 +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

@@ -24,6 +24,7 @@ declare class CSS {
     _cli: boolean;
     DIRECT_VALUES: string[];
     PROPS_VALUES: string[];
+    _currentFile: string;
     constructor(options?: dynamicObject | undefined);
     buildMediaQueries(queries: dynamicObject): string;
     styleSheet(cache: dynamicObject, pseudo?: string): string;
@@ -31,12 +32,13 @@ declare class CSS {
     cleanKey(key: string): string;
     deepClean(cache: dynamicObject, level?: number): dynamicObject;
     makeUnit(k: string, v: any): any;
+    makeColor(v: string): string;
     makeValue(k: string, v: any): string;
     calcIndexes(str: string): string;
     makeID(k: string, v: string, _out: string): string;
     lexer(line: string): dynamicObject;
     processLine(line: string): void;
-    Build(css: string | string[][], cli?: boolean): {
+    Build(css: string | string[][], cli?: boolean, ff?: string): {
         cx: string[];
         sheet: string;
         mediaQuery: dynamicObject;