@xanui/ui 1.1.68 → 1.2.0

package/Toast/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\n\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":";;;;;;;;AAuBA;;;;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 } 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;;"}

package/Tooltip/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["\"use client\";\n\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":";;;;;;;;AAeA;;;;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 ?? \"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;;"}

package/Tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["\"use client\";\n\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":";;;;;;AAeA;;;;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 ?? \"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;;"}

package/ViewBox/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var tslib = require('tslib');

package/ViewBox/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/ViewBox/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react'\nimport Scrollbar, { ScrollbarProps } from '../Scrollbar'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type ViewBoxProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    startContent?: useBreakpointPropsType<ReactElement>;\n    endContent?: useBreakpointPropsType<ReactElement>;\n    horizental?: useBreakpointPropsType<boolean>;\n    slotProps?: {\n        scrollbar?: Omit<ScrollbarProps, 'children'>;\n    }\n}\n\n\nconst ViewBox = React.forwardRef(({ children, ...rest }: ViewBoxProps, ref?: any) => {\n    let [{ startContent, endContent, slotProps, horizental, ...props }] = useInterface<any>(\"ViewBox\", rest, {})\n    const _p: any = {}\n    if (startContent) _p.startContent = startContent\n    if (endContent) _p.endContent = endContent\n    if (horizental) _p.horizental = horizental\n    const p: any = useBreakpointProps(_p)\n    startContent = p.startContent\n    endContent = p.endContent\n    horizental = p.horizental\n\n    return (\n        <Tag\n            {...props}\n            sxr={{\n                display: \"flex\",\n                justifyContent: \"space-between\",\n                flexDirection: horizental ? \"row\" : \"column\"\n            }}\n            baseClass='viewbox'\n            ref={ref}\n        >\n            {startContent && <Tag baseClass='viewbox-start-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{startContent}</Tag>}\n            <Scrollbar\n                {...slotProps?.scrollbar}\n                className='viewbox-content'\n                style={{\n                    flex: 1,\n                    display: \"flex\",\n                    flexDirection: horizental ? \"row\" : \"column\",\n                    ...(slotProps?.scrollbar?.style || {})\n                }}\n            >\n                {children}\n            </Scrollbar>\n            {endContent && <Tag baseClass='viewbox-end-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{endContent}</Tag>}\n        </Tag>\n    )\n})\n\nexport default ViewBox\n"],"names":["__rest","useInterface","useBreakpointProps","_jsxs","Tag","_jsx","Scrollbar"],"mappings":";;;;;;;;AAgBA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAmC,EAAE,GAAS,KAAI;;AAAlD,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACjD,IAAI,CAAA,EAAA,CAAA,GAAkEC,iBAAY,CAAM,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC,EAAvG,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAA,GAAA,EAAY,EAAP,KAAK,GAAAD,YAAA,CAAA,EAAA,EAA3D,CAAA,cAAA,EAAA,YAAA,EAAA,WAAA,EAAA,YAAA,CAA6D,CAA0C;IAC5G,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,YAAY;AAAE,QAAA,EAAE,CAAC,YAAY,GAAG,YAAY;AAChD,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,YAAY,GAAG,CAAC,CAAC,YAAY;AAC7B,IAAA,UAAU,GAAG,CAAC,CAAC,UAAU;AACzB,IAAA,UAAU,GAAG,CAAC,CAAC,UAAU;AAEzB,IAAA,QACIC,eAAA,CAACC,QAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,cAAc,EAAE,eAAe;YAC/B,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG;SACvC,EACD,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAEP,YAAY,IAAIC,cAAA,CAACD,QAAG,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,QAAA,EAAG,YAAY,EAAA,CAAO,EAClIC,cAAA,CAACC,KAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACF,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,EAAA,EACxB,SAAS,EAAC,iBAAiB,EAC3B,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,GACxC,CAAA,MAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,KAAI,EAAE,EAAC,EAAA,QAAA,EAGzC,QAAQ,IACD,EACX,UAAU,IAAID,cAAA,CAACD,QAAG,EAAA,EAAC,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,QAAA,EAAG,UAAU,EAAA,CAAO,CAAA,EAAA,CAAA,CAC1H;AAEd,CAAC;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/ViewBox/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react'\nimport Scrollbar, { ScrollbarProps } from '../Scrollbar'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type ViewBoxProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    startContent?: useBreakpointPropsType<ReactElement>;\n    endContent?: useBreakpointPropsType<ReactElement>;\n    horizental?: useBreakpointPropsType<boolean>;\n    slotProps?: {\n        scrollbar?: Omit<ScrollbarProps, 'children'>;\n    }\n}\n\n\nconst ViewBox = React.forwardRef(({ children, ...rest }: ViewBoxProps, ref?: any) => {\n    let [{ startContent, endContent, slotProps, horizental, ...props }] = useInterface<any>(\"ViewBox\", rest, {})\n    const _p: any = {}\n    if (startContent) _p.startContent = startContent\n    if (endContent) _p.endContent = endContent\n    if (horizental) _p.horizental = horizental\n    const p: any = useBreakpointProps(_p)\n    startContent = p.startContent\n    endContent = p.endContent\n    horizental = p.horizental\n\n    return (\n        <Tag\n            {...props}\n            sxr={{\n                display: \"flex\",\n                justifyContent: \"space-between\",\n                flexDirection: horizental ? \"row\" : \"column\"\n            }}\n            baseClass='viewbox'\n            ref={ref}\n        >\n            {startContent && <Tag baseClass='viewbox-start-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{startContent}</Tag>}\n            <Scrollbar\n                {...slotProps?.scrollbar}\n                className='viewbox-content'\n                style={{\n                    flex: 1,\n                    display: \"flex\",\n                    flexDirection: horizental ? \"row\" : \"column\",\n                    ...(slotProps?.scrollbar?.style || {})\n                }}\n            >\n                {children}\n            </Scrollbar>\n            {endContent && <Tag baseClass='viewbox-end-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{endContent}</Tag>}\n        </Tag>\n    )\n})\n\nexport default ViewBox\n"],"names":[],"mappings":";;;;;;;;;AAgBA;;AAAkC;;;AAG9B;AAAkB;AAClB;AAAgB;AAChB;AAAgB;AAChB;AACA;AACA;AACA;AAEA;AAIY;AACA;;;AAsBhB;;"}

package/ViewBox/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';

package/ViewBox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/ViewBox/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react'\nimport Scrollbar, { ScrollbarProps } from '../Scrollbar'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type ViewBoxProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    startContent?: useBreakpointPropsType<ReactElement>;\n    endContent?: useBreakpointPropsType<ReactElement>;\n    horizental?: useBreakpointPropsType<boolean>;\n    slotProps?: {\n        scrollbar?: Omit<ScrollbarProps, 'children'>;\n    }\n}\n\n\nconst ViewBox = React.forwardRef(({ children, ...rest }: ViewBoxProps, ref?: any) => {\n    let [{ startContent, endContent, slotProps, horizental, ...props }] = useInterface<any>(\"ViewBox\", rest, {})\n    const _p: any = {}\n    if (startContent) _p.startContent = startContent\n    if (endContent) _p.endContent = endContent\n    if (horizental) _p.horizental = horizental\n    const p: any = useBreakpointProps(_p)\n    startContent = p.startContent\n    endContent = p.endContent\n    horizental = p.horizental\n\n    return (\n        <Tag\n            {...props}\n            sxr={{\n                display: \"flex\",\n                justifyContent: \"space-between\",\n                flexDirection: horizental ? \"row\" : \"column\"\n            }}\n            baseClass='viewbox'\n            ref={ref}\n        >\n            {startContent && <Tag baseClass='viewbox-start-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{startContent}</Tag>}\n            <Scrollbar\n                {...slotProps?.scrollbar}\n                className='viewbox-content'\n                style={{\n                    flex: 1,\n                    display: \"flex\",\n                    flexDirection: horizental ? \"row\" : \"column\",\n                    ...(slotProps?.scrollbar?.style || {})\n                }}\n            >\n                {children}\n            </Scrollbar>\n            {endContent && <Tag baseClass='viewbox-end-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{endContent}</Tag>}\n        </Tag>\n    )\n})\n\nexport default ViewBox\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAgBA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAmC,EAAE,GAAS,KAAI;;AAAlD,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACjD,IAAI,CAAA,EAAA,CAAA,GAAkE,YAAY,CAAM,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC,EAAvG,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAA3D,CAAA,cAAA,EAAA,YAAA,EAAA,WAAA,EAAA,YAAA,CAA6D,CAA0C;IAC5G,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,YAAY;AAAE,QAAA,EAAE,CAAC,YAAY,GAAG,YAAY;AAChD,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,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,YAAY,GAAG,CAAC,CAAC,YAAY;AAC7B,IAAA,UAAU,GAAG,CAAC,CAAC,UAAU;AACzB,IAAA,UAAU,GAAG,CAAC,CAAC,UAAU;AAEzB,IAAA,QACIA,IAAA,CAAC,GAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,cAAc,EAAE,eAAe;YAC/B,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG;SACvC,EACD,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAEP,YAAY,IAAIC,GAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,QAAA,EAAG,YAAY,EAAA,CAAO,EAClIA,GAAA,CAAC,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACF,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,EAAA,EACxB,SAAS,EAAC,iBAAiB,EAC3B,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,GACxC,CAAA,MAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,KAAI,EAAE,EAAC,EAAA,QAAA,EAGzC,QAAQ,IACD,EACX,UAAU,IAAIA,GAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,QAAA,EAAG,UAAU,EAAA,CAAO,CAAA,EAAA,CAAA,CAC1H;AAEd,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/ViewBox/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react'\nimport Scrollbar, { ScrollbarProps } from '../Scrollbar'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type ViewBoxProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    startContent?: useBreakpointPropsType<ReactElement>;\n    endContent?: useBreakpointPropsType<ReactElement>;\n    horizental?: useBreakpointPropsType<boolean>;\n    slotProps?: {\n        scrollbar?: Omit<ScrollbarProps, 'children'>;\n    }\n}\n\n\nconst ViewBox = React.forwardRef(({ children, ...rest }: ViewBoxProps, ref?: any) => {\n    let [{ startContent, endContent, slotProps, horizental, ...props }] = useInterface<any>(\"ViewBox\", rest, {})\n    const _p: any = {}\n    if (startContent) _p.startContent = startContent\n    if (endContent) _p.endContent = endContent\n    if (horizental) _p.horizental = horizental\n    const p: any = useBreakpointProps(_p)\n    startContent = p.startContent\n    endContent = p.endContent\n    horizental = p.horizental\n\n    return (\n        <Tag\n            {...props}\n            sxr={{\n                display: \"flex\",\n                justifyContent: \"space-between\",\n                flexDirection: horizental ? \"row\" : \"column\"\n            }}\n            baseClass='viewbox'\n            ref={ref}\n        >\n            {startContent && <Tag baseClass='viewbox-start-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{startContent}</Tag>}\n            <Scrollbar\n                {...slotProps?.scrollbar}\n                className='viewbox-content'\n                style={{\n                    flex: 1,\n                    display: \"flex\",\n                    flexDirection: horizental ? \"row\" : \"column\",\n                    ...(slotProps?.scrollbar?.style || {})\n                }}\n            >\n                {children}\n            </Scrollbar>\n            {endContent && <Tag baseClass='viewbox-end-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{endContent}</Tag>}\n        </Tag>\n    )\n})\n\nexport default ViewBox\n"],"names":[],"mappings":";;;;;;;AAgBA;;AAAkC;;;AAG9B;AAAkB;AAClB;AAAgB;AAChB;AAAgB;AAChB;AACA;AACA;AACA;AAEA;AAIY;AACA;;;AAsBhB;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xanui/ui",
-  "version": "1.1.68",
+  "version": "1.2.0",
   "description": "Xanui - A React Component Library",
   "private": false,
   "dependencies": {

package/useBlurCss/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var React = require('react');

package/useBlurCss/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["import { 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":["useMemo","alpha"],"mappings":";;;;;AAGA,IAAI,EAAuB;AAE3B,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,IAA6B,KAAI;IAChE,OAAOA,aAAO,CAAC,MAAK;AACjB,QAAA,IAAI,WAAW,GAAG,EAAE,OAAO,EAAEC,UAAK,CAAC,SAAS,EAAE,IAAI,GAAG,GAAG,CAAC,EAAE;QAC3D,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,IAAI,KAAK,aAAa,EAAE;AAC1D,YAAA,OAAO,WAAW;QACrB;AACA,QAAA,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QACjE,OAAO,CAAC,CAAC,gBAAgB,CAAC,KAAK,SAAS,GAAG,EAAE,cAAc,EAAE,CAAA,KAAA,EAAQ,CAAC,IAAI,GAAG,GAAG,IAAI,EAAE,CAAA,GAAA,CAAK,EAAE,GAAG,WAAW;AAC9G,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AACb;;;;"}
+{"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;;"}

package/useBlurCss/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { useMemo } from 'react';
 import { alpha } from '@xanui/core';
 

package/useBlurCss/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["import { 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":";;;AAGA,IAAI,EAAuB;AAE3B,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,IAA6B,KAAI;IAChE,OAAO,OAAO,CAAC,MAAK;AACjB,QAAA,IAAI,WAAW,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,GAAG,GAAG,CAAC,EAAE;QAC3D,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,IAAI,KAAK,aAAa,EAAE;AAC1D,YAAA,OAAO,WAAW;QACrB;AACA,QAAA,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QACjE,OAAO,CAAC,CAAC,gBAAgB,CAAC,KAAK,SAAS,GAAG,EAAE,cAAc,EAAE,CAAA,KAAA,EAAQ,CAAC,IAAI,GAAG,GAAG,IAAI,EAAE,CAAA,GAAA,CAAK,EAAE,GAAG,WAAW;AAC9G,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AACb;;;;"}
+{"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;;"}

package/useContextMenu/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var tslib = require('tslib');

package/useContextMenu/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/useContextMenu/index.tsx"],"sourcesContent":["import { 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":["__rest","useRef","useState","useEffect","Renderar","_jsxs","_Fragment","_jsx","Tag","Menu"],"mappings":";;;;;;;;AAKA,MAAM,cAAc,GAAG,CAAC,EAA2D,KAAI;QAA/D,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,OAAuB,EAAlB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA9C,CAAA,UAAA,EAAA,UAAA,EAAA,gBAAA,CAAgD,CAAF;IAEnE,MAAM,IAAI,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAO,KAAI;AAC5B,QAAA,MAAM,GAAG,GAAGC,YAAM,CAAC,IAAI,CAAC;QACxB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGC,cAAQ,EAAO;QAE3CC,eAAS,CAAC,MAAK;AACZ,YAAA,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC;AACtB,YAAA,OAAO,MAAK;AACT,gBAAAC,aAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC1B,YAAA,CAAC;QACJ,CAAC,EAAE,EAAE,CAAC;QAEN,QACGC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,CACGC,cAAA,CAACC,QAAG,EAAA,EACD,SAAS,EAAC,qBAAqB,EAC/B,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,OAAO,EACjB,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,CAAC,EACP,MAAM,EAAE,cAAc,EACtB,OAAO,EAAC,oBAAoB,EAC5B,MAAM,EAAE,CAAC,EACT,KAAK,EAAE,CAAC,EAAA,CACT,EACFD,cAAA,CAACE,KAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACE,KAAK,EAAA,EACT,MAAM,EAAE,MAAO,EACf,cAAc,EAAE,CAAC,CAAC,KAAI;AACnB,wBAAAL,aAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC;AACvB,wBAAA,cAAc,IAAI,cAAc,CAAC,CAAC,CAAC;AACtC,oBAAA,CAAC,EAAA,QAAA,EAEA,QAAQ,EAAA,CAAA,CACL,CAAA,EAAA,CACP;AAET,IAAA,CAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,CAAiD,KAAI;QACzE,CAAC,CAAC,cAAc,EAAE;AAClB,QAAAA,aAAQ,CAAC,MAAM,CAAC,IAAI,EAAE;YACnB,CAAC,EAAE,CAAC,CAAC,KAAK;YACV,CAAC,EAAE,CAAC,CAAC,KAAK;AACV,YAAA,IAAI,EAAE,IAAI;AACZ,SAAA,CAAC;AACL,IAAA,CAAC;AAED,IAAA,aAAa,CAAC,KAAK,GAAG,MAAK;AACxB,QAAAA,aAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC1B,IAAA,CAAC;AAED,IAAA,OAAO,aAAa;AACvB;;;;"}
+{"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;;"}

package/useContextMenu/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { __rest } from 'tslib';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Renderar, Tag } from '@xanui/core';

package/useContextMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/useContextMenu/index.tsx"],"sourcesContent":["import { 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":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;AAKA,MAAM,cAAc,GAAG,CAAC,EAA2D,KAAI;QAA/D,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,OAAuB,EAAlB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA9C,CAAA,UAAA,EAAA,UAAA,EAAA,gBAAA,CAAgD,CAAF;IAEnE,MAAM,IAAI,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAO,KAAI;AAC5B,QAAA,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC;QACxB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAO;QAE3C,SAAS,CAAC,MAAK;AACZ,YAAA,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC;AACtB,YAAA,OAAO,MAAK;AACT,gBAAA,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC1B,YAAA,CAAC;QACJ,CAAC,EAAE,EAAE,CAAC;QAEN,QACGA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACGC,GAAA,CAAC,GAAG,EAAA,EACD,SAAS,EAAC,qBAAqB,EAC/B,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,OAAO,EACjB,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,CAAC,EACP,MAAM,EAAE,cAAc,EACtB,OAAO,EAAC,oBAAoB,EAC5B,MAAM,EAAE,CAAC,EACT,KAAK,EAAE,CAAC,EAAA,CACT,EACFA,GAAA,CAAC,IAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACE,KAAK,EAAA,EACT,MAAM,EAAE,MAAO,EACf,cAAc,EAAE,CAAC,CAAC,KAAI;AACnB,wBAAA,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC;AACvB,wBAAA,cAAc,IAAI,cAAc,CAAC,CAAC,CAAC;AACtC,oBAAA,CAAC,EAAA,QAAA,EAEA,QAAQ,EAAA,CAAA,CACL,CAAA,EAAA,CACP;AAET,IAAA,CAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,CAAiD,KAAI;QACzE,CAAC,CAAC,cAAc,EAAE;AAClB,QAAA,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE;YACnB,CAAC,EAAE,CAAC,CAAC,KAAK;YACV,CAAC,EAAE,CAAC,CAAC,KAAK;AACV,YAAA,IAAI,EAAE,IAAI;AACZ,SAAA,CAAC;AACL,IAAA,CAAC;AAED,IAAA,aAAa,CAAC,KAAK,GAAG,MAAK;AACxB,QAAA,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC1B,IAAA,CAAC;AAED,IAAA,OAAO,aAAa;AACvB;;;;"}
+{"version":3,"file":"index.js","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;;"}

package/useCorner/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 const useCorner = (type) => {

package/useCorner/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/useCorner/index.ts"],"sourcesContent":["\nexport type UseCornerTypes = \"square\" | \"rounded\" | \"circle\"\nconst useCorner = (type?: UseCornerTypes): object => {\n    switch (type) {\n        case 'square':\n            return {\n                radius: 0\n            }\n        case 'rounded':\n            return {\n                radius: 1\n            }\n        case 'circle':\n            return {\n                radius: 100\n            }\n    }\n    return {}\n}\n\nexport default useCorner"],"names":[],"mappings":";;AAEA,MAAM,SAAS,GAAG,CAAC,IAAqB,KAAY;IAChD,QAAQ,IAAI;AACR,QAAA,KAAK,QAAQ;YACT,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;AACL,QAAA,KAAK,SAAS;YACV,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;AACL,QAAA,KAAK,QAAQ;YACT,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;;AAET,IAAA,OAAO,EAAE;AACb;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/useCorner/index.ts"],"sourcesContent":["\"use client\"\nexport type UseCornerTypes = \"square\" | \"rounded\" | \"circle\"\nconst useCorner = (type?: UseCornerTypes): object => {\n    switch (type) {\n        case 'square':\n            return {\n                radius: 0\n            }\n        case 'rounded':\n            return {\n                radius: 1\n            }\n        case 'circle':\n            return {\n                radius: 100\n            }\n    }\n    return {}\n}\n\nexport default useCorner"],"names":[],"mappings":";;;AAEA;;AAEQ;;AAEQ;;AAER;;AAEQ;;AAER;;AAEQ;;;AAGZ;AACJ;;"}

package/useCorner/index.js

@@ -1,3 +1,4 @@
+"use client";
 const useCorner = (type) => {
     switch (type) {
         case 'square':

package/useCorner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/useCorner/index.ts"],"sourcesContent":["\nexport type UseCornerTypes = \"square\" | \"rounded\" | \"circle\"\nconst useCorner = (type?: UseCornerTypes): object => {\n    switch (type) {\n        case 'square':\n            return {\n                radius: 0\n            }\n        case 'rounded':\n            return {\n                radius: 1\n            }\n        case 'circle':\n            return {\n                radius: 100\n            }\n    }\n    return {}\n}\n\nexport default useCorner"],"names":[],"mappings":"AAEA,MAAM,SAAS,GAAG,CAAC,IAAqB,KAAY;IAChD,QAAQ,IAAI;AACR,QAAA,KAAK,QAAQ;YACT,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;AACL,QAAA,KAAK,SAAS;YACV,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;AACL,QAAA,KAAK,QAAQ;YACT,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;;AAET,IAAA,OAAO,EAAE;AACb;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/useCorner/index.ts"],"sourcesContent":["\"use client\"\nexport type UseCornerTypes = \"square\" | \"rounded\" | \"circle\"\nconst useCorner = (type?: UseCornerTypes): object => {\n    switch (type) {\n        case 'square':\n            return {\n                radius: 0\n            }\n        case 'rounded':\n            return {\n                radius: 1\n            }\n        case 'circle':\n            return {\n                radius: 100\n            }\n    }\n    return {}\n}\n\nexport default useCorner"],"names":[],"mappings":";AAEA;;AAEQ;;AAEQ;;AAER;;AAEQ;;AAER;;AAEQ;;;AAGZ;AACJ;;"}