@xanui/ui 1.2.6 → 1.2.7

package/Toast/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\nimport { UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType, Renderar } from \"@xanui/core\";\nimport React, { ReactElement } from \"react\";\nimport Alert, { AlertProps } from \"../Alert\";\nimport Scrollbar from \"../Scrollbar\";\n\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\n\nexport type UseToastProps = {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    content?: AlertProps['children'];\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n    placement?: PlacementType;\n    closeable?: useBreakpointPropsType<boolean>;\n    autoColose?: boolean;\n    autoColoseDelay?: number;\n    pauseOnHover?: boolean;\n}\n\n\nconst formatPacement = (placement: PlacementType) => {\n    let sx: any = {}\n    let transition: any = \"\"\n    switch (placement) {\n        case \"top-left\":\n            sx = {\n                top: 0,\n                left: 0\n            }\n            transition = \"fadeRight\"\n            break;\n        case \"top-right\":\n            sx = {\n                top: 0,\n                right: 0\n            }\n            transition = \"fadeLeft\"\n            break;\n        case \"top-center\":\n            sx = {\n                top: 0,\n                left: \"50%\",\n                transform: \"translateX(-50%)\"\n            }\n            transition = \"fadeDown\"\n            break;\n        case \"bottom-right\":\n            sx = {\n                bottom: 0,\n                right: 0\n            }\n            transition = \"fadeLeft\"\n            break;\n        case \"bottom-left\":\n            sx = {\n                bottom: 0,\n                left: 0\n            }\n            transition = \"fadeRight\"\n            break;\n        case \"bottom-center\":\n            sx = {\n                bottom: 0,\n                left: \"50%\",\n                transform: \"translateX(-50%)\"\n            }\n            transition = \"fadeUp\"\n            break;\n    }\n    return { sx, transition }\n}\n\nconst ToastView = (props: UseToastProps & { onClosed: () => void }) => {\n    const [open, setOpen] = React.useState(true)\n    const [timer, setTimer] = React.useState<any>(null)\n    const {\n        placement = \"bottom-right\",\n        content,\n        closeable,\n        onClosed,\n        autoColose = true,\n        pauseOnHover = true,\n        autoColoseDelay = 6000,\n        ...rest\n    } = props || {}\n\n    const { transition } = formatPacement(placement)\n\n    return (<Transition\n        open={open}\n        variant={transition}\n        onClosed={() => {\n            onClosed()\n        }}\n        onOpened={() => {\n            if (autoColose) {\n                setTimer(setTimeout(() => {\n                    setOpen(false)\n                }, autoColoseDelay))\n            }\n        }}\n    >\n        <Alert\n            variant=\"fill\"\n            color=\"brand\"\n            {...rest as any}\n            mode=\"item\"\n            mb={1}\n            onMouseEnter={() => {\n                (autoColose && pauseOnHover) && clearTimeout(timer)\n            }}\n            onMouseLeave={() => {\n                if (autoColose && pauseOnHover) {\n                    setTimer(setTimeout(() => {\n                        setOpen(false)\n                    }, autoColoseDelay))\n                }\n            }}\n            onClose={closeable ? () => setOpen(false) : undefined}\n        >{content}</Alert>\n    </Transition>)\n}\n\nconst State: Record<PlacementType, UseToastProps[]> = {\n    // \"top-left\": [],\n    // \"top-center\": [],\n    // \"top-right\": [],\n    // \"bottom-left\": [],\n    // \"bottom-center\": [],\n    // \"bottom-right\": []\n} as any\n\nconst RenderToasts = () => {\n    let views = []\n\n    for (let placement in State) {\n        const items = (State as any)[placement]\n        const { sx } = formatPacement(placement as any)\n        if (!items.length) continue;\n        views.push(\n            <Scrollbar\n                key={`toast-render-${placement}`}\n                overflow=\"hidden\"\n                p={1}\n                sx={{\n                    position: \"fixed\",\n                    zIndex: 99999999,\n                    display: \"flex\",\n                    justifyContent: \"flex-end\",\n                    flexDirection: \"column\",\n                    width: 280,\n                    height: \"auto\",\n                    maxHeight: \"100vh\",\n                    ...sx\n                }}\n            >\n\n                {items.map((itemprops: UseToastProps, index: number) => {\n                    return (\n                        <ToastView\n                            key={`toast-view-${index}`}\n                            {...itemprops}\n                            onClosed={() => {\n                                items.splice(index, 1)\n                                if (!items.length) {\n                                    delete (State as any)[placement]\n                                } else {\n                                    (State as any)[placement] = items\n                                }\n                                if (!Object.keys(State).length) {\n                                    Renderar.unrender(RenderToasts)\n                                }\n                            }}\n                        />\n                    )\n                })}\n            </Scrollbar >\n        )\n    }\n\n    return views\n}\n\nconst Toast = (props?: UseToastProps['content'] | UseToastProps) => {\n    props = React.isValidElement(props) ? { content: props } : props\n    let { placement = \"bottom-right\" } = (props || {}) as UseToastProps\n    const length = Object.keys(State).length\n    if (!State[placement]) State[placement] = []\n    State[placement].push(props as any)\n    if (length) {\n        Renderar.updateProps(RenderToasts, {})\n    } else {\n        Renderar.render(RenderToasts)\n    }\n}\n\nexport default Toast;"],"names":[],"mappings":";;;;;;;;AAsBA;;;;AAIQ;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;;AAKZ;AACJ;AAEA;AACI;AACA;AACA;;AAaA;AAIQ;AACJ;;AAGQ;;AAEA;;;;AAYJ;AAEI;AACI;;AAEA;;;AAMpB;AAEA;AACI;AACA;AACA;AACA;AACA;AACA;;AAGJ;;AAGI;AACI;;;;;;AA2BwB;AACA;AACI;;;AAEC;;;AAGD;;AAER;AAGZ;;AAKZ;AACJ;AAEA;AACI;;;AAGA;AAAuB;;;AAGnB;;;AAEA;;AAER;;"}
+{"version":3,"file":"index.js","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\nimport { UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType, Renderar } from \"@xanui/core\";\nimport React, { ReactElement, useState } from \"react\";\nimport Alert, { AlertProps } from \"../Alert\";\nimport Scrollbar from \"../Scrollbar\";\n\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\n\nexport type UseToastProps = {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    content?: AlertProps['children'];\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n    placement?: PlacementType;\n    closeable?: useBreakpointPropsType<boolean>;\n    autoColose?: boolean;\n    autoColoseDelay?: number;\n    pauseOnHover?: boolean;\n}\n\n\nconst formatPacement = (placement: PlacementType) => {\n    let sx: any = {}\n    let transition: any = \"\"\n    switch (placement) {\n        case \"top-left\":\n            sx = {\n                top: 0,\n                left: 0\n            }\n            transition = \"fadeRight\"\n            break;\n        case \"top-right\":\n            sx = {\n                top: 0,\n                right: 0\n            }\n            transition = \"fadeLeft\"\n            break;\n        case \"top-center\":\n            sx = {\n                top: 0,\n                left: \"50%\",\n                transform: \"translateX(-50%)\"\n            }\n            transition = \"fadeDown\"\n            break;\n        case \"bottom-right\":\n            sx = {\n                bottom: 0,\n                right: 0\n            }\n            transition = \"fadeLeft\"\n            break;\n        case \"bottom-left\":\n            sx = {\n                bottom: 0,\n                left: 0\n            }\n            transition = \"fadeRight\"\n            break;\n        case \"bottom-center\":\n            sx = {\n                bottom: 0,\n                left: \"50%\",\n                transform: \"translateX(-50%)\"\n            }\n            transition = \"fadeUp\"\n            break;\n    }\n    return { sx, transition }\n}\n\nconst ToastView = (props: UseToastProps & { tid: string, onExited: (tid: string) => void }) => {\n    const [open, setOpen] = React.useState(true)\n    const [timer, setTimer] = React.useState<any>(null)\n    const {\n        placement = \"bottom-right\",\n        content,\n        closeable,\n        onExited,\n        autoColose = true,\n        pauseOnHover = true,\n        autoColoseDelay = 6000,\n        tid,\n        ...rest\n    } = props || {}\n\n    const { transition } = formatPacement(placement)\n\n    return (<Transition\n        open={open}\n        variant={transition}\n        onExited={() => {\n            onExited(tid)\n        }}\n        onEntered={() => {\n            if (autoColose) {\n                setTimer(setTimeout(() => {\n                    setOpen(false)\n                }, autoColoseDelay))\n            }\n        }}\n    >\n        <Alert\n            variant=\"fill\"\n            color=\"primary\"\n            {...rest as any}\n            direction={\"row\"}\n            mb={1}\n            onMouseEnter={() => {\n                (autoColose && pauseOnHover) && clearTimeout(timer)\n            }}\n            onMouseLeave={() => {\n                if (autoColose && pauseOnHover) {\n                    setTimer(setTimeout(() => {\n                        setOpen(false)\n                    }, autoColoseDelay))\n                }\n            }}\n            onClose={closeable ? () => setOpen(false) : undefined}\n        >{content}</Alert>\n    </Transition>)\n}\n\nconst State: Record<PlacementType, UseToastProps[]> = {\n    // \"top-left\": [],\n    // \"top-center\": [],\n    // \"top-right\": [],\n    // \"bottom-left\": [],\n    // \"bottom-center\": [],\n    // \"bottom-right\": []\n} as any\n\nconst RenderToasts = () => {\n    let views = []\n    const [, dispatch] = useState(0)\n\n    for (let placement in State) {\n        const items = (State as any)[placement]\n        const { sx } = formatPacement(placement as any)\n        if (!items.length) continue;\n        views.push(\n            <Scrollbar\n                key={`toast-render-${placement}`}\n                overflow=\"hidden\"\n                p={1}\n                sx={{\n                    position: \"fixed\",\n                    zIndex: 99999999,\n                    display: \"flex\",\n                    justifyContent: \"flex-end\",\n                    flexDirection: \"column\",\n                    width: 300,\n                    height: \"auto\",\n                    maxHeight: \"100vh\",\n                    ...sx\n                }}\n            >\n\n                {items.map((itemprops: UseToastProps & { tid: string }) => {\n                    return (\n                        <ToastView\n                            key={`toast-view-${itemprops.tid}`}\n                            {...itemprops}\n                            onExited={(tid) => {\n                                (State as any)[placement] = (State as any)[placement].filter((item: any) => item.tid !== tid)\n\n                                if (!(State as any)[placement]?.length) delete (State as any)[placement]\n                                if (!Object.keys(State).length) Renderar.unrender(RenderToasts)\n\n                                dispatch(Math.random())\n                            }}\n                        />\n                    )\n                })}\n            </Scrollbar >\n        )\n    }\n\n    return views\n}\n\nconst Toast = (props?: UseToastProps['content'] | UseToastProps) => {\n    props = React.isValidElement(props) ? { content: props } : props\n    let { placement = \"bottom-right\" } = (props || {}) as UseToastProps\n    const length = Object.keys(State).length\n    if (!State[placement]) State[placement] = [];\n    (props as any).tid = Math.random().toString(32);\n    State[placement].push(props as any)\n    if (length) {\n        Renderar.updateProps(RenderToasts, {})\n    } else {\n        Renderar.render(RenderToasts)\n    }\n}\n\nexport default Toast;"],"names":[],"mappings":";;;;;;;;AAsBA;;;;AAIQ;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;;AAKZ;AACJ;AAEA;AACI;AACA;AACA;;AAcA;;AAKI;;AAGQ;;AAEA;;;;AAYJ;AAEI;AACI;;AAEA;;;AAMpB;AAEA;AACI;AACA;AACA;AACA;AACA;AACA;;AAGJ;;;AAII;AACI;;;;;;;;;AA6BgE;;AACR;AAEhC;;AAIhB;;AAKZ;AACJ;AAEA;AACI;;;AAGA;AAAuB;AACtB;;;AAGG;;;AAEA;;AAER;;"}

package/Tooltip/index.cjs

@@ -18,7 +18,7 @@ const Tooltip = ({ children, title, variant, color, placement }) => {
         _p.variant = variant;
     const p = core.useBreakpointProps(_p);
     title = p.title;
-    color = (_a = p.color) !== null && _a !== void 0 ? _a : "default";
+    color = (_a = p.color) !== null && _a !== void 0 ? _a : 'surface';
     variant = (_b = p.variant) !== null && _b !== void 0 ? _b : "fill";
     placement !== null && placement !== void 0 ? placement : (placement = "bottom");
     const template = core.useColorTemplate(color, variant);
@@ -32,7 +32,7 @@ const Tooltip = ({ children, title, variant, color, placement }) => {
         onMouseLeave: () => setTarget(null)
     });
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [child, jsxRuntime.jsx(index, { target: target, placement: placement, slotProps: {
-                    content: Object.assign(Object.assign({ p: .5, shadow: 1 }, template.primary), { bgcolor: color == "default" ? "background.primary" : template.primary.bgcolor })
+                    content: Object.assign(Object.assign({ p: .5, shadow: 1 }, template.main), { bgcolor: color == 'surface' ? "surface.main" : template.main.bgcolor })
                 }, children: title })] }));
 };
 

package/Tooltip/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["\"use client\";\nimport { Children, cloneElement, ReactElement, useState } from 'react'\nimport Menu, { MenuProps } from '../Menu'\nimport { useBreakpointProps, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type TooltipProps = {\n    children: ReactElement;\n    title: useBreakpointPropsType<string>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    placement?: MenuProps['placement']\n}\n\nconst Tooltip = ({ children, title, variant, color, placement }: TooltipProps) => {\n    const [target, setTarget] = useState<any>()\n    const _p: any = {}\n    if (title) _p.title = title\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    const p: any = useBreakpointProps(_p)\n    title = p.title\n    color = p.color ?? \"default\"\n    variant = p.variant ?? \"fill\"\n    placement ??= \"bottom\"\n\n    const template = useColorTemplate(color as any, variant as any)\n    if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Toast\")\n    const first: any = Children.toArray(children).shift();\n    const child = cloneElement(first, {\n        onMouseEnter: (e) => {\n            setTarget(e.target)\n        },\n        onMouseLeave: () => setTarget(null)\n    })\n\n\n    return (\n        <>\n            {child}\n            <Menu\n                target={target}\n                placement={placement}\n                slotProps={{\n                    content: {\n                        p: .5,\n                        shadow: 1,\n                        ...template.primary,\n                        bgcolor: color == \"default\" ? \"background.primary\" : template.primary.bgcolor,\n                    }\n                }}\n            >\n                {title as any}\n            </Menu>\n        </>\n    )\n}\n\nexport default Tooltip"],"names":[],"mappings":";;;;;;;;AAcA;;;;AAGI;AAAW;AACX;AAAW;AACX;AAAa;AACb;AACA;AACA;AACA;;;;AAI0C;;AAE1C;AACI;AACI;;AAEJ;AACH;AAGD;AAOgB;AAMH;AAMjB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["\"use client\";\nimport { Children, cloneElement, ReactElement, useState } from 'react'\nimport Menu, { MenuProps } from '../Menu'\nimport { useBreakpointProps, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type TooltipProps = {\n    children: ReactElement;\n    title: useBreakpointPropsType<string>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    placement?: MenuProps['placement']\n}\n\nconst Tooltip = ({ children, title, variant, color, placement }: TooltipProps) => {\n    const [target, setTarget] = useState<any>()\n    const _p: any = {}\n    if (title) _p.title = title\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    const p: any = useBreakpointProps(_p)\n    title = p.title\n    color = p.color ?? 'surface'\n    variant = p.variant ?? \"fill\"\n    placement ??= \"bottom\"\n\n    const template = useColorTemplate(color as any, variant as any)\n    if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Toast\")\n    const first: any = Children.toArray(children).shift();\n    const child = cloneElement(first, {\n        onMouseEnter: (e) => {\n            setTarget(e.target)\n        },\n        onMouseLeave: () => setTarget(null)\n    })\n\n\n    return (\n        <>\n            {child}\n            <Menu\n                target={target}\n                placement={placement}\n                slotProps={{\n                    content: {\n                        p: .5,\n                        shadow: 1,\n                        ...template.main,\n                        bgcolor: color == 'surface' ? \"surface.main\" : template.main.bgcolor,\n                    }\n                }}\n            >\n                {title as any}\n            </Menu>\n        </>\n    )\n}\n\nexport default Tooltip"],"names":[],"mappings":";;;;;;;;AAcA;;;;AAGI;AAAW;AACX;AAAW;AACX;AAAa;AACb;AACA;AACA;AACA;;;;AAI0C;;AAE1C;AACI;AACI;;AAEJ;AACH;AAGD;AAOgB;AAMH;AAMjB;;"}

package/Tooltip/index.js

@@ -16,7 +16,7 @@ const Tooltip = ({ children, title, variant, color, placement }) => {
         _p.variant = variant;
     const p = useBreakpointProps(_p);
     title = p.title;
-    color = (_a = p.color) !== null && _a !== void 0 ? _a : "default";
+    color = (_a = p.color) !== null && _a !== void 0 ? _a : 'surface';
     variant = (_b = p.variant) !== null && _b !== void 0 ? _b : "fill";
     placement !== null && placement !== void 0 ? placement : (placement = "bottom");
     const template = useColorTemplate(color, variant);
@@ -30,7 +30,7 @@ const Tooltip = ({ children, title, variant, color, placement }) => {
         onMouseLeave: () => setTarget(null)
     });
     return (jsxs(Fragment, { children: [child, jsx(Menu, { target: target, placement: placement, slotProps: {
-                    content: Object.assign(Object.assign({ p: .5, shadow: 1 }, template.primary), { bgcolor: color == "default" ? "background.primary" : template.primary.bgcolor })
+                    content: Object.assign(Object.assign({ p: .5, shadow: 1 }, template.main), { bgcolor: color == 'surface' ? "surface.main" : template.main.bgcolor })
                 }, children: title })] }));
 };
 

package/Tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["\"use client\";\nimport { Children, cloneElement, ReactElement, useState } from 'react'\nimport Menu, { MenuProps } from '../Menu'\nimport { useBreakpointProps, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type TooltipProps = {\n    children: ReactElement;\n    title: useBreakpointPropsType<string>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    placement?: MenuProps['placement']\n}\n\nconst Tooltip = ({ children, title, variant, color, placement }: TooltipProps) => {\n    const [target, setTarget] = useState<any>()\n    const _p: any = {}\n    if (title) _p.title = title\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    const p: any = useBreakpointProps(_p)\n    title = p.title\n    color = p.color ?? \"default\"\n    variant = p.variant ?? \"fill\"\n    placement ??= \"bottom\"\n\n    const template = useColorTemplate(color as any, variant as any)\n    if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Toast\")\n    const first: any = Children.toArray(children).shift();\n    const child = cloneElement(first, {\n        onMouseEnter: (e) => {\n            setTarget(e.target)\n        },\n        onMouseLeave: () => setTarget(null)\n    })\n\n\n    return (\n        <>\n            {child}\n            <Menu\n                target={target}\n                placement={placement}\n                slotProps={{\n                    content: {\n                        p: .5,\n                        shadow: 1,\n                        ...template.primary,\n                        bgcolor: color == \"default\" ? \"background.primary\" : template.primary.bgcolor,\n                    }\n                }}\n            >\n                {title as any}\n            </Menu>\n        </>\n    )\n}\n\nexport default Tooltip"],"names":[],"mappings":";;;;;;AAcA;;;;AAGI;AAAW;AACX;AAAW;AACX;AAAa;AACb;AACA;AACA;AACA;;;;AAI0C;;AAE1C;AACI;AACI;;AAEJ;AACH;AAGD;AAOgB;AAMH;AAMjB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["\"use client\";\nimport { Children, cloneElement, ReactElement, useState } from 'react'\nimport Menu, { MenuProps } from '../Menu'\nimport { useBreakpointProps, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type TooltipProps = {\n    children: ReactElement;\n    title: useBreakpointPropsType<string>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    placement?: MenuProps['placement']\n}\n\nconst Tooltip = ({ children, title, variant, color, placement }: TooltipProps) => {\n    const [target, setTarget] = useState<any>()\n    const _p: any = {}\n    if (title) _p.title = title\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    const p: any = useBreakpointProps(_p)\n    title = p.title\n    color = p.color ?? 'surface'\n    variant = p.variant ?? \"fill\"\n    placement ??= \"bottom\"\n\n    const template = useColorTemplate(color as any, variant as any)\n    if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Toast\")\n    const first: any = Children.toArray(children).shift();\n    const child = cloneElement(first, {\n        onMouseEnter: (e) => {\n            setTarget(e.target)\n        },\n        onMouseLeave: () => setTarget(null)\n    })\n\n\n    return (\n        <>\n            {child}\n            <Menu\n                target={target}\n                placement={placement}\n                slotProps={{\n                    content: {\n                        p: .5,\n                        shadow: 1,\n                        ...template.main,\n                        bgcolor: color == 'surface' ? \"surface.main\" : template.main.bgcolor,\n                    }\n                }}\n            >\n                {title as any}\n            </Menu>\n        </>\n    )\n}\n\nexport default Tooltip"],"names":[],"mappings":";;;;;;AAcA;;;;AAGI;AAAW;AACX;AAAW;AACX;AAAa;AACb;AACA;AACA;AACA;;;;AAI0C;;AAE1C;AACI;AACI;;AAEJ;AACH;AAGD;AAOgB;AAMH;AAMjB;;"}

package/ViewBox/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React__default, { ReactElement } from 'react';
 import { ScrollbarProps } from '../Scrollbar/index.js';
 import { TagComponentType, TagProps, useBreakpointPropsType } from '@xanui/core';
 
@@ -10,7 +10,7 @@ type ViewBoxProps<T extends TagComponentType = "div"> = TagProps<T> & {
         scrollbar?: Omit<ScrollbarProps, 'children'>;
     };
 };
-declare const ViewBox: React.ForwardRefExoticComponent<Omit<ViewBoxProps<"div">, "ref"> & React.RefAttributes<unknown>>;
+declare const ViewBox: React__default.ForwardRefExoticComponent<Omit<ViewBoxProps<"div">, "ref"> & React__default.RefAttributes<unknown>>;
 
 export { ViewBox as default };
 export type { ViewBoxProps };

package/index.cjs

@@ -4,61 +4,68 @@ var index = require('./Accordion/index.cjs');
 var index$1 = require('./Autocomplete/index.cjs');
 var index$2 = require('./Alert/index.cjs');
 var index$3 = require('./Avatar/index.cjs');
-var index$4 = require('./Badge/index.cjs');
-var index$5 = require('./Box/index.cjs');
-var index$6 = require('./Button/index.cjs');
-var index$7 = require('./ButtonGroup/index.cjs');
-var index$8 = require('./Calendar/index.cjs');
-var index$9 = require('./CalendarInput/index.cjs');
-var index$a = require('./Checkbox/index.cjs');
-var index$b = require('./Chip/index.cjs');
-var index$c = require('./CircleProgress/index.cjs');
-var index$d = require('./ClickOutside/index.cjs');
-var index$e = require('./Collaps/index.cjs');
-var index$f = require('./Container/index.cjs');
-var index$g = require('./Datatable/index.cjs');
-var index$h = require('./DataFilter/index.cjs');
-var index$i = require('./Divider/index.cjs');
-var index$j = require('./Drawer/index.cjs');
-var index$k = require('./Form/index.cjs');
-var index$l = require('./GridContainer/index.cjs');
-var index$m = require('./GridItem/index.cjs');
-var index$n = require('./IconButton/index.cjs');
-var index$o = require('./Image/index.cjs');
-var index$p = require('./Input/index.cjs');
-var index$q = require('./InputNumber/index.cjs');
-var index$r = require('./Label/index.cjs');
-var index$s = require('./Layer/index.cjs');
-var index$t = require('./LineProgress/index.cjs');
-var index$u = require('./List/index.cjs');
-var index$v = require('./ListItem/index.cjs');
-var index$w = require('./LoadingBox/index.cjs');
-var index$x = require('./Menu/index.cjs');
-var index$y = require('./Modal/index.cjs');
-var index$z = require('./NoSSR/index.cjs');
-var index$A = require('./Option/index.cjs');
-var index$B = require('./Paper/index.cjs');
-var index$C = require('./Portal/index.cjs');
-var index$D = require('./Radio/index.cjs');
-var index$E = require('./Scrollbar/index.cjs');
-var index$F = require('./Select/index.cjs');
-var index$G = require('./Stack/index.cjs');
-var index$H = require('./Switch/index.cjs');
-var index$I = require('./Tab/index.cjs');
-var index$J = require('./Table/index.cjs');
-var index$K = require('./TableBody/index.cjs');
-var index$L = require('./TableCell/index.cjs');
-var index$M = require('./TableFooter/index.cjs');
-var index$N = require('./TableHead/index.cjs');
-var index$O = require('./TablePagination/index.cjs');
-var index$P = require('./TableRow/index.cjs');
-var index$Q = require('./Tabs/index.cjs');
-var index$R = require('./Text/index.cjs');
-var index$S = require('./Toast/index.cjs');
-var index$T = require('./Tooltip/index.cjs');
-var index$U = require('./useCorner/index.cjs');
-var index$V = require('./useContextMenu/index.cjs');
-var index$W = require('./ViewBox/index.cjs');
+var index$4 = require('./AvatarBox/index.cjs');
+var index$5 = require('./AvatarPicker/index.cjs');
+var index$6 = require('./Badge/index.cjs');
+var index$7 = require('./Box/index.cjs');
+var index$8 = require('./Button/index.cjs');
+var index$9 = require('./ButtonGroup/index.cjs');
+var index$a = require('./Calendar/index.cjs');
+var index$b = require('./CalendarInput/index.cjs');
+var index$c = require('./Carousel/index.cjs');
+var index$d = require('./Checkbox/index.cjs');
+var index$e = require('./Chip/index.cjs');
+var index$f = require('./CircleProgress/index.cjs');
+var index$g = require('./ClickOutside/index.cjs');
+var index$h = require('./Collaps/index.cjs');
+var index$i = require('./Container/index.cjs');
+var index$j = require('./Datatable/index.cjs');
+var index$k = require('./DataFilter/index.cjs');
+var index$l = require('./Divider/index.cjs');
+var index$m = require('./Drawer/index.cjs');
+var index$n = require('./FilePicker/index.cjs');
+var index$o = require('./Form/index.cjs');
+var index$p = require('./GalleryPicker/index.cjs');
+var index$q = require('./GridContainer/index.cjs');
+var index$r = require('./GridItem/index.cjs');
+var index$s = require('./IconButton/index.cjs');
+var index$t = require('./Image/index.cjs');
+var index$u = require('./Input/index.cjs');
+var index$v = require('./InputNumber/index.cjs');
+var index$w = require('./Label/index.cjs');
+var index$x = require('./Layer/index.cjs');
+var index$y = require('./LineProgress/index.cjs');
+var index$z = require('./Link/index.cjs');
+var index$A = require('./List/index.cjs');
+var index$B = require('./ListItem/index.cjs');
+var index$C = require('./LoadingBox/index.cjs');
+var index$D = require('./Menu/index.cjs');
+var index$E = require('./Modal/index.cjs');
+var index$F = require('./NoSSR/index.cjs');
+var index$G = require('./Option/index.cjs');
+var index$H = require('./PasswordInput/index.cjs');
+var index$I = require('./Portal/index.cjs');
+var index$J = require('./Radio/index.cjs');
+var index$K = require('./RangeSlider/index.cjs');
+var index$L = require('./Scrollbar/index.cjs');
+var index$M = require('./Select/index.cjs');
+var index$N = require('./Stack/index.cjs');
+var index$O = require('./Switch/index.cjs');
+var index$P = require('./Tab/index.cjs');
+var index$Q = require('./Table/index.cjs');
+var index$R = require('./TableBody/index.cjs');
+var index$S = require('./TableCell/index.cjs');
+var index$T = require('./TableFooter/index.cjs');
+var index$U = require('./TableHead/index.cjs');
+var index$V = require('./TablePagination/index.cjs');
+var index$W = require('./TableRow/index.cjs');
+var index$X = require('./Tabs/index.cjs');
+var index$Y = require('./Text/index.cjs');
+var index$Z = require('./Toast/index.cjs');
+var index$_ = require('./Tooltip/index.cjs');
+var index$$ = require('./useCorner/index.cjs');
+var index$10 = require('./useContextMenu/index.cjs');
+var index$11 = require('./ViewBox/index.cjs');
 var SelectFilter = require('./DataFilter/options/SelectFilter.cjs');
 var MultiSelectFilter = require('./DataFilter/options/MultiSelectFilter.cjs');
 var NumberFilter = require('./DataFilter/options/NumberFilter.cjs');
@@ -73,61 +80,68 @@ exports.Accordion = index;
 exports.Autocomplete = index$1;
 exports.Alert = index$2;
 exports.Avatar = index$3;
-exports.Badge = index$4;
-exports.Box = index$5;
-exports.Button = index$6;
-exports.ButtonGroup = index$7;
-exports.Calendar = index$8;
-exports.CalendarInput = index$9;
-exports.Checkbox = index$a;
-exports.Chip = index$b;
-exports.CircleProgress = index$c;
-exports.ClickOutside = index$d;
-exports.Collaps = index$e;
-exports.Container = index$f;
-exports.Datatable = index$g;
-exports.DataFilter = index$h.default;
-exports.Divider = index$i;
-exports.Drawer = index$j;
-exports.Form = index$k;
-exports.GridContainer = index$l;
-exports.GridItem = index$m;
-exports.IconButton = index$n;
-exports.Image = index$o;
-exports.Input = index$p;
-exports.InputNumber = index$q;
-exports.Label = index$r;
-exports.Layer = index$s;
-exports.LineProgress = index$t;
-exports.List = index$u;
-exports.ListItem = index$v;
-exports.LoadingBox = index$w;
-exports.Menu = index$x;
-exports.Modal = index$y;
-exports.NoSSR = index$z;
-exports.Option = index$A;
-exports.Paper = index$B;
-exports.Portal = index$C;
-exports.Radio = index$D;
-exports.Scrollbar = index$E;
-exports.Select = index$F;
-exports.Stack = index$G;
-exports.Switch = index$H;
-exports.Tab = index$I;
-exports.Table = index$J;
-exports.TableBody = index$K;
-exports.TableCell = index$L;
-exports.TableFooter = index$M;
-exports.TableHead = index$N;
-exports.TablePagination = index$O;
-exports.TableRow = index$P;
-exports.Tabs = index$Q;
-exports.Text = index$R;
-exports.Toast = index$S;
-exports.Tooltip = index$T;
-exports.useCorner = index$U;
-exports.useContextMenu = index$V;
-exports.ViewBox = index$W;
+exports.AvatarBox = index$4;
+exports.AvatarPicker = index$5;
+exports.Badge = index$6;
+exports.Box = index$7;
+exports.Button = index$8;
+exports.ButtonGroup = index$9;
+exports.Calendar = index$a;
+exports.CalendarInput = index$b;
+exports.Carousel = index$c;
+exports.Checkbox = index$d;
+exports.Chip = index$e;
+exports.CircleProgress = index$f;
+exports.ClickOutside = index$g;
+exports.Collaps = index$h;
+exports.Container = index$i;
+exports.Datatable = index$j;
+exports.DataFilter = index$k.default;
+exports.Divider = index$l;
+exports.Drawer = index$m;
+exports.FilePicker = index$n;
+exports.Form = index$o;
+exports.GalleryPicker = index$p;
+exports.GridContainer = index$q;
+exports.GridItem = index$r;
+exports.IconButton = index$s;
+exports.Image = index$t;
+exports.Input = index$u;
+exports.InputNumber = index$v;
+exports.Label = index$w;
+exports.Layer = index$x;
+exports.LineProgress = index$y;
+exports.Link = index$z;
+exports.List = index$A;
+exports.ListItem = index$B;
+exports.LoadingBox = index$C;
+exports.Menu = index$D;
+exports.Modal = index$E;
+exports.NoSSR = index$F;
+exports.Option = index$G;
+exports.PasswordInput = index$H;
+exports.Portal = index$I;
+exports.Radio = index$J;
+exports.RangeSlider = index$K;
+exports.Scrollbar = index$L;
+exports.Select = index$M;
+exports.Stack = index$N;
+exports.Switch = index$O;
+exports.Tab = index$P;
+exports.Table = index$Q;
+exports.TableBody = index$R;
+exports.TableCell = index$S;
+exports.TableFooter = index$T;
+exports.TableHead = index$U;
+exports.TablePagination = index$V;
+exports.TableRow = index$W;
+exports.Tabs = index$X;
+exports.Text = index$Y;
+exports.Toast = index$Z;
+exports.Tooltip = index$_;
+exports.useCorner = index$$;
+exports.useContextMenu = index$10;
+exports.ViewBox = index$11;
 exports.SelectFilter = SelectFilter;
 exports.MultiSelectFilter = MultiSelectFilter;
 exports.NumberFilter = NumberFilter;

package/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/index.d.ts

@@ -2,12 +2,15 @@ export { default as Accordion } from './Accordion/index.js';
 export { default as Autocomplete } from './Autocomplete/index.js';
 export { default as Alert } from './Alert/index.js';
 export { default as Avatar } from './Avatar/index.js';
+export { default as AvatarBox } from './AvatarBox/index.js';
+export { default as AvatarPicker } from './AvatarPicker/index.js';
 export { default as Badge } from './Badge/index.js';
 export { default as Box } from './Box/index.js';
 export { default as Button } from './Button/index.js';
 export { default as ButtonGroup } from './ButtonGroup/index.js';
 export { default as Calendar } from './Calendar/index.js';
 export { default as CalendarInput } from './CalendarInput/index.js';
+export { default as Carousel } from './Carousel/index.js';
 export { default as Checkbox } from './Checkbox/index.js';
 export { default as Chip } from './Chip/index.js';
 export { default as CircleProgress } from './CircleProgress/index.js';
@@ -18,7 +21,9 @@ export { default as Datatable } from './Datatable/index.js';
 export { default as DataFilter } from './DataFilter/index.js';
 export { default as Divider } from './Divider/index.js';
 export { default as Drawer } from './Drawer/index.js';
+export { default as FilePicker } from './FilePicker/index.js';
 export { default as Form } from './Form/index.js';
+export { default as GalleryPicker } from './GalleryPicker/index.js';
 export { default as GridContainer } from './GridContainer/index.js';
 export { default as GridItem } from './GridItem/index.js';
 export { default as IconButton } from './IconButton/index.js';
@@ -28,6 +33,7 @@ export { default as InputNumber } from './InputNumber/index.js';
 export { default as Label } from './Label/index.js';
 export { default as Layer } from './Layer/index.js';
 export { default as LineProgress } from './LineProgress/index.js';
+export { default as Link } from './Link/index.js';
 export { default as List } from './List/index.js';
 export { default as ListItem } from './ListItem/index.js';
 export { default as LoadingBox } from './LoadingBox/index.js';
@@ -35,9 +41,10 @@ export { default as Menu } from './Menu/index.js';
 export { default as Modal } from './Modal/index.js';
 export { default as NoSSR } from './NoSSR/index.js';
 export { default as Option } from './Option/index.js';
-export { default as Paper } from './Paper/index.js';
+export { default as PasswordInput } from './PasswordInput/index.js';
 export { default as Portal } from './Portal/index.js';
 export { default as Radio } from './Radio/index.js';
+export { default as RangeSlider } from './RangeSlider/index.js';
 export { default as Scrollbar } from './Scrollbar/index.js';
 export { default as Select } from './Select/index.js';
 export { default as Stack } from './Stack/index.js';

package/index.js

@@ -2,12 +2,15 @@ export { default as Accordion } from './Accordion/index.js';
 export { default as Autocomplete } from './Autocomplete/index.js';
 export { default as Alert } from './Alert/index.js';
 export { default as Avatar } from './Avatar/index.js';
+export { default as AvatarBox } from './AvatarBox/index.js';
+export { default as AvatarPicker } from './AvatarPicker/index.js';
 export { default as Badge } from './Badge/index.js';
 export { default as Box } from './Box/index.js';
 export { default as Button } from './Button/index.js';
 export { default as ButtonGroup } from './ButtonGroup/index.js';
 export { default as Calendar } from './Calendar/index.js';
 export { default as CalendarInput } from './CalendarInput/index.js';
+export { default as Carousel } from './Carousel/index.js';
 export { default as Checkbox } from './Checkbox/index.js';
 export { default as Chip } from './Chip/index.js';
 export { default as CircleProgress } from './CircleProgress/index.js';
@@ -18,7 +21,9 @@ export { default as Datatable } from './Datatable/index.js';
 export { default as DataFilter } from './DataFilter/index.js';
 export { default as Divider } from './Divider/index.js';
 export { default as Drawer } from './Drawer/index.js';
+export { default as FilePicker } from './FilePicker/index.js';
 export { default as Form } from './Form/index.js';
+export { default as GalleryPicker } from './GalleryPicker/index.js';
 export { default as GridContainer } from './GridContainer/index.js';
 export { default as GridItem } from './GridItem/index.js';
 export { default as IconButton } from './IconButton/index.js';
@@ -28,6 +33,7 @@ export { default as InputNumber } from './InputNumber/index.js';
 export { default as Label } from './Label/index.js';
 export { default as Layer } from './Layer/index.js';
 export { default as LineProgress } from './LineProgress/index.js';
+export { default as Link } from './Link/index.js';
 export { default as List } from './List/index.js';
 export { default as ListItem } from './ListItem/index.js';
 export { default as LoadingBox } from './LoadingBox/index.js';
@@ -35,9 +41,10 @@ export { default as Menu } from './Menu/index.js';
 export { default as Modal } from './Modal/index.js';
 export { default as NoSSR } from './NoSSR/index.js';
 export { default as Option } from './Option/index.js';
-export { default as Paper } from './Paper/index.js';
+export { default as PasswordInput } from './PasswordInput/index.js';
 export { default as Portal } from './Portal/index.js';
 export { default as Radio } from './Radio/index.js';
+export { default as RangeSlider } from './RangeSlider/index.js';
 export { default as Scrollbar } from './Scrollbar/index.js';
 export { default as Select } from './Select/index.js';
 export { default as Stack } from './Stack/index.js';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@xanui/ui",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "Xanui - A React Component Library",
   "private": false,
   "dependencies": {
-    "@xanui/core": "^1.2.65",
+    "@xanui/core": "^1.3.12",
     "@xanui/icons": "^1.1.12",
     "pretty-class": "^1.0.8"
   },

package/readme.md

@@ -31,7 +31,7 @@ export default function App() {
     <ThemeProvider theme="light">
       <Box p={3} gap={2} display="flex" flexDirection="column">
         <h1>Welcome</h1>
-        <Button color="brand" onClick={() => alert('Hello from Xanui!')}>
+        <Button color="primary" onClick={() => alert('Hello from Xanui!')}>
           Get Started
         </Button>
       </Box>

package/useBlurCss/index.cjs

@@ -2,12 +2,11 @@
 'use strict';
 
 var React = require('react');
-var core = require('@xanui/core');
 
 let _d;
 const useBlurCss = (blur, mode) => {
     return React.useMemo(() => {
-        let transparent = { bgcolor: core.alpha("#000000", blur / 100) };
+        let transparent = { bgcolor: "surface.ghost" };
         if (typeof window === 'undefined' || mode === 'transparent') {
             return transparent;
         }

package/useBlurCss/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["\"use client\"\nimport { useMemo } from \"react\"\nimport { alpha } from \"@xanui/core\";\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\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 default useBlurCss"],"names":[],"mappings":";;;;;;AAIA;AAEA;;AAEM;;AAEG;;AAEH;;AAEH;AACH;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["\"use client\"\nimport { useMemo } from \"react\"\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\n   return useMemo(() => {\n      let transparent = { bgcolor: \"surface.ghost\" }\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 default useBlurCss"],"names":[],"mappings":";;;;;AAGA;AAEA;;AAEM;;AAEG;;AAEH;;AAEH;AACH;;"}

package/useBlurCss/index.js

@@ -1,11 +1,10 @@
 "use client";
 import { useMemo } from 'react';
-import { alpha } from '@xanui/core';
 
 let _d;
 const useBlurCss = (blur, mode) => {
     return useMemo(() => {
-        let transparent = { bgcolor: alpha("#000000", blur / 100) };
+        let transparent = { bgcolor: "surface.ghost" };
         if (typeof window === 'undefined' || mode === 'transparent') {
             return transparent;
         }

package/useBlurCss/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["\"use client\"\nimport { useMemo } from \"react\"\nimport { alpha } from \"@xanui/core\";\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\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 default useBlurCss"],"names":[],"mappings":";;;;AAIA;AAEA;;AAEM;;AAEG;;AAEH;;AAEH;AACH;;"}
+{"version":3,"file":"index.js","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["\"use client\"\nimport { useMemo } from \"react\"\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\n   return useMemo(() => {\n      let transparent = { bgcolor: \"surface.ghost\" }\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 default useBlurCss"],"names":[],"mappings":";;;AAGA;AAEA;;AAEM;;AAEG;;AAEH;;AAEH;AACH;;"}

package/useContextMenu/index.cjs

@@ -8,7 +8,7 @@ var React = require('react');
 var index = require('../Menu/index.cjs');
 
 const useContextMenu = (_a) => {
-    var { children, onClosed, onClickOutside } = _a, props = tslib.__rest(_a, ["children", "onClosed", "onClickOutside"]);
+    var { children, onExited, onClickOutside } = _a, props = tslib.__rest(_a, ["children", "onExited", "onClickOutside"]);
     const Comp = ({ x, y }) => {
         const ref = React.useRef(null);
         const [target, setTarget] = React.useState();
@@ -18,7 +18,7 @@ const useContextMenu = (_a) => {
                 core.Renderar.unrender(Comp);
             };
         }, []);
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(core.Tag, { baseClass: "context-menu-target", ref: ref, position: "fixed", top: y, left: x, zIndex: 99999999999999, bgcolor: "background.primary", height: 0, width: 0 }), jsxRuntime.jsx(index, Object.assign({}, props, { target: target, onClickOutside: (e) => {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(core.Tag, { baseClass: "context-menu-target", ref: ref, position: "fixed", top: y, left: x, zIndex: 99999999999999, bgcolor: "surface.main", height: 0, width: 0 }), jsxRuntime.jsx(index, Object.assign({}, props, { target: target, onClickOutside: (e) => {
                         core.Renderar.unrender(Comp);
                         onClickOutside && onClickOutside(e);
                     }, children: children }))] }));

package/useContextMenu/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/useContextMenu/index.tsx"],"sourcesContent":["\"use client\"\nimport { Renderar, Tag, TagComponentType } from \"@xanui/core\"\nimport { useEffect, useRef, useState } from \"react\"\nimport Menu, { MenuProps } from \"../Menu\"\n\n\nconst useContextMenu = ({ children, onClosed, onClickOutside, ...props }: MenuProps) => {\n\n   const Comp = ({ x, y }: any) => {\n      const ref = useRef(null)\n      const [target, setTarget] = useState<any>()\n\n      useEffect(() => {\n         setTarget(ref.current)\n         return () => {\n            Renderar.unrender(Comp)\n         }\n      }, [])\n\n      return (\n         <>\n            <Tag\n               baseClass=\"context-menu-target\"\n               ref={ref}\n               position={\"fixed\"}\n               top={y}\n               left={x}\n               zIndex={99999999999999}\n               bgcolor=\"background.primary\"\n               height={0}\n               width={0}\n            />\n            <Menu\n               {...props}\n               target={target!}\n               onClickOutside={(e) => {\n                  Renderar.unrender(Comp)\n                  onClickOutside && onClickOutside(e)\n               }}\n            >\n               {children}\n            </Menu>\n         </>\n      )\n   }\n\n   const onContextMenu = (e: React.MouseEvent<TagComponentType, MouseEvent>) => {\n      e.preventDefault()\n      Renderar.render(Comp, {\n         x: e.pageX,\n         y: e.pageY,\n         open: true,\n      })\n   }\n\n   onContextMenu.close = () => {\n      Renderar.unrender(Comp)\n   }\n\n   return onContextMenu\n}\n\nexport default useContextMenu"],"names":[],"mappings":";;;;;;;;;AAMA;;;AAGM;;;AAIG;AACA;AACG;AACH;;;AAoBS;AACA;AACH;AAMZ;AAEA;;AAEG;;;AAGG;AACF;AACJ;AAEA;AACG;AACH;AAEA;AACH;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/useContextMenu/index.tsx"],"sourcesContent":["\"use client\"\nimport { Renderar, Tag, TagComponentType } from \"@xanui/core\"\nimport { useEffect, useRef, useState } from \"react\"\nimport Menu, { MenuProps } from \"../Menu\"\n\n\nconst useContextMenu = ({ children, onExited, onClickOutside, ...props }: MenuProps) => {\n\n   const Comp = ({ x, y }: any) => {\n      const ref = useRef(null)\n      const [target, setTarget] = useState<any>()\n\n      useEffect(() => {\n         setTarget(ref.current)\n         return () => {\n            Renderar.unrender(Comp)\n         }\n      }, [])\n\n      return (\n         <>\n            <Tag\n               baseClass=\"context-menu-target\"\n               ref={ref}\n               position={\"fixed\"}\n               top={y}\n               left={x}\n               zIndex={99999999999999}\n               bgcolor=\"surface.main\"\n               height={0}\n               width={0}\n            />\n            <Menu\n               {...props}\n               target={target!}\n               onClickOutside={(e) => {\n                  Renderar.unrender(Comp)\n                  onClickOutside && onClickOutside(e)\n               }}\n            >\n               {children}\n            </Menu>\n         </>\n      )\n   }\n\n   const onContextMenu = (e: React.MouseEvent<TagComponentType, MouseEvent>) => {\n      e.preventDefault()\n      Renderar.render(Comp, {\n         x: e.pageX,\n         y: e.pageY,\n         open: true,\n      })\n   }\n\n   onContextMenu.close = () => {\n      Renderar.unrender(Comp)\n   }\n\n   return onContextMenu\n}\n\nexport default useContextMenu"],"names":[],"mappings":";;;;;;;;;AAMA;;;AAGM;;;AAIG;AACA;AACG;AACH;;;AAoBS;AACA;AACH;AAMZ;AAEA;;AAEG;;;AAGG;AACF;AACJ;AAEA;AACG;AACH;AAEA;AACH;;"}

package/useContextMenu/index.d.ts

@@ -1,7 +1,7 @@
 import { TagComponentType } from '@xanui/core';
 import { MenuProps } from '../Menu/index.js';
 
-declare const useContextMenu: ({ children, onClosed, onClickOutside, ...props }: MenuProps) => {
+declare const useContextMenu: ({ children, onExited, onClickOutside, ...props }: MenuProps) => {
     (e: React.MouseEvent<TagComponentType, MouseEvent>): void;
     close(): void;
 };

package/useContextMenu/index.js

@@ -6,7 +6,7 @@ import { useRef, useState, useEffect } from 'react';
 import Menu from '../Menu/index.js';
 
 const useContextMenu = (_a) => {
-    var { children, onClosed, onClickOutside } = _a, props = __rest(_a, ["children", "onClosed", "onClickOutside"]);
+    var { children, onExited, onClickOutside } = _a, props = __rest(_a, ["children", "onExited", "onClickOutside"]);
     const Comp = ({ x, y }) => {
         const ref = useRef(null);
         const [target, setTarget] = useState();
@@ -16,7 +16,7 @@ const useContextMenu = (_a) => {
                 Renderar.unrender(Comp);
             };
         }, []);
-        return (jsxs(Fragment, { children: [jsx(Tag, { baseClass: "context-menu-target", ref: ref, position: "fixed", top: y, left: x, zIndex: 99999999999999, bgcolor: "background.primary", height: 0, width: 0 }), jsx(Menu, Object.assign({}, props, { target: target, onClickOutside: (e) => {
+        return (jsxs(Fragment, { children: [jsx(Tag, { baseClass: "context-menu-target", ref: ref, position: "fixed", top: y, left: x, zIndex: 99999999999999, bgcolor: "surface.main", height: 0, width: 0 }), jsx(Menu, Object.assign({}, props, { target: target, onClickOutside: (e) => {
                         Renderar.unrender(Comp);
                         onClickOutside && onClickOutside(e);
                     }, children: children }))] }));