@xanui/ui 1.1.1 → 1.1.4

package/Layer/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Layer/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport Portal, { PortalProps } from \"../Portal\";\nimport { useMemo } from \"react\"\nimport { alpha } from \"@xanui/core\";\nimport Renderar from '../ThemeProvider/RenderRoot';\n\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode: LayerProps[\"blurMode\"]) => {\n    return useMemo(() => {\n        let transparent = { bgcolor: alpha(\"#000000\", blur / 100) }\n        if (typeof window === 'undefined' || mode === 'transparent') {\n            return transparent\n        }\n        const d = _d || (_d = window.document.createElement(\"div\").style)\n        return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\n    }, [blur])\n}\n\n\nexport type LayerProps = {\n    open: boolean;\n    children: ReactNode;\n    id?: string;\n    transition?: TransitionProps['variant'];\n    zIndex?: number;\n    blur?: useBreakpointPropsType<number>\n    blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n    onClickOutside?: () => void;\n    onOpen?: Function;\n    onOpened?: Function;\n    onClose?: Function;\n    onClosed?: Function;\n    slotProps?: {\n        root?: Omit<TagProps<\"div\">, \"children\">;\n        transition?: Omit<TransitionProps, \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n        portal?: Omit<PortalProps, \"children\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n    }\n}\n\nconst Layer = ({ children, open, id, ...props }: LayerProps) => {\n    let [{\n        onClickOutside,\n        placement,\n        transition,\n        zIndex,\n        blur,\n        blurMode,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        slotProps\n    }] = useInterface<any>(\"Layer\", props, {})\n    const _p: any = {}\n    if (blur) _p.blur = blur\n    if (blurMode) _p.blurMode = blurMode\n    const p: any = useBreakpointProps(_p)\n\n    blur = p.blur\n    blurMode = p.blurMode\n\n    const [closed, setClosed] = useState(!open)\n    placement = placement || \"bottom-left\"\n    const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n    useEffect(() => {\n        if (closed && open) {\n            setClosed(false)\n        }\n    }, [open])\n\n    if (closed) return <></>\n    let duration = slotProps?.transition?.duration || 300\n    let delay = slotProps?.transition?.delay || 0\n\n    return (\n        <Portal {...slotProps?.portal}>\n            <Transition\n                duration={duration}\n                delay={delay}\n                easing=\"easeOut\"\n                variant={\"fade\"}\n                open={open}\n            >\n                <Tag\n                    baseClass=\"layer\"\n                    {...slotProps?.root}\n                    id={id}\n                    sxr={{\n                        ...slotProps?.root?.sx,\n                        position: \"fixed\",\n                        zIndex: 1500 + (zIndex || 0),\n                        top: 0,\n                        left: 0,\n                        bottom: 0,\n                        right: 0,\n                        ...blurCss\n                    }}\n                    onClick={(e: any) => {\n                        if (!e.currentTarget.firstChild?.contains(e.target)) {\n                            if (onClickOutside) {\n                                onClickOutside()\n                            }\n                        }\n                    }}\n                >\n                    <Transition\n                        duration={duration}\n                        delay={delay}\n                        easing=\"easeOut\"\n                        variant={transition || \"zoomOver\"}\n                        {...slotProps?.transition}\n                        open={open}\n                        onOpen={onOpen}\n                        onOpened={onOpened}\n                        onClose={onClose}\n                        onClosed={() => {\n                            setClosed(true)\n                            onClosed && onClosed()\n                        }}\n                    >\n                        {children}\n                    </Transition>\n                </Tag>\n            </Transition>\n        </Portal>\n    )\n}\n\nexport type LayerHandlerProps = Omit<LayerProps, \"open\" | \"children\">\nconst layers = new Map<string, { id: string, open: boolean; props?: LayerHandlerProps, content: ReactNode }>()\n\nexport const LayerHandler = () => {\n    return Array.from(layers.values()).map((l, key) => {\n        return (\n            <Layer\n                open={l.open}\n                key={\"layer-\" + key}\n                id={l.id}\n                {...l.props}\n                zIndex={layers.size}\n                onClosed={() => {\n                    setTimeout(() => {\n                        layers.delete(l.id)\n                    }, 100);\n                    l?.props?.onClosed && l?.props?.onClosed()\n                }}\n            >{l.content}</Layer>\n        )\n    })\n}\n\n\nRenderar.create(\"LAYERS_RENDER\", LayerHandler)\n\nLayer.open = (id: string, content: ReactNode, props?: LayerHandlerProps) => {\n    if (layers.has(id)) return\n    layers.set(id, { id, props, content, open: true })\n    Renderar.dispatch()\n}\n\nLayer.close = (id: string) => {\n    const get = layers.get(id)\n    if (get) {\n        layers.set(id, { ...get, open: false })\n        Renderar.dispatch()\n    }\n}\n\nexport default Layer"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Layer/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport useBlurCss from '../useBlurCss';\nimport { Renderar } from \"@xanui/core\";\nimport ClickOutside from '../ClickOutside';\n\nexport type LayerProps = {\n    open: boolean;\n    children: ReactNode;\n    transition?: TransitionProps['variant'];\n    zIndex?: number;\n    blur?: useBreakpointPropsType<number>\n    blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n    onClickOutside?: () => void;\n    onOpen?: Function;\n    onOpened?: Function;\n    onClose?: Function;\n    onClosed?: Function;\n    slotProps?: {\n        root?: Omit<TagProps<\"div\">, \"children\">;\n        transition?: Omit<TransitionProps, \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n    }\n}\n\nconst Layer = ({ children, open, ...props }: LayerProps) => {\n    let [{\n        onClickOutside,\n        placement,\n        transition,\n        zIndex,\n        blur,\n        blurMode,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        slotProps\n    }] = useInterface<any>(\"Layer\", props, {})\n\n    const _p: any = {}\n    if (blur) _p.blur = blur\n    if (blurMode) _p.blurMode = blurMode\n    const p: any = useBreakpointProps(_p)\n\n    blur = p.blur\n    blurMode = p.blurMode\n\n    const [closed, setClosed] = useState(!open)\n    placement = placement || \"bottom-left\"\n    const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n    useEffect(() => {\n        if (closed && open) {\n            setClosed(false)\n        }\n    }, [open])\n\n    if (closed) return <></>\n    let duration = slotProps?.transition?.duration || 300\n    let delay = slotProps?.transition?.delay || 0\n\n    return (\n        <Transition\n            duration={duration}\n            delay={delay}\n            easing=\"easeOut\"\n            variant={\"fade\"}\n            open={open}\n        >\n            <Tag\n                baseClass=\"layer\"\n                {...slotProps?.root}\n                sxr={{\n                    ...slotProps?.root?.sx,\n                    position: \"fixed\",\n                    zIndex: 1500 + (zIndex || 0),\n                    top: 0,\n                    left: 0,\n                    bottom: 0,\n                    right: 0,\n                    ...blurCss\n                }}\n            >\n                <ClickOutside\n                    onClickOutside={onClickOutside || (() => { })}\n                >\n                    <Transition\n                        duration={duration}\n                        delay={delay}\n                        easing=\"easeOut\"\n                        variant={transition || \"zoomOver\"}\n                        {...slotProps?.transition}\n                        open={open}\n                        onOpen={onOpen}\n                        onOpened={onOpened}\n                        onClose={onClose}\n                        onClosed={() => {\n                            setClosed(true)\n                            onClosed && onClosed()\n                        }}\n                    >\n                        {children}\n                    </Transition>\n                </ClickOutside>\n            </Tag>\n        </Transition>\n    )\n}\n\n\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\n    const l = Renderar.render(Layer as any, {\n        open: true,\n        ...props,\n        children,\n        onClosed: () => {\n            Renderar.unrender(Layer as any)\n            if (props?.onClosed) {\n                props.onClosed()\n            }\n        }\n    })\n    return {\n        open: () => {\n            l.updateProps({ open: true })\n        },\n        close: () => {\n            l.updateProps({ open: false })\n        },\n    }\n}\nLayer.close = () => {\n    Renderar.unrender(Layer as any)\n}\nexport default Layer"],"names":["_jsx"],"mappings":"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"}

package/Modal/index.d.ts

@@ -1,18 +1,18 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { LayerProps } from '../Layer/index.js';
-import { useBreakpointPropsType, TagProps } from '@xanui/core';
+import { UseModalProps } from '../useModal/index.js';
 
-type ModalProps = Omit<LayerProps, "slotProps"> & {
-    size?: useBreakpointPropsType<"xs" | "sm" | "md" | "lg" | "xl" | "fullWidth" | number>;
-    slotProps?: LayerProps['slotProps'] & {
-        modal?: Omit<TagProps<'div'>, "children">;
-    };
+type ModalProps = UseModalProps & {
+    children: ReactNode;
+    open: boolean;
 };
 declare const Modal: {
-    ({ children, size, slotProps, ...props }: ModalProps): react_jsx_runtime.JSX.Element;
-    open(id: string, content: ReactNode, props?: Omit<ModalProps, "open" | "children">): void;
-    close(id: string): void;
+    ({ children, open, ...props }: ModalProps): react_jsx_runtime.JSX.Element;
+    open(children: ModalProps["children"], props?: Omit<ModalProps, "children">): {
+        open: () => void;
+        close: () => void;
+    };
+    close(): void;
 };
 
 export { Modal as default };

package/Modal/index.js

@@ -1,38 +1,47 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),index=require('../Layer/index.js'),core=require('@xanui/core');const Modal = (_a) => {
-    var { children, size, slotProps } = _a, props = tslib.__rest(_a, ["children", "size", "slotProps"]);
-    const _p = {};
-    if (size)
-        _p.size = size;
-    const p = core.useBreakpointProps(_p);
-    size = p.size;
-    size !== null && size !== void 0 ? size : (size = "xs");
-    let sizes = {
-        xs: 420,
-        sm: 760,
-        md: 990,
-        lg: 1120,
-        xl: 1300,
-        fullWidth: "100%"
-    };
-    let _b = slotProps || {}, { modal } = _b, _slotProps = tslib.__rest(_b, ["modal"]);
-    return (jsxRuntime.jsx(index.default, Object.assign({ transition: "zoom" }, props, { slotProps: Object.assign(Object.assign({}, _slotProps), { root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, _slotProps === null || _slotProps === void 0 ? void 0 : _slotProps.root) }), children: jsxRuntime.jsx(core.Tag, Object.assign({}, modal, { sxr: Object.assign({ maxWidth: sizes[size] || size, width: "100%", radius: 2, bgcolor: "background.primary", shadow: 15 }, modal === null || modal === void 0 ? void 0 : modal.sx), baseClass: 'modal', children: children })) })));
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),index=require('../useModal/index.js'),core=require('@xanui/core');const Modal = (_a) => {
+    var { children, open } = _a, props = tslib.__rest(_a, ["children", "open"]);
+    const ref = React.useRef(null);
+    const modal = index.default(jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }), Object.assign(Object.assign({}, props), { onClickOutside: () => {
+            if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
+                props.onClickOutside();
+            }
+        }, slotProps: {
+            layer: {
+                portal: {
+                    container: (ref === null || ref === void 0 ? void 0 : ref.current) || undefined
+                }
+            }
+        } }));
+    React.useEffect(() => {
+        if (open) {
+            modal.open();
+        }
+        else {
+            modal.close();
+        }
+    }, [open]);
+    return jsxRuntime.jsx(core.Tag, { ref: ref });
+};
+const ActionModal = (_a) => {
+    var { children } = _a, props = tslib.__rest(_a, ["children"]);
+    return (jsxRuntime.jsx(Modal, Object.assign({}, props, { children: children })));
 };
-Modal.open = (id, content, props) => {
-    id = "modal-" + id;
-    let { size, slotProps } = props || {};
-    size !== null && size !== void 0 ? size : (size = "xs");
-    let sizes = {
-        xs: 420,
-        sm: 760,
-        md: 990,
-        lg: 1120,
-        xl: 1300,
-        fullWidth: "100%"
+Modal.open = (children, props) => {
+    const m = core.Renderar.render(ActionModal, Object.assign(Object.assign({ open: true }, props), { children, onClosed: () => {
+            m.unrender();
+            if (props === null || props === void 0 ? void 0 : props.onClosed) {
+                props.onClosed();
+            }
+        } }));
+    return {
+        open: () => {
+            m.updateProps({ open: true });
+        },
+        close: () => {
+            m.updateProps({ open: false });
+        },
     };
-    let _a = slotProps || {}, { modal } = _a, _slotProps = tslib.__rest(_a, ["modal"]);
-    index.default.open(id, jsxRuntime.jsx(core.Tag, Object.assign({}, modal, { sxr: Object.assign({ maxWidth: sizes[size] || size, width: "100%", radius: 2, bgcolor: "background.primary", shadow: 15 }, modal === null || modal === void 0 ? void 0 : modal.sx), baseClass: 'modal', children: content })), Object.assign(Object.assign({ transition: "zoom" }, props), { slotProps: Object.assign(Object.assign({}, _slotProps), { root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, _slotProps === null || _slotProps === void 0 ? void 0 : _slotProps.root) }) }));
 };
-Modal.close = (id) => {
-    id = "modal-" + id;
-    index.default.close(id);
+Modal.close = () => {
+    core.Renderar.unrender(ActionModal);
 };exports.default=Modal;//# sourceMappingURL=index.js.map

package/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Modal/index.tsx"],"sourcesContent":["\nimport { ReactNode } from 'react'\nimport Layer, { LayerProps } from \"../Layer\"\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\n\n\n\nexport type ModalProps = Omit<LayerProps, \"slotProps\"> & {\n    size?: useBreakpointPropsType<\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"fullWidth\" | number>;\n    slotProps?: LayerProps['slotProps'] & {\n        modal?: Omit<TagProps<'div'>, \"children\">\n    }\n}\n\n\nconst Modal = ({ children, size, slotProps, ...props }: ModalProps) => {\n    const _p: any = {}\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n    size = p.size\n    size ??= \"xs\"\n    let sizes: any = {\n        xs: 420,\n        sm: 760,\n        md: 990,\n        lg: 1120,\n        xl: 1300,\n        fullWidth: \"100%\"\n    }\n\n    let { modal, ..._slotProps }: any = slotProps || {}\n\n    return (\n        <Layer\n            transition=\"zoom\"\n            {...props}\n            slotProps={{\n                ..._slotProps,\n                root: {\n                    display: \"flex\",\n                    alignItems: 'center',\n                    justifyContent: \"center\",\n                    ..._slotProps?.root,\n                }\n            }}\n        >\n            <Tag\n                {...modal}\n                sxr={{\n                    maxWidth: sizes[size as any] || size,\n                    width: \"100%\",\n                    radius: 2,\n                    bgcolor: \"background.primary\",\n                    shadow: 15,\n                    ...modal?.sx\n                }}\n                baseClass='modal'\n            >\n                {children}\n            </Tag>\n        </Layer>\n    )\n}\n\n\nModal.open = (id: string, content: ReactNode, props?: Omit<ModalProps, \"open\" | \"children\">) => {\n    id = \"modal-\" + id\n    let { size, slotProps } = props || {}\n    size ??= \"xs\"\n    let sizes: any = {\n        xs: 420,\n        sm: 760,\n        md: 990,\n        lg: 1120,\n        xl: 1300,\n        fullWidth: \"100%\"\n    }\n    let { modal, ..._slotProps }: any = slotProps || {}\n\n    Layer.open(id, <Tag\n        {...modal}\n        sxr={{\n            maxWidth: sizes[size as any] || size,\n            width: \"100%\",\n            radius: 2,\n            bgcolor: \"background.primary\",\n            shadow: 15,\n            ...modal?.sx\n        }}\n        baseClass='modal'\n    >\n        {content}\n    </Tag>, {\n        transition: \"zoom\",\n        ...props,\n        slotProps: {\n            ..._slotProps,\n            root: {\n                display: \"flex\",\n                alignItems: 'center',\n                justifyContent: \"center\",\n                ..._slotProps?.root,\n            }\n        }\n    })\n}\n\nModal.close = (id: string) => {\n    id = \"modal-\" + id\n    Layer.close(id)\n}\n\nexport default Modal"],"names":["__rest","useBreakpointProps","_jsx","Layer","Tag"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Modal/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef } from \"react\";\nimport useModal, { UseModalProps } from \"../useModal\";\nimport { Renderar, Tag } from \"@xanui/core\";\n\nexport type ModalProps = UseModalProps & {\n   children: ReactNode;\n   open: boolean;\n}\n\nconst Modal = ({ children, open, ...props }: ModalProps) => {\n   const ref = useRef<HTMLDivElement>(null);\n\n   const modal = useModal(<>{children}</>, {\n      ...props,\n      onClickOutside: () => {\n         if (props?.onClickOutside) {\n            props.onClickOutside()\n         }\n      },\n      slotProps: {\n         layer: {\n            portal: {\n               container: ref?.current || undefined\n            }\n         }\n      }\n   })\n\n   useEffect(() => {\n      if (open) {\n         modal.open()\n      } else {\n         modal.close()\n      }\n   }, [open])\n   return <Tag ref={ref}></Tag>\n}\n\nconst ActionModal = ({ children, ...props }: ModalProps) => {\n   return (\n      <Modal {...props}>\n         {children}\n      </Modal>\n   )\n}\n\nModal.open = (children: ModalProps['children'], props?: Omit<ModalProps, 'children'>) => {\n   const m = Renderar.render(ActionModal as any, {\n      open: true,\n      ...props,\n      children,\n      onClosed: () => {\n         m.unrender()\n         if (props?.onClosed) {\n            props.onClosed()\n         }\n      }\n   })\n\n   return {\n      open: () => {\n         m.updateProps({ open: true })\n      },\n      close: () => {\n         m.updateProps({ open: false })\n      },\n   }\n};\n\nModal.close = () => {\n   Renderar.unrender(ActionModal as any)\n}\n\nexport default Modal;"],"names":["__rest","useRef","useModal","_jsx","_Fragment","useEffect","Tag","Renderar"],"mappings":"kOASA,MAAM,KAAK,GAAG,CAAC,EAAwC,KAAI;QAA5C,EAAE,QAAQ,EAAE,IAAI,EAAA,GAAA,EAAwB,EAAnB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA1B,oBAA4B,CAAF;AACtC,IAAA,MAAM,GAAG,GAAGC,YAAM,CAAiB,IAAI,CAAC;AAExC,IAAA,MAAM,KAAK,GAAGC,aAAQ,CAACC,cAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAI,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAChC,KAAK,CAAA,EAAA,EACR,cAAc,EAAE,MAAK;YAClB,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,cAAc,EAAE;gBACxB,KAAK,CAAC,cAAc,EAAE;YACzB;QACH,CAAC,EACD,SAAS,EAAE;AACR,YAAA,KAAK,EAAE;AACJ,gBAAA,MAAM,EAAE;oBACL,SAAS,EAAE,CAAA,GAAG,KAAA,IAAA,IAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,KAAI;AAC7B;AACH;AACH,SAAA,EAAA,CAAA,CACF;IAEFC,eAAS,CAAC,MAAK;QACZ,IAAI,IAAI,EAAE;YACP,KAAK,CAAC,IAAI,EAAE;QACf;aAAO;YACJ,KAAK,CAAC,KAAK,EAAE;QAChB;AACH,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AACV,IAAA,OAAOF,eAACG,QAAG,EAAA,EAAC,GAAG,EAAE,GAAG,GAAQ;AAC/B;AAEA,MAAM,WAAW,GAAG,CAAC,EAAkC,KAAI;AAAtC,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAwB,EAAnB,KAAK,GAAAN,YAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;IACtC,QACGG,eAAC,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,KAAK,EAAA,EAAA,QAAA,EACZ,QAAQ,EAAA,CAAA,CACJ;AAEd,CAAC;AAED,KAAK,CAAC,IAAI,GAAG,CAAC,QAAgC,EAAE,KAAoC,KAAI;AACrF,IAAA,MAAM,CAAC,GAAGI,aAAQ,CAAC,MAAM,CAAC,WAAkB,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EACzC,IAAI,EAAE,IAAI,EAAA,EACP,KAAK,CAAA,EAAA,EACR,QAAQ,EACR,QAAQ,EAAE,MAAK;YACZ,CAAC,CAAC,QAAQ,EAAE;YACZ,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,QAAQ,EAAE;gBAClB,KAAK,CAAC,QAAQ,EAAE;YACnB;AACH,QAAA,CAAC,IACF;IAEF,OAAO;QACJ,IAAI,EAAE,MAAK;YACR,CAAC,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QAChC,CAAC;QACD,KAAK,EAAE,MAAK;YACT,CAAC,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;QACjC,CAAC;KACH;AACJ,CAAC;AAED,KAAK,CAAC,KAAK,GAAG,MAAK;AAChB,IAAAA,aAAQ,CAAC,QAAQ,CAAC,WAAkB,CAAC;AACxC,CAAC"}

package/Modal/index.mjs

@@ -1,38 +1,47 @@
-import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import Layer from'../Layer/index.mjs';import {useBreakpointProps,Tag}from'@xanui/core';const Modal = (_a) => {
-    var { children, size, slotProps } = _a, props = __rest(_a, ["children", "size", "slotProps"]);
-    const _p = {};
-    if (size)
-        _p.size = size;
-    const p = useBreakpointProps(_p);
-    size = p.size;
-    size !== null && size !== void 0 ? size : (size = "xs");
-    let sizes = {
-        xs: 420,
-        sm: 760,
-        md: 990,
-        lg: 1120,
-        xl: 1300,
-        fullWidth: "100%"
-    };
-    let _b = slotProps || {}, { modal } = _b, _slotProps = __rest(_b, ["modal"]);
-    return (jsx(Layer, Object.assign({ transition: "zoom" }, props, { slotProps: Object.assign(Object.assign({}, _slotProps), { root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, _slotProps === null || _slotProps === void 0 ? void 0 : _slotProps.root) }), children: jsx(Tag, Object.assign({}, modal, { sxr: Object.assign({ maxWidth: sizes[size] || size, width: "100%", radius: 2, bgcolor: "background.primary", shadow: 15 }, modal === null || modal === void 0 ? void 0 : modal.sx), baseClass: 'modal', children: children })) })));
+import {__rest}from'tslib';import {jsx,Fragment}from'react/jsx-runtime';import {useRef,useEffect}from'react';import useModal from'../useModal/index.mjs';import {Tag,Renderar}from'@xanui/core';const Modal = (_a) => {
+    var { children, open } = _a, props = __rest(_a, ["children", "open"]);
+    const ref = useRef(null);
+    const modal = useModal(jsx(Fragment, { children: children }), Object.assign(Object.assign({}, props), { onClickOutside: () => {
+            if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
+                props.onClickOutside();
+            }
+        }, slotProps: {
+            layer: {
+                portal: {
+                    container: (ref === null || ref === void 0 ? void 0 : ref.current) || undefined
+                }
+            }
+        } }));
+    useEffect(() => {
+        if (open) {
+            modal.open();
+        }
+        else {
+            modal.close();
+        }
+    }, [open]);
+    return jsx(Tag, { ref: ref });
+};
+const ActionModal = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (jsx(Modal, Object.assign({}, props, { children: children })));
 };
-Modal.open = (id, content, props) => {
-    id = "modal-" + id;
-    let { size, slotProps } = props || {};
-    size !== null && size !== void 0 ? size : (size = "xs");
-    let sizes = {
-        xs: 420,
-        sm: 760,
-        md: 990,
-        lg: 1120,
-        xl: 1300,
-        fullWidth: "100%"
+Modal.open = (children, props) => {
+    const m = Renderar.render(ActionModal, Object.assign(Object.assign({ open: true }, props), { children, onClosed: () => {
+            m.unrender();
+            if (props === null || props === void 0 ? void 0 : props.onClosed) {
+                props.onClosed();
+            }
+        } }));
+    return {
+        open: () => {
+            m.updateProps({ open: true });
+        },
+        close: () => {
+            m.updateProps({ open: false });
+        },
     };
-    let _a = slotProps || {}, { modal } = _a, _slotProps = __rest(_a, ["modal"]);
-    Layer.open(id, jsx(Tag, Object.assign({}, modal, { sxr: Object.assign({ maxWidth: sizes[size] || size, width: "100%", radius: 2, bgcolor: "background.primary", shadow: 15 }, modal === null || modal === void 0 ? void 0 : modal.sx), baseClass: 'modal', children: content })), Object.assign(Object.assign({ transition: "zoom" }, props), { slotProps: Object.assign(Object.assign({}, _slotProps), { root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, _slotProps === null || _slotProps === void 0 ? void 0 : _slotProps.root) }) }));
 };
-Modal.close = (id) => {
-    id = "modal-" + id;
-    Layer.close(id);
+Modal.close = () => {
+    Renderar.unrender(ActionModal);
 };export{Modal as default};//# sourceMappingURL=index.mjs.map

package/Modal/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Modal/index.tsx"],"sourcesContent":["\nimport { ReactNode } from 'react'\nimport Layer, { LayerProps } from \"../Layer\"\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\n\n\n\nexport type ModalProps = Omit<LayerProps, \"slotProps\"> & {\n    size?: useBreakpointPropsType<\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"fullWidth\" | number>;\n    slotProps?: LayerProps['slotProps'] & {\n        modal?: Omit<TagProps<'div'>, \"children\">\n    }\n}\n\n\nconst Modal = ({ children, size, slotProps, ...props }: ModalProps) => {\n    const _p: any = {}\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n    size = p.size\n    size ??= \"xs\"\n    let sizes: any = {\n        xs: 420,\n        sm: 760,\n        md: 990,\n        lg: 1120,\n        xl: 1300,\n        fullWidth: \"100%\"\n    }\n\n    let { modal, ..._slotProps }: any = slotProps || {}\n\n    return (\n        <Layer\n            transition=\"zoom\"\n            {...props}\n            slotProps={{\n                ..._slotProps,\n                root: {\n                    display: \"flex\",\n                    alignItems: 'center',\n                    justifyContent: \"center\",\n                    ..._slotProps?.root,\n                }\n            }}\n        >\n            <Tag\n                {...modal}\n                sxr={{\n                    maxWidth: sizes[size as any] || size,\n                    width: \"100%\",\n                    radius: 2,\n                    bgcolor: \"background.primary\",\n                    shadow: 15,\n                    ...modal?.sx\n                }}\n                baseClass='modal'\n            >\n                {children}\n            </Tag>\n        </Layer>\n    )\n}\n\n\nModal.open = (id: string, content: ReactNode, props?: Omit<ModalProps, \"open\" | \"children\">) => {\n    id = \"modal-\" + id\n    let { size, slotProps } = props || {}\n    size ??= \"xs\"\n    let sizes: any = {\n        xs: 420,\n        sm: 760,\n        md: 990,\n        lg: 1120,\n        xl: 1300,\n        fullWidth: \"100%\"\n    }\n    let { modal, ..._slotProps }: any = slotProps || {}\n\n    Layer.open(id, <Tag\n        {...modal}\n        sxr={{\n            maxWidth: sizes[size as any] || size,\n            width: \"100%\",\n            radius: 2,\n            bgcolor: \"background.primary\",\n            shadow: 15,\n            ...modal?.sx\n        }}\n        baseClass='modal'\n    >\n        {content}\n    </Tag>, {\n        transition: \"zoom\",\n        ...props,\n        slotProps: {\n            ..._slotProps,\n            root: {\n                display: \"flex\",\n                alignItems: 'center',\n                justifyContent: \"center\",\n                ..._slotProps?.root,\n            }\n        }\n    })\n}\n\nModal.close = (id: string) => {\n    id = \"modal-\" + id\n    Layer.close(id)\n}\n\nexport default Modal"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Modal/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef } from \"react\";\nimport useModal, { UseModalProps } from \"../useModal\";\nimport { Renderar, Tag } from \"@xanui/core\";\n\nexport type ModalProps = UseModalProps & {\n   children: ReactNode;\n   open: boolean;\n}\n\nconst Modal = ({ children, open, ...props }: ModalProps) => {\n   const ref = useRef<HTMLDivElement>(null);\n\n   const modal = useModal(<>{children}</>, {\n      ...props,\n      onClickOutside: () => {\n         if (props?.onClickOutside) {\n            props.onClickOutside()\n         }\n      },\n      slotProps: {\n         layer: {\n            portal: {\n               container: ref?.current || undefined\n            }\n         }\n      }\n   })\n\n   useEffect(() => {\n      if (open) {\n         modal.open()\n      } else {\n         modal.close()\n      }\n   }, [open])\n   return <Tag ref={ref}></Tag>\n}\n\nconst ActionModal = ({ children, ...props }: ModalProps) => {\n   return (\n      <Modal {...props}>\n         {children}\n      </Modal>\n   )\n}\n\nModal.open = (children: ModalProps['children'], props?: Omit<ModalProps, 'children'>) => {\n   const m = Renderar.render(ActionModal as any, {\n      open: true,\n      ...props,\n      children,\n      onClosed: () => {\n         m.unrender()\n         if (props?.onClosed) {\n            props.onClosed()\n         }\n      }\n   })\n\n   return {\n      open: () => {\n         m.updateProps({ open: true })\n      },\n      close: () => {\n         m.updateProps({ open: false })\n      },\n   }\n};\n\nModal.close = () => {\n   Renderar.unrender(ActionModal as any)\n}\n\nexport default Modal;"],"names":["_jsx","_Fragment"],"mappings":"gMASA,MAAM,KAAK,GAAG,CAAC,EAAwC,KAAI;QAA5C,EAAE,QAAQ,EAAE,IAAI,EAAA,GAAA,EAAwB,EAAnB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA1B,oBAA4B,CAAF;AACtC,IAAA,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC;AAExC,IAAA,MAAM,KAAK,GAAG,QAAQ,CAACA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAI,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAChC,KAAK,CAAA,EAAA,EACR,cAAc,EAAE,MAAK;YAClB,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,cAAc,EAAE;gBACxB,KAAK,CAAC,cAAc,EAAE;YACzB;QACH,CAAC,EACD,SAAS,EAAE;AACR,YAAA,KAAK,EAAE;AACJ,gBAAA,MAAM,EAAE;oBACL,SAAS,EAAE,CAAA,GAAG,KAAA,IAAA,IAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,KAAI;AAC7B;AACH;AACH,SAAA,EAAA,CAAA,CACF;IAEF,SAAS,CAAC,MAAK;QACZ,IAAI,IAAI,EAAE;YACP,KAAK,CAAC,IAAI,EAAE;QACf;aAAO;YACJ,KAAK,CAAC,KAAK,EAAE;QAChB;AACH,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AACV,IAAA,OAAOD,IAAC,GAAG,EAAA,EAAC,GAAG,EAAE,GAAG,GAAQ;AAC/B;AAEA,MAAM,WAAW,GAAG,CAAC,EAAkC,KAAI;AAAtC,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAwB,EAAnB,KAAK,GAAA,MAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;IACtC,QACGA,IAAC,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,KAAK,EAAA,EAAA,QAAA,EACZ,QAAQ,EAAA,CAAA,CACJ;AAEd,CAAC;AAED,KAAK,CAAC,IAAI,GAAG,CAAC,QAAgC,EAAE,KAAoC,KAAI;AACrF,IAAA,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,WAAkB,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EACzC,IAAI,EAAE,IAAI,EAAA,EACP,KAAK,CAAA,EAAA,EACR,QAAQ,EACR,QAAQ,EAAE,MAAK;YACZ,CAAC,CAAC,QAAQ,EAAE;YACZ,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,QAAQ,EAAE;gBAClB,KAAK,CAAC,QAAQ,EAAE;YACnB;AACH,QAAA,CAAC,IACF;IAEF,OAAO;QACJ,IAAI,EAAE,MAAK;YACR,CAAC,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QAChC,CAAC;QACD,KAAK,EAAE,MAAK;YACT,CAAC,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;QACjC,CAAC;KACH;AACJ,CAAC;AAED,KAAK,CAAC,KAAK,GAAG,MAAK;AAChB,IAAA,QAAQ,CAAC,QAAQ,CAAC,WAAkB,CAAC;AACxC,CAAC"}

package/Scrollbar/index.d.ts

@@ -2,7 +2,7 @@ import { TagComponentType, TagProps, useBreakpointPropsType } from '@xanui/core'
 import React, { ReactNode, UIEvent } from 'react';
 
 type ScrollbarProps<T extends TagComponentType = "div"> = TagProps<T> & {
-    children: ReactNode;
+    children?: ReactNode;
     thumbSize?: useBreakpointPropsType<number>;
     thumbColor?: useBreakpointPropsType<string>;
     trackColor?: useBreakpointPropsType<string>;

package/Scrollbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\nimport { Tag, TagComponentType, TagProps, useBreakpointProps, useInterface, useBreakpointPropsType, useScrollbar, useTheme } from '@xanui/core';\n\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\n\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    children: ReactNode;\n    thumbSize?: useBreakpointPropsType<number>;\n    thumbColor?: useBreakpointPropsType<string>;\n    trackColor?: useBreakpointPropsType<string>;\n    onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\n}\n\nexport type ScrollbarHandle = {\n    scrollTo: (pos: number) => void;\n    scrollToBottom: () => void;\n    scrollToTop: () => void;\n};\n\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\n    let [{ thumbSize, thumbColor, trackColor, onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\n    const _p: any = {}\n    if (thumbSize) _p.thumbSize = thumbSize\n    if (thumbColor) _p.thumbColor = thumbColor\n    if (trackColor) _p.trackColor = trackColor\n    const p: any = useBreakpointProps(_p)\n    const theme = useTheme()\n    const sclass = useScrollbar({\n        themeName: theme.name,\n        thumbSize: p.thumbSize,\n        thumbColor: p.thumbColor,\n        trackColor: p.trackColor,\n    })\n    props.className = props.className ? `${props.className} ${sclass}` : sclass\n    const innerRef = useRef<HTMLDivElement>(null);\n\n\n    useImperativeHandle(ref, () => ({\n        scrollTo(pos: number) {\n            innerRef.current?.scrollTo({\n                top: pos,\n                behavior: \"smooth\"\n            });\n        },\n        scrollToBottom() {\n            if (!innerRef.current) return;\n            const ele = innerRef.current;\n            ele.scrollTo({\n                top: ele.scrollHeight,\n                behavior: \"smooth\"\n            });\n        },\n        scrollToTop() {\n            innerRef.current?.scrollTo({\n                top: 0,\n                behavior: \"smooth\"\n            });\n        }\n    }));\n\n    if (onScroll || onScrollEnd) {\n        props.onScroll = (e: UIEvent<HTMLDivElement>) => {\n            if (onScrollEnd) {\n                const ele: any = e.target\n                const scrollTop = ele.scrollTop\n                const scrollHeight = ele.scrollHeight\n                const clientHeight = ele.clientHeight\n                const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\n                isScrollDown && onScrollEnd(e)\n            }\n            onScroll && onScroll(e)\n        }\n    }\n\n    return (\n        <Tag\n            {...props}\n            ref={innerRef}\n            baseClass='scrollbar'\n            sxr={{\n                height: \"100%\",\n                width: \"100%\",\n                overflow: \"auto\",\n            }}\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default Scrollbar "],"names":["__rest","useInterface","useBreakpointProps","useTheme","useScrollbar","useRef","useImperativeHandle","_jsx","Tag"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\nimport { Tag, TagComponentType, TagProps, useBreakpointProps, useInterface, useBreakpointPropsType, useScrollbar, useTheme } from '@xanui/core';\n\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\n\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    children?: ReactNode;\n    thumbSize?: useBreakpointPropsType<number>;\n    thumbColor?: useBreakpointPropsType<string>;\n    trackColor?: useBreakpointPropsType<string>;\n    onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\n}\n\nexport type ScrollbarHandle = {\n    scrollTo: (pos: number) => void;\n    scrollToBottom: () => void;\n    scrollToTop: () => void;\n};\n\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\n    let [{ thumbSize, thumbColor, trackColor, onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\n    const _p: any = {}\n    if (thumbSize) _p.thumbSize = thumbSize\n    if (thumbColor) _p.thumbColor = thumbColor\n    if (trackColor) _p.trackColor = trackColor\n    const p: any = useBreakpointProps(_p)\n    const theme = useTheme()\n    const sclass = useScrollbar({\n        themeName: theme.name,\n        thumbSize: p.thumbSize,\n        thumbColor: p.thumbColor,\n        trackColor: p.trackColor,\n    })\n\n    props.className = props.className ? `${props.className} ${sclass}` : sclass\n    const innerRef = useRef<HTMLDivElement>(null);\n\n\n    useImperativeHandle(ref, () => ({\n        scrollTo(pos: number) {\n            innerRef.current?.scrollTo({\n                top: pos,\n                behavior: \"smooth\"\n            });\n        },\n        scrollToBottom() {\n            if (!innerRef.current) return;\n            const ele = innerRef.current;\n            ele.scrollTo({\n                top: ele.scrollHeight,\n                behavior: \"smooth\"\n            });\n        },\n        scrollToTop() {\n            innerRef.current?.scrollTo({\n                top: 0,\n                behavior: \"smooth\"\n            });\n        }\n    }));\n\n    if (onScroll || onScrollEnd) {\n        props.onScroll = (e: UIEvent<HTMLDivElement>) => {\n            if (onScrollEnd) {\n                const ele: any = e.target\n                const scrollTop = ele.scrollTop\n                const scrollHeight = ele.scrollHeight\n                const clientHeight = ele.clientHeight\n                const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\n                isScrollDown && onScrollEnd(e)\n            }\n            onScroll && onScroll(e)\n        }\n    }\n\n\n\n    return (\n        <Tag\n            {...props}\n            ref={innerRef}\n            baseClass='scrollbar'\n            sxr={{\n                height: \"100%\",\n                width: \"100%\",\n                overflow: \"auto\",\n            }}\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default Scrollbar "],"names":["__rest","useInterface","useBreakpointProps","useTheme","useScrollbar","useRef","useImperativeHandle","_jsx","Tag"],"mappings":"4LAmBA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAwC,EAAE,GAA+B,KAAI;AAA7E,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA8B,EAAzB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACvF,IAAI,CAAA,EAAA,CAAA,GAA2EC,iBAAY,CAAM,WAAW,EAAE,IAAI,EAAE,EAAE,CAAC,EAAlH,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAA,GAAA,EAAY,EAAP,KAAK,GAAAD,YAAA,CAAA,EAAA,EAApE,CAAA,WAAA,EAAA,YAAA,EAAA,YAAA,EAAA,UAAA,EAAA,aAAA,CAAsE,CAA4C;IACvH,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,MAAM,CAAC,GAAQE,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,MAAM,KAAK,GAAGC,aAAQ,EAAE;IACxB,MAAM,MAAM,GAAGC,iBAAY,CAAC;QACxB,SAAS,EAAE,KAAK,CAAC,IAAI;QACrB,SAAS,EAAE,CAAC,CAAC,SAAS;QACtB,UAAU,EAAE,CAAC,CAAC,UAAU;QACxB,UAAU,EAAE,CAAC,CAAC,UAAU;AAC3B,KAAA,CAAC;IAEF,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,GAAG,CAAA,EAAG,KAAK,CAAC,SAAS,IAAI,MAAM,CAAA,CAAE,GAAG,MAAM;AAC3E,IAAA,MAAM,QAAQ,GAAGC,YAAM,CAAiB,IAAI,CAAC;AAG7C,IAAAC,yBAAmB,CAAC,GAAG,EAAE,OAAO;AAC5B,QAAA,QAAQ,CAAC,GAAW,EAAA;;AAChB,YAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,CAAC;AACvB,gBAAA,GAAG,EAAE,GAAG;AACR,gBAAA,QAAQ,EAAE;AACb,aAAA,CAAC;QACN,CAAC;QACD,cAAc,GAAA;YACV,IAAI,CAAC,QAAQ,CAAC,OAAO;gBAAE;AACvB,YAAA,MAAM,GAAG,GAAG,QAAQ,CAAC,OAAO;YAC5B,GAAG,CAAC,QAAQ,CAAC;gBACT,GAAG,EAAE,GAAG,CAAC,YAAY;AACrB,gBAAA,QAAQ,EAAE;AACb,aAAA,CAAC;QACN,CAAC;QACD,WAAW,GAAA;;AACP,YAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,CAAC;AACvB,gBAAA,GAAG,EAAE,CAAC;AACN,gBAAA,QAAQ,EAAE;AACb,aAAA,CAAC;QACN;AACH,KAAA,CAAC,CAAC;AAEH,IAAA,IAAI,QAAQ,IAAI,WAAW,EAAE;AACzB,QAAA,KAAK,CAAC,QAAQ,GAAG,CAAC,CAA0B,KAAI;YAC5C,IAAI,WAAW,EAAE;AACb,gBAAA,MAAM,GAAG,GAAQ,CAAC,CAAC,MAAM;AACzB,gBAAA,MAAM,SAAS,GAAG,GAAG,CAAC,SAAS;AAC/B,gBAAA,MAAM,YAAY,GAAG,GAAG,CAAC,YAAY;AACrC,gBAAA,MAAM,YAAY,GAAG,GAAG,CAAC,YAAY;gBACrC,MAAM,YAAY,GAAG,YAAY,GAAG,SAAS,IAAI,YAAY,GAAG,CAAC;AACjE,gBAAA,YAAY,IAAI,WAAW,CAAC,CAAC,CAAC;YAClC;AACA,YAAA,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC;AAC3B,QAAA,CAAC;IACL;AAIA,IAAA,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,EAAA,EACT,GAAG,EAAE,QAAQ,EACb,SAAS,EAAC,WAAW,EACrB,GAAG,EAAE;AACD,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,QAAQ,EAAE,MAAM;SACnB,EAAA,QAAA,EAEA,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC"}

package/Scrollbar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\nimport { Tag, TagComponentType, TagProps, useBreakpointProps, useInterface, useBreakpointPropsType, useScrollbar, useTheme } from '@xanui/core';\n\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\n\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    children: ReactNode;\n    thumbSize?: useBreakpointPropsType<number>;\n    thumbColor?: useBreakpointPropsType<string>;\n    trackColor?: useBreakpointPropsType<string>;\n    onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\n}\n\nexport type ScrollbarHandle = {\n    scrollTo: (pos: number) => void;\n    scrollToBottom: () => void;\n    scrollToTop: () => void;\n};\n\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\n    let [{ thumbSize, thumbColor, trackColor, onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\n    const _p: any = {}\n    if (thumbSize) _p.thumbSize = thumbSize\n    if (thumbColor) _p.thumbColor = thumbColor\n    if (trackColor) _p.trackColor = trackColor\n    const p: any = useBreakpointProps(_p)\n    const theme = useTheme()\n    const sclass = useScrollbar({\n        themeName: theme.name,\n        thumbSize: p.thumbSize,\n        thumbColor: p.thumbColor,\n        trackColor: p.trackColor,\n    })\n    props.className = props.className ? `${props.className} ${sclass}` : sclass\n    const innerRef = useRef<HTMLDivElement>(null);\n\n\n    useImperativeHandle(ref, () => ({\n        scrollTo(pos: number) {\n            innerRef.current?.scrollTo({\n                top: pos,\n                behavior: \"smooth\"\n            });\n        },\n        scrollToBottom() {\n            if (!innerRef.current) return;\n            const ele = innerRef.current;\n            ele.scrollTo({\n                top: ele.scrollHeight,\n                behavior: \"smooth\"\n            });\n        },\n        scrollToTop() {\n            innerRef.current?.scrollTo({\n                top: 0,\n                behavior: \"smooth\"\n            });\n        }\n    }));\n\n    if (onScroll || onScrollEnd) {\n        props.onScroll = (e: UIEvent<HTMLDivElement>) => {\n            if (onScrollEnd) {\n                const ele: any = e.target\n                const scrollTop = ele.scrollTop\n                const scrollHeight = ele.scrollHeight\n                const clientHeight = ele.clientHeight\n                const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\n                isScrollDown && onScrollEnd(e)\n            }\n            onScroll && onScroll(e)\n        }\n    }\n\n    return (\n        <Tag\n            {...props}\n            ref={innerRef}\n            baseClass='scrollbar'\n            sxr={{\n                height: \"100%\",\n                width: \"100%\",\n                overflow: \"auto\",\n            }}\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default Scrollbar "],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\nimport { Tag, TagComponentType, TagProps, useBreakpointProps, useInterface, useBreakpointPropsType, useScrollbar, useTheme } from '@xanui/core';\n\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\n\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    children?: ReactNode;\n    thumbSize?: useBreakpointPropsType<number>;\n    thumbColor?: useBreakpointPropsType<string>;\n    trackColor?: useBreakpointPropsType<string>;\n    onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\n}\n\nexport type ScrollbarHandle = {\n    scrollTo: (pos: number) => void;\n    scrollToBottom: () => void;\n    scrollToTop: () => void;\n};\n\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\n    let [{ thumbSize, thumbColor, trackColor, onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\n    const _p: any = {}\n    if (thumbSize) _p.thumbSize = thumbSize\n    if (thumbColor) _p.thumbColor = thumbColor\n    if (trackColor) _p.trackColor = trackColor\n    const p: any = useBreakpointProps(_p)\n    const theme = useTheme()\n    const sclass = useScrollbar({\n        themeName: theme.name,\n        thumbSize: p.thumbSize,\n        thumbColor: p.thumbColor,\n        trackColor: p.trackColor,\n    })\n\n    props.className = props.className ? `${props.className} ${sclass}` : sclass\n    const innerRef = useRef<HTMLDivElement>(null);\n\n\n    useImperativeHandle(ref, () => ({\n        scrollTo(pos: number) {\n            innerRef.current?.scrollTo({\n                top: pos,\n                behavior: \"smooth\"\n            });\n        },\n        scrollToBottom() {\n            if (!innerRef.current) return;\n            const ele = innerRef.current;\n            ele.scrollTo({\n                top: ele.scrollHeight,\n                behavior: \"smooth\"\n            });\n        },\n        scrollToTop() {\n            innerRef.current?.scrollTo({\n                top: 0,\n                behavior: \"smooth\"\n            });\n        }\n    }));\n\n    if (onScroll || onScrollEnd) {\n        props.onScroll = (e: UIEvent<HTMLDivElement>) => {\n            if (onScrollEnd) {\n                const ele: any = e.target\n                const scrollTop = ele.scrollTop\n                const scrollHeight = ele.scrollHeight\n                const clientHeight = ele.clientHeight\n                const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\n                isScrollDown && onScrollEnd(e)\n            }\n            onScroll && onScroll(e)\n        }\n    }\n\n\n\n    return (\n        <Tag\n            {...props}\n            ref={innerRef}\n            baseClass='scrollbar'\n            sxr={{\n                height: \"100%\",\n                width: \"100%\",\n                overflow: \"auto\",\n            }}\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default Scrollbar "],"names":["_jsx"],"mappings":"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"}

package/Toast/index.d.ts

@@ -3,7 +3,7 @@ import { ReactElement } from 'react';
 import { AlertProps } from '../Alert/index.js';
 
 type PlacementType = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
-type ToastProps = {
+type UseToastProps = {
     title?: useBreakpointPropsType<string | ReactElement>;
     content?: AlertProps['children'];
     variant?: useBreakpointPropsType<ColorTemplateType>;
@@ -12,9 +12,7 @@ type ToastProps = {
     placement?: PlacementType;
     closeable?: useBreakpointPropsType<boolean>;
 };
-declare const Toast: {
-    open: (props: ToastProps) => void;
-};
+declare const Toast: (props?: string | UseToastProps) => void;
 
 export { Toast as default };
-export type { ToastProps };
+export type { UseToastProps };