@xanui/ui 1.2.5 → 1.2.6

package/Alert/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, UseTransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n    onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n    let [{\n        title,\n        variant,\n        icon,\n        color,\n        direction,\n        slotProps,\n        onClose,\n        ..._props\n    }] = useInterface<any>(\"Alert\", rest, {\n        variant: \"fill\"\n    })\n    color ??= \"default\"\n    direction ??= \"row\"\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (variant) _p.variant = variant\n    if (icon) _p.icon = icon\n    if (color) _p.color = color\n    if (direction) _p.direction = direction\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    variant = p.variant\n    icon = p.icon\n    color = p.color\n    direction = p.direction\n\n    let isRow = direction === 'row'\n\n\n    const template = useColorTemplate(color, variant)\n\n    let iconsx = {\n        fontSize: isRow ? 22 : 40,\n        color: color === 'default' ? \"text.primary\" : template.primary.color\n    }\n\n    const icons: any = {\n        \"info\": <InfoIcon sx={iconsx} />,\n        \"warning\": <WarningIcon sx={iconsx} />,\n        \"success\": <SuccessIcon sx={iconsx} />,\n        \"danger\": <ErrorIcon sx={iconsx} />\n    }\n\n    let _icon = icons[icon] || icons[color]\n\n    return (\n        <Tag\n            {..._props}\n            baseClass=\"alert\"\n            sxr={{\n                justifyContent: \"flex-start\",\n                position: \"relative\",\n                radius: 1,\n                px: isRow ? (_icon ? .5 : 2) : 3,\n                py: isRow ? .5 : 3,\n                flexDirection: \"column\",\n                display: 'flex',\n                ..._props?.sx\n            }}\n            {...template.primary}\n        >\n            {\n                onClose && <IconButton\n                    color={color}\n                    variant={variant === 'fill' ? \"fill\" : \"text\"}\n                    size={25}\n                    sx={{\n                        position: \"absolute\",\n                        top: 5,\n                        right: 5\n                    }}\n                    onClick={onClose}\n                    className=\"alert-close-button\"\n                >\n                    <IconClose fontSize={18} />\n                </IconButton>\n            }\n            <Tag\n                sx={{\n                    display: \"flex\",\n                    gap: 1,\n                    flexDirection: direction,\n                    alignItems: isRow ? \"flex-start\" : \"center\"\n                }}\n                baseClass=\"alert-container\"\n            >\n                {\n                    _icon && <Tag\n                        baseClass=\"alert-icon\"\n                        sxr={{\n                            display: \"flex\",\n                            alignItems: \"center\",\n                            justifyContent: \"center\",\n                            p: isRow ? .5 : 0,\n                            \"& svg\": {\n                                color: template.primary.color\n                            }\n                        }}\n                    >\n                        {_icon}\n                    </Tag>\n                }\n                <Tag\n                    baseClass=\"alert-content\"\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"column\",\n                        flex: 1,\n                        color: template.primary.color,\n                        textAlign: isRow ? \"left\" : \"center\",\n                        gap: isRow ? 0 : 1,\n                        width: \"100%\"\n                    }}\n                >\n                    {title && <>\n                        {\n                            isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n                                className=\"alert-titles\"\n                                variant=\"text\"\n                                sx={{\n                                    fontWeight: 500,\n                                    color: template.primary.color\n                                }}\n                            >{title}</Text>\n                        }\n                    </>}\n                    <Tag\n                        sxr={{\n                            font: \"button\",\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Tag>\n            </Tag>\n        </Tag>\n    )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n    open: boolean;\n    loading: boolean;\n    content: string | ReactElement,\n    size?: \"small\" | \"medium\" | \"large\" | number;\n    closeButton?: boolean;\n    clickOutsideToClose?: boolean;\n    okButtonText?: string;\n    cancelButtonText?: string;\n    hideOkButton?: boolean;\n    hideCancelButton?: boolean;\n    buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n    variant?: \"text\" | \"fill\"\n    onConfirm?: () => Promise<void> | void;\n    onCancel?: () => Promise<void> | void;\n    transition?: UseTransitionVariantTypes;\n    blurMode?: ModalProps['blurMode'];\n    slotProps?: {\n        modal?: Omit<ModalProps, 'open' | \"children\">;\n        okButton?: Omit<ButtonProps, \"children\">;\n        closeButton?: Omit<ButtonProps, \"children\">;\n    }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n    let {\n        open,\n        loading,\n        content,\n        size,\n        color,\n        direction,\n        variant,\n        closeButton,\n        clickOutsideToClose,\n        okButtonText,\n        cancelButtonText,\n        hideOkButton,\n        hideCancelButton,\n        buttonPlacement,\n        onConfirm,\n        onCancel,\n        transition,\n        blurMode,\n        slotProps,\n        ...rest\n    } = props\n\n    hideOkButton ??= false\n    hideCancelButton ??= false\n\n    size ??= \"small\"\n    color ??= 'default'\n    variant ??= \"text\"\n    direction ??= \"column\"\n    buttonPlacement ??= \"end\"\n    let sx: any = {};\n\n    switch (buttonPlacement) {\n        case \"start\":\n            sx.justifyContent = 'flex-start'\n            break;\n        case \"end\":\n            sx.justifyContent = 'flex-end'\n            break;\n        case \"between\":\n            sx.justifyContent = 'space-between'\n            break;\n        case \"full\":\n            sx = {\n                \"& button\": {\n                    flex: 1\n                }\n            }\n            break;\n    }\n\n    let sizes: any = {\n        small: 320,\n        medium: 400,\n        large: 600\n    }\n\n    let okcolor = color\n    let closecolor = color\n    if (color === 'default') {\n        okcolor = 'brand'\n        closecolor = 'default'\n        variant = 'text'\n    } else {\n        if (variant === 'fill') {\n            okcolor = 'default'\n            closecolor = 'default'\n        } else {\n            okcolor = color\n            closecolor = 'default'\n        }\n    }\n\n    return (<Modal\n        open={open}\n        {...slotProps?.modal}\n        size={sizes[size] || size}\n        blur={40}\n        blurMode={blurMode || \"transparent\"}\n        transition={transition || \"zoom\"}\n        onClickOutside={async () => {\n            if (clickOutsideToClose && !loading) {\n                onCancel && await onCancel()\n            }\n        }}\n    >\n        <Alert\n            direction={direction}\n            sx={{\n                px: 2,\n                py: 1,\n                pt: direction === 'row' ? 1 : 2\n            }}\n            color={color}\n            variant={variant}\n            onClose={closeButton ? close : undefined}\n            {...rest}\n        >\n            {content}\n            <Tag\n                sxr={{\n                    display: \"flex\",\n                    gap: 1,\n                    pt: 4,\n                    flexDirection: \"row\",\n                    ...sx,\n                }}\n            >\n                {!hideCancelButton && <Button\n                    disabled={loading}\n                    color={closecolor}\n                    variant=\"fill\"\n                    {...slotProps?.closeButton}\n                    onClick={async () => {\n                        onCancel && await onCancel()\n                    }}\n                >{cancelButtonText || \"Close\"}</Button>}\n                <Button\n                    loading={loading}\n                    color={okcolor}\n                    variant=\"fill\"\n                    {...slotProps?.okButton}\n\n                    onClick={async () => {\n                        onConfirm && await onConfirm()\n                    }}\n                >{okButtonText || \"OK\"}</Button>\n            </Tag>\n        </Alert>\n    </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" | \"loading\">) => {\n    const Inst = (_props: any) => <ConfirmAlert {..._props} />\n    const confirm = Renderar.render(Inst as any, {\n        ...props,\n        open: true,\n        loading: false,\n        onConfirm: async () => {\n            if (onConfirm) {\n                confirm.updateProps({ loading: true })\n                if (onConfirm) await onConfirm()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        onCancel: async () => {\n            if (onCancel) {\n                confirm.updateProps({ loading: true })\n                await onCancel()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        slotProps: {\n            ...props.slotProps,\n            modal: {\n                ...props.slotProps?.modal,\n                onClosed: () => {\n                    confirm.unrender()\n                    if (props?.slotProps?.modal?.onClosed) {\n                        props.slotProps?.modal?.onClosed()\n                    }\n                },\n            }\n        },\n    })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGA;AACH;AAQe;AACA;;AAOR;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;AACI;;;;AAQY;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, TransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n    onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n    let [{\n        title,\n        variant,\n        icon,\n        color,\n        direction,\n        slotProps,\n        onClose,\n        ..._props\n    }] = useInterface<any>(\"Alert\", rest, {\n        variant: \"fill\"\n    })\n    color ??= \"default\"\n    direction ??= \"row\"\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (variant) _p.variant = variant\n    if (icon) _p.icon = icon\n    if (color) _p.color = color\n    if (direction) _p.direction = direction\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    variant = p.variant\n    icon = p.icon\n    color = p.color\n    direction = p.direction\n\n    let isRow = direction === 'row'\n\n\n    const template = useColorTemplate(color, variant)\n\n    let iconsx = {\n        fontSize: isRow ? 22 : 40,\n        color: color === 'default' ? \"text.primary\" : template.primary.color\n    }\n\n    const icons: any = {\n        \"info\": <InfoIcon sx={iconsx} />,\n        \"warning\": <WarningIcon sx={iconsx} />,\n        \"success\": <SuccessIcon sx={iconsx} />,\n        \"danger\": <ErrorIcon sx={iconsx} />\n    }\n\n    let _icon = icons[icon] || icons[color]\n\n    return (\n        <Tag\n            {..._props}\n            baseClass=\"alert\"\n            sxr={{\n                justifyContent: \"flex-start\",\n                position: \"relative\",\n                radius: 1,\n                px: isRow ? (_icon ? .5 : 2) : 3,\n                py: isRow ? .5 : 3,\n                flexDirection: \"column\",\n                display: 'flex',\n                ..._props?.sx\n            }}\n            {...template.primary}\n        >\n            {\n                onClose && <IconButton\n                    color={color}\n                    variant={variant === 'fill' ? \"fill\" : \"text\"}\n                    size={25}\n                    sx={{\n                        position: \"absolute\",\n                        top: 5,\n                        right: 5\n                    }}\n                    onClick={onClose}\n                    className=\"alert-close-button\"\n                >\n                    <IconClose fontSize={18} />\n                </IconButton>\n            }\n            <Tag\n                sx={{\n                    display: \"flex\",\n                    gap: 1,\n                    flexDirection: direction,\n                    alignItems: isRow ? \"flex-start\" : \"center\"\n                }}\n                baseClass=\"alert-container\"\n            >\n                {\n                    _icon && <Tag\n                        baseClass=\"alert-icon\"\n                        sxr={{\n                            display: \"flex\",\n                            alignItems: \"center\",\n                            justifyContent: \"center\",\n                            p: isRow ? .5 : 0,\n                            \"& svg\": {\n                                color: template.primary.color\n                            }\n                        }}\n                    >\n                        {_icon}\n                    </Tag>\n                }\n                <Tag\n                    baseClass=\"alert-content\"\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"column\",\n                        flex: 1,\n                        color: template.primary.color,\n                        textAlign: isRow ? \"left\" : \"center\",\n                        gap: isRow ? 0 : 1,\n                        width: \"100%\"\n                    }}\n                >\n                    {title && <>\n                        {\n                            isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n                                className=\"alert-titles\"\n                                variant=\"text\"\n                                sx={{\n                                    fontWeight: 500,\n                                    color: template.primary.color\n                                }}\n                            >{title}</Text>\n                        }\n                    </>}\n                    <Tag\n                        sxr={{\n                            font: \"button\",\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Tag>\n            </Tag>\n        </Tag>\n    )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n    open: boolean;\n    loading: boolean;\n    content: string | ReactElement,\n    size?: \"small\" | \"medium\" | \"large\" | number;\n    closeButton?: boolean;\n    clickOutsideToClose?: boolean;\n    okButtonText?: string;\n    cancelButtonText?: string;\n    hideOkButton?: boolean;\n    hideCancelButton?: boolean;\n    buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n    variant?: \"text\" | \"fill\"\n    onConfirm?: () => Promise<void> | void;\n    onCancel?: () => Promise<void> | void;\n    transition?: TransitionVariantTypes;\n    blurMode?: ModalProps['blurMode'];\n    slotProps?: {\n        modal?: Omit<ModalProps, 'open' | \"children\">;\n        okButton?: Omit<ButtonProps, \"children\">;\n        closeButton?: Omit<ButtonProps, \"children\">;\n    }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n    let {\n        open,\n        loading,\n        content,\n        size,\n        color,\n        direction,\n        variant,\n        closeButton,\n        clickOutsideToClose,\n        okButtonText,\n        cancelButtonText,\n        hideOkButton,\n        hideCancelButton,\n        buttonPlacement,\n        onConfirm,\n        onCancel,\n        transition,\n        blurMode,\n        slotProps,\n        ...rest\n    } = props\n\n    hideOkButton ??= false\n    hideCancelButton ??= false\n\n    size ??= \"small\"\n    color ??= 'default'\n    variant ??= \"text\"\n    direction ??= \"column\"\n    buttonPlacement ??= \"end\"\n    let sx: any = {};\n\n    switch (buttonPlacement) {\n        case \"start\":\n            sx.justifyContent = 'flex-start'\n            break;\n        case \"end\":\n            sx.justifyContent = 'flex-end'\n            break;\n        case \"between\":\n            sx.justifyContent = 'space-between'\n            break;\n        case \"full\":\n            sx = {\n                \"& button\": {\n                    flex: 1\n                }\n            }\n            break;\n    }\n\n    let sizes: any = {\n        small: 320,\n        medium: 400,\n        large: 600\n    }\n\n    let okcolor = color\n    let closecolor = color\n    if (color === 'default') {\n        okcolor = 'brand'\n        closecolor = 'default'\n        variant = 'text'\n    } else {\n        if (variant === 'fill') {\n            okcolor = 'default'\n            closecolor = 'default'\n        } else {\n            okcolor = color\n            closecolor = 'default'\n        }\n    }\n\n    return (<Modal\n        open={open}\n        {...slotProps?.modal}\n        size={sizes[size] || size}\n        blur={40}\n        blurMode={blurMode || \"transparent\"}\n        transition={transition || \"zoom\"}\n        onClickOutside={async () => {\n            if (clickOutsideToClose && !loading) {\n                onCancel && await onCancel()\n            }\n        }}\n    >\n        <Alert\n            direction={direction}\n            sx={{\n                px: 2,\n                py: 1,\n                pt: direction === 'row' ? 1 : 2\n            }}\n            color={color}\n            variant={variant}\n            onClose={closeButton ? close : undefined}\n            {...rest}\n        >\n            {content}\n            <Tag\n                sxr={{\n                    display: \"flex\",\n                    gap: 1,\n                    pt: 4,\n                    flexDirection: \"row\",\n                    ...sx,\n                }}\n            >\n                {!hideCancelButton && <Button\n                    disabled={loading}\n                    color={closecolor}\n                    variant=\"fill\"\n                    {...slotProps?.closeButton}\n                    onClick={async () => {\n                        onCancel && await onCancel()\n                    }}\n                >{cancelButtonText || \"Close\"}</Button>}\n                <Button\n                    loading={loading}\n                    color={okcolor}\n                    variant=\"fill\"\n                    {...slotProps?.okButton}\n\n                    onClick={async () => {\n                        onConfirm && await onConfirm()\n                    }}\n                >{okButtonText || \"OK\"}</Button>\n            </Tag>\n        </Alert>\n    </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" | \"loading\">) => {\n    const Inst = (_props: any) => <ConfirmAlert {..._props} />\n    const confirm = Renderar.render(Inst as any, {\n        ...props,\n        open: true,\n        loading: false,\n        onConfirm: async () => {\n            if (onConfirm) {\n                confirm.updateProps({ loading: true })\n                if (onConfirm) await onConfirm()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        onCancel: async () => {\n            if (onCancel) {\n                confirm.updateProps({ loading: true })\n                await onCancel()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        slotProps: {\n            ...props.slotProps,\n            modal: {\n                ...props.slotProps?.modal,\n                onClosed: () => {\n                    confirm.unrender()\n                    if (props?.slotProps?.modal?.onClosed) {\n                        props.slotProps?.modal?.onClosed()\n                    }\n                },\n            }\n        },\n    })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGA;AACH;AAQe;AACA;;AAOR;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;AACI;;;;AAQY;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}

package/Alert/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { TagProps, useBreakpointPropsType, UseColorTemplateType, UseColorTemplateColor, UseTransitionVariantTypes } from '@xanui/core';
+import { TagProps, useBreakpointPropsType, UseColorTemplateType, UseColorTemplateColor, TransitionVariantTypes } from '@xanui/core';
 import React, { ReactElement } from 'react';
 import { ModalProps } from '../Modal/index.js';
 import { ButtonProps } from '../Button/index.js';
@@ -31,7 +31,7 @@ type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | "
     variant?: "text" | "fill";
     onConfirm?: () => Promise<void> | void;
     onCancel?: () => Promise<void> | void;
-    transition?: UseTransitionVariantTypes;
+    transition?: TransitionVariantTypes;
     blurMode?: ModalProps['blurMode'];
     slotProps?: {
         modal?: Omit<ModalProps, 'open' | "children">;

package/Alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, UseTransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n    onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n    let [{\n        title,\n        variant,\n        icon,\n        color,\n        direction,\n        slotProps,\n        onClose,\n        ..._props\n    }] = useInterface<any>(\"Alert\", rest, {\n        variant: \"fill\"\n    })\n    color ??= \"default\"\n    direction ??= \"row\"\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (variant) _p.variant = variant\n    if (icon) _p.icon = icon\n    if (color) _p.color = color\n    if (direction) _p.direction = direction\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    variant = p.variant\n    icon = p.icon\n    color = p.color\n    direction = p.direction\n\n    let isRow = direction === 'row'\n\n\n    const template = useColorTemplate(color, variant)\n\n    let iconsx = {\n        fontSize: isRow ? 22 : 40,\n        color: color === 'default' ? \"text.primary\" : template.primary.color\n    }\n\n    const icons: any = {\n        \"info\": <InfoIcon sx={iconsx} />,\n        \"warning\": <WarningIcon sx={iconsx} />,\n        \"success\": <SuccessIcon sx={iconsx} />,\n        \"danger\": <ErrorIcon sx={iconsx} />\n    }\n\n    let _icon = icons[icon] || icons[color]\n\n    return (\n        <Tag\n            {..._props}\n            baseClass=\"alert\"\n            sxr={{\n                justifyContent: \"flex-start\",\n                position: \"relative\",\n                radius: 1,\n                px: isRow ? (_icon ? .5 : 2) : 3,\n                py: isRow ? .5 : 3,\n                flexDirection: \"column\",\n                display: 'flex',\n                ..._props?.sx\n            }}\n            {...template.primary}\n        >\n            {\n                onClose && <IconButton\n                    color={color}\n                    variant={variant === 'fill' ? \"fill\" : \"text\"}\n                    size={25}\n                    sx={{\n                        position: \"absolute\",\n                        top: 5,\n                        right: 5\n                    }}\n                    onClick={onClose}\n                    className=\"alert-close-button\"\n                >\n                    <IconClose fontSize={18} />\n                </IconButton>\n            }\n            <Tag\n                sx={{\n                    display: \"flex\",\n                    gap: 1,\n                    flexDirection: direction,\n                    alignItems: isRow ? \"flex-start\" : \"center\"\n                }}\n                baseClass=\"alert-container\"\n            >\n                {\n                    _icon && <Tag\n                        baseClass=\"alert-icon\"\n                        sxr={{\n                            display: \"flex\",\n                            alignItems: \"center\",\n                            justifyContent: \"center\",\n                            p: isRow ? .5 : 0,\n                            \"& svg\": {\n                                color: template.primary.color\n                            }\n                        }}\n                    >\n                        {_icon}\n                    </Tag>\n                }\n                <Tag\n                    baseClass=\"alert-content\"\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"column\",\n                        flex: 1,\n                        color: template.primary.color,\n                        textAlign: isRow ? \"left\" : \"center\",\n                        gap: isRow ? 0 : 1,\n                        width: \"100%\"\n                    }}\n                >\n                    {title && <>\n                        {\n                            isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n                                className=\"alert-titles\"\n                                variant=\"text\"\n                                sx={{\n                                    fontWeight: 500,\n                                    color: template.primary.color\n                                }}\n                            >{title}</Text>\n                        }\n                    </>}\n                    <Tag\n                        sxr={{\n                            font: \"button\",\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Tag>\n            </Tag>\n        </Tag>\n    )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n    open: boolean;\n    loading: boolean;\n    content: string | ReactElement,\n    size?: \"small\" | \"medium\" | \"large\" | number;\n    closeButton?: boolean;\n    clickOutsideToClose?: boolean;\n    okButtonText?: string;\n    cancelButtonText?: string;\n    hideOkButton?: boolean;\n    hideCancelButton?: boolean;\n    buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n    variant?: \"text\" | \"fill\"\n    onConfirm?: () => Promise<void> | void;\n    onCancel?: () => Promise<void> | void;\n    transition?: UseTransitionVariantTypes;\n    blurMode?: ModalProps['blurMode'];\n    slotProps?: {\n        modal?: Omit<ModalProps, 'open' | \"children\">;\n        okButton?: Omit<ButtonProps, \"children\">;\n        closeButton?: Omit<ButtonProps, \"children\">;\n    }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n    let {\n        open,\n        loading,\n        content,\n        size,\n        color,\n        direction,\n        variant,\n        closeButton,\n        clickOutsideToClose,\n        okButtonText,\n        cancelButtonText,\n        hideOkButton,\n        hideCancelButton,\n        buttonPlacement,\n        onConfirm,\n        onCancel,\n        transition,\n        blurMode,\n        slotProps,\n        ...rest\n    } = props\n\n    hideOkButton ??= false\n    hideCancelButton ??= false\n\n    size ??= \"small\"\n    color ??= 'default'\n    variant ??= \"text\"\n    direction ??= \"column\"\n    buttonPlacement ??= \"end\"\n    let sx: any = {};\n\n    switch (buttonPlacement) {\n        case \"start\":\n            sx.justifyContent = 'flex-start'\n            break;\n        case \"end\":\n            sx.justifyContent = 'flex-end'\n            break;\n        case \"between\":\n            sx.justifyContent = 'space-between'\n            break;\n        case \"full\":\n            sx = {\n                \"& button\": {\n                    flex: 1\n                }\n            }\n            break;\n    }\n\n    let sizes: any = {\n        small: 320,\n        medium: 400,\n        large: 600\n    }\n\n    let okcolor = color\n    let closecolor = color\n    if (color === 'default') {\n        okcolor = 'brand'\n        closecolor = 'default'\n        variant = 'text'\n    } else {\n        if (variant === 'fill') {\n            okcolor = 'default'\n            closecolor = 'default'\n        } else {\n            okcolor = color\n            closecolor = 'default'\n        }\n    }\n\n    return (<Modal\n        open={open}\n        {...slotProps?.modal}\n        size={sizes[size] || size}\n        blur={40}\n        blurMode={blurMode || \"transparent\"}\n        transition={transition || \"zoom\"}\n        onClickOutside={async () => {\n            if (clickOutsideToClose && !loading) {\n                onCancel && await onCancel()\n            }\n        }}\n    >\n        <Alert\n            direction={direction}\n            sx={{\n                px: 2,\n                py: 1,\n                pt: direction === 'row' ? 1 : 2\n            }}\n            color={color}\n            variant={variant}\n            onClose={closeButton ? close : undefined}\n            {...rest}\n        >\n            {content}\n            <Tag\n                sxr={{\n                    display: \"flex\",\n                    gap: 1,\n                    pt: 4,\n                    flexDirection: \"row\",\n                    ...sx,\n                }}\n            >\n                {!hideCancelButton && <Button\n                    disabled={loading}\n                    color={closecolor}\n                    variant=\"fill\"\n                    {...slotProps?.closeButton}\n                    onClick={async () => {\n                        onCancel && await onCancel()\n                    }}\n                >{cancelButtonText || \"Close\"}</Button>}\n                <Button\n                    loading={loading}\n                    color={okcolor}\n                    variant=\"fill\"\n                    {...slotProps?.okButton}\n\n                    onClick={async () => {\n                        onConfirm && await onConfirm()\n                    }}\n                >{okButtonText || \"OK\"}</Button>\n            </Tag>\n        </Alert>\n    </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" | \"loading\">) => {\n    const Inst = (_props: any) => <ConfirmAlert {..._props} />\n    const confirm = Renderar.render(Inst as any, {\n        ...props,\n        open: true,\n        loading: false,\n        onConfirm: async () => {\n            if (onConfirm) {\n                confirm.updateProps({ loading: true })\n                if (onConfirm) await onConfirm()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        onCancel: async () => {\n            if (onCancel) {\n                confirm.updateProps({ loading: true })\n                await onCancel()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        slotProps: {\n            ...props.slotProps,\n            modal: {\n                ...props.slotProps?.modal,\n                onClosed: () => {\n                    confirm.unrender()\n                    if (props?.slotProps?.modal?.onClosed) {\n                        props.slotProps?.modal?.onClosed()\n                    }\n                },\n            }\n        },\n    })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGA;AACH;AAQe;AACA;;AAOR;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;AACI;;;;AAQY;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, TransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n    onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n    let [{\n        title,\n        variant,\n        icon,\n        color,\n        direction,\n        slotProps,\n        onClose,\n        ..._props\n    }] = useInterface<any>(\"Alert\", rest, {\n        variant: \"fill\"\n    })\n    color ??= \"default\"\n    direction ??= \"row\"\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (variant) _p.variant = variant\n    if (icon) _p.icon = icon\n    if (color) _p.color = color\n    if (direction) _p.direction = direction\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    variant = p.variant\n    icon = p.icon\n    color = p.color\n    direction = p.direction\n\n    let isRow = direction === 'row'\n\n\n    const template = useColorTemplate(color, variant)\n\n    let iconsx = {\n        fontSize: isRow ? 22 : 40,\n        color: color === 'default' ? \"text.primary\" : template.primary.color\n    }\n\n    const icons: any = {\n        \"info\": <InfoIcon sx={iconsx} />,\n        \"warning\": <WarningIcon sx={iconsx} />,\n        \"success\": <SuccessIcon sx={iconsx} />,\n        \"danger\": <ErrorIcon sx={iconsx} />\n    }\n\n    let _icon = icons[icon] || icons[color]\n\n    return (\n        <Tag\n            {..._props}\n            baseClass=\"alert\"\n            sxr={{\n                justifyContent: \"flex-start\",\n                position: \"relative\",\n                radius: 1,\n                px: isRow ? (_icon ? .5 : 2) : 3,\n                py: isRow ? .5 : 3,\n                flexDirection: \"column\",\n                display: 'flex',\n                ..._props?.sx\n            }}\n            {...template.primary}\n        >\n            {\n                onClose && <IconButton\n                    color={color}\n                    variant={variant === 'fill' ? \"fill\" : \"text\"}\n                    size={25}\n                    sx={{\n                        position: \"absolute\",\n                        top: 5,\n                        right: 5\n                    }}\n                    onClick={onClose}\n                    className=\"alert-close-button\"\n                >\n                    <IconClose fontSize={18} />\n                </IconButton>\n            }\n            <Tag\n                sx={{\n                    display: \"flex\",\n                    gap: 1,\n                    flexDirection: direction,\n                    alignItems: isRow ? \"flex-start\" : \"center\"\n                }}\n                baseClass=\"alert-container\"\n            >\n                {\n                    _icon && <Tag\n                        baseClass=\"alert-icon\"\n                        sxr={{\n                            display: \"flex\",\n                            alignItems: \"center\",\n                            justifyContent: \"center\",\n                            p: isRow ? .5 : 0,\n                            \"& svg\": {\n                                color: template.primary.color\n                            }\n                        }}\n                    >\n                        {_icon}\n                    </Tag>\n                }\n                <Tag\n                    baseClass=\"alert-content\"\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"column\",\n                        flex: 1,\n                        color: template.primary.color,\n                        textAlign: isRow ? \"left\" : \"center\",\n                        gap: isRow ? 0 : 1,\n                        width: \"100%\"\n                    }}\n                >\n                    {title && <>\n                        {\n                            isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n                                className=\"alert-titles\"\n                                variant=\"text\"\n                                sx={{\n                                    fontWeight: 500,\n                                    color: template.primary.color\n                                }}\n                            >{title}</Text>\n                        }\n                    </>}\n                    <Tag\n                        sxr={{\n                            font: \"button\",\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Tag>\n            </Tag>\n        </Tag>\n    )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n    open: boolean;\n    loading: boolean;\n    content: string | ReactElement,\n    size?: \"small\" | \"medium\" | \"large\" | number;\n    closeButton?: boolean;\n    clickOutsideToClose?: boolean;\n    okButtonText?: string;\n    cancelButtonText?: string;\n    hideOkButton?: boolean;\n    hideCancelButton?: boolean;\n    buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n    variant?: \"text\" | \"fill\"\n    onConfirm?: () => Promise<void> | void;\n    onCancel?: () => Promise<void> | void;\n    transition?: TransitionVariantTypes;\n    blurMode?: ModalProps['blurMode'];\n    slotProps?: {\n        modal?: Omit<ModalProps, 'open' | \"children\">;\n        okButton?: Omit<ButtonProps, \"children\">;\n        closeButton?: Omit<ButtonProps, \"children\">;\n    }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n    let {\n        open,\n        loading,\n        content,\n        size,\n        color,\n        direction,\n        variant,\n        closeButton,\n        clickOutsideToClose,\n        okButtonText,\n        cancelButtonText,\n        hideOkButton,\n        hideCancelButton,\n        buttonPlacement,\n        onConfirm,\n        onCancel,\n        transition,\n        blurMode,\n        slotProps,\n        ...rest\n    } = props\n\n    hideOkButton ??= false\n    hideCancelButton ??= false\n\n    size ??= \"small\"\n    color ??= 'default'\n    variant ??= \"text\"\n    direction ??= \"column\"\n    buttonPlacement ??= \"end\"\n    let sx: any = {};\n\n    switch (buttonPlacement) {\n        case \"start\":\n            sx.justifyContent = 'flex-start'\n            break;\n        case \"end\":\n            sx.justifyContent = 'flex-end'\n            break;\n        case \"between\":\n            sx.justifyContent = 'space-between'\n            break;\n        case \"full\":\n            sx = {\n                \"& button\": {\n                    flex: 1\n                }\n            }\n            break;\n    }\n\n    let sizes: any = {\n        small: 320,\n        medium: 400,\n        large: 600\n    }\n\n    let okcolor = color\n    let closecolor = color\n    if (color === 'default') {\n        okcolor = 'brand'\n        closecolor = 'default'\n        variant = 'text'\n    } else {\n        if (variant === 'fill') {\n            okcolor = 'default'\n            closecolor = 'default'\n        } else {\n            okcolor = color\n            closecolor = 'default'\n        }\n    }\n\n    return (<Modal\n        open={open}\n        {...slotProps?.modal}\n        size={sizes[size] || size}\n        blur={40}\n        blurMode={blurMode || \"transparent\"}\n        transition={transition || \"zoom\"}\n        onClickOutside={async () => {\n            if (clickOutsideToClose && !loading) {\n                onCancel && await onCancel()\n            }\n        }}\n    >\n        <Alert\n            direction={direction}\n            sx={{\n                px: 2,\n                py: 1,\n                pt: direction === 'row' ? 1 : 2\n            }}\n            color={color}\n            variant={variant}\n            onClose={closeButton ? close : undefined}\n            {...rest}\n        >\n            {content}\n            <Tag\n                sxr={{\n                    display: \"flex\",\n                    gap: 1,\n                    pt: 4,\n                    flexDirection: \"row\",\n                    ...sx,\n                }}\n            >\n                {!hideCancelButton && <Button\n                    disabled={loading}\n                    color={closecolor}\n                    variant=\"fill\"\n                    {...slotProps?.closeButton}\n                    onClick={async () => {\n                        onCancel && await onCancel()\n                    }}\n                >{cancelButtonText || \"Close\"}</Button>}\n                <Button\n                    loading={loading}\n                    color={okcolor}\n                    variant=\"fill\"\n                    {...slotProps?.okButton}\n\n                    onClick={async () => {\n                        onConfirm && await onConfirm()\n                    }}\n                >{okButtonText || \"OK\"}</Button>\n            </Tag>\n        </Alert>\n    </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" | \"loading\">) => {\n    const Inst = (_props: any) => <ConfirmAlert {..._props} />\n    const confirm = Renderar.render(Inst as any, {\n        ...props,\n        open: true,\n        loading: false,\n        onConfirm: async () => {\n            if (onConfirm) {\n                confirm.updateProps({ loading: true })\n                if (onConfirm) await onConfirm()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        onCancel: async () => {\n            if (onCancel) {\n                confirm.updateProps({ loading: true })\n                await onCancel()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        slotProps: {\n            ...props.slotProps,\n            modal: {\n                ...props.slotProps?.modal,\n                onClosed: () => {\n                    confirm.unrender()\n                    if (props?.slotProps?.modal?.onClosed) {\n                        props.slotProps?.modal?.onClosed()\n                    }\n                },\n            }\n        },\n    })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGA;AACH;AAQe;AACA;;AAOR;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;AACI;;;;AAQY;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}

package/Menu/index.cjs

@@ -52,6 +52,12 @@ const getTransformOrigin = (placement) => {
             return "top";
     }
 };
+const clampToViewport = (menu, top, left) => {
+    const { width, height } = menu.getBoundingClientRect();
+    const clampedTop = Math.max(0, Math.min(top, window.innerHeight - height));
+    const clampedLeft = Math.max(0, Math.min(left, window.innerWidth - width));
+    return { top: clampedTop, left: clampedLeft };
+};
 // Compute coordinates for each placement
 const computePosition = (placement, menu, target) => {
     const { width: mw, height: mh } = menu.getBoundingClientRect();
@@ -78,20 +84,40 @@ const isOffScreen = (menu) => {
     return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;
 };
 // Try to place menu and fallback if off-screen
+// const placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {
+//     let pos = computePosition(placement, menu, target);
+//     menu.style.top = pos.top + "px";
+//     menu.style.left = pos.left + "px";
+//     if (isOffScreen(menu)) {
+//         for (const p of placements) {
+//             const fallbackPos = computePosition(p, menu, target);
+//             menu.style.top = fallbackPos.top + "px";
+//             menu.style.left = fallbackPos.left + "px";
+//             if (!isOffScreen(menu)) return p;
+//         }
+//     }
+//     return placement;
+// };
 const placeMenu = (placement, menu, target) => {
+    let finalPlacement = placement;
     let pos = computePosition(placement, menu, target);
-    menu.style.top = pos.top + "px";
-    menu.style.left = pos.left + "px";
+    let clamped = clampToViewport(menu, pos.top, pos.left);
+    menu.style.top = clamped.top + "px";
+    menu.style.left = clamped.left + "px";
+    // Try better placements
     if (isOffScreen(menu)) {
         for (const p of placements) {
             const fallbackPos = computePosition(p, menu, target);
-            menu.style.top = fallbackPos.top + "px";
-            menu.style.left = fallbackPos.left + "px";
-            if (!isOffScreen(menu))
-                return p;
+            const fallbackClamped = clampToViewport(menu, fallbackPos.top, fallbackPos.left);
+            menu.style.top = fallbackClamped.top + "px";
+            menu.style.left = fallbackClamped.left + "px";
+            if (!isOffScreen(menu)) {
+                finalPlacement = p;
+                break;
+            }
         }
     }
-    return placement;
+    return finalPlacement;
 };
 const Menu = (_a) => {
     var _b;

package/Menu/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\nimport Portal, { PortalProps } from \"../Portal\";\nimport ClickOutside from \"../ClickOutside\";\n\nexport type PlacementTypes =\n    | \"top\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"right\"\n    | \"right-top\"\n    | \"right-bottom\"\n    | \"left\"\n    | \"left-top\"\n    | \"left-bottom\";\n\nexport type MenuProps = {\n    children?: ReactNode;\n    target?: HTMLElement;\n    placement?: useBreakpointPropsType<PlacementTypes>;\n    zIndex?: number;\n\n    variant?: TransitionProps['variant'];\n    duration?: TransitionProps['duration'];\n    onOpen?: TransitionProps['onOpen'];\n    onOpened?: TransitionProps['onOpened'];\n    onClose?: TransitionProps['onClose'];\n    onClosed?: TransitionProps['onClosed'];\n\n    onClickOutside?: (e: MouseEvent) => void;\n\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">;\n        portal?: Omit<PortalProps, \"children\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n    };\n};\n\nconst placements: PlacementTypes[] = [\n    \"top\",\n    \"top-left\",\n    \"top-right\",\n    \"bottom\",\n    \"bottom-left\",\n    \"bottom-right\",\n    \"right\",\n    \"right-top\",\n    \"right-bottom\",\n    \"left\",\n    \"left-top\",\n    \"left-bottom\",\n];\n\nconst getTransformOrigin = (placement: PlacementTypes) => {\n    switch (placement) {\n        case \"top\":\n            return \"bottom\";\n        case \"top-left\":\n            return \"bottom left\";\n        case \"top-right\":\n            return \"bottom right\";\n        case \"bottom\":\n            return \"top\";\n        case \"bottom-left\":\n            return \"top left\";\n        case \"bottom-right\":\n            return \"top right\";\n        case \"left\":\n            return \"right\";\n        case \"left-top\":\n            return \"top right\";\n        case \"left-bottom\":\n            return \"bottom right\";\n        case \"right\":\n            return \"left\";\n        case \"right-top\":\n            return \"top left\";\n        case \"right-bottom\":\n            return \"bottom left\";\n        default:\n            return \"top\";\n    }\n};\n\n// Compute coordinates for each placement\nconst computePosition = (\n    placement: PlacementTypes,\n    menu: HTMLElement,\n    target: HTMLElement\n) => {\n    const { width: mw, height: mh } = menu.getBoundingClientRect();\n    const {\n        top: tt,\n        left: tl,\n        bottom: tb,\n        right: tr,\n        width: tw,\n        height: th,\n    } = target.getBoundingClientRect();\n\n    const positions: Record<PlacementTypes, { top: number; left: number }> = {\n        \"bottom-left\": { top: tb, left: tl },\n        \"bottom-right\": { top: tb, left: tr - mw },\n        bottom: { top: tb, left: tl + (tw - mw) / 2 },\n\n        \"top-left\": { top: tt - mh, left: tl },\n        \"top-right\": { top: tt - mh, left: tr - mw },\n        top: { top: tt - mh, left: tl + (tw - mw) / 2 },\n\n        left: { top: tt + (th - mh) / 2, left: tl - mw },\n        \"left-top\": { top: tt, left: tl - mw },\n        \"left-bottom\": { top: tb - mh, left: tl - mw },\n\n        right: { top: tt + (th - mh) / 2, left: tr },\n        \"right-top\": { top: tt, left: tr },\n        \"right-bottom\": { top: tb - mh, left: tr },\n    };\n\n    return positions[placement];\n};\n\n\n// Check if menu is off-screen\nconst isOffScreen = (menu: HTMLElement) => {\n    const { x, y, width, height } = menu.getBoundingClientRect();\n    return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\n};\n\n// Try to place menu and fallback if off-screen\nconst placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\n    let pos = computePosition(placement, menu, target);\n    menu.style.top = pos.top + \"px\";\n    menu.style.left = pos.left + \"px\";\n\n    if (isOffScreen(menu)) {\n        for (const p of placements) {\n            const fallbackPos = computePosition(p, menu, target);\n            menu.style.top = fallbackPos.top + \"px\";\n            menu.style.left = fallbackPos.left + \"px\";\n            if (!isOffScreen(menu)) return p;\n        }\n    }\n    return placement;\n};\n\nconst Menu = ({ children, target, ...props }: MenuProps) => {\n    let [{ onClickOutside, variant, duration, onOpen, onOpened, onClose, onClosed, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\n    const _p: any = {};\n    if (placement) _p.placement = placement;\n    const p: any = useBreakpointProps(_p);\n    placement = p.placement || \"bottom-left\";\n\n    const isOpen = Boolean(target);\n    const [closed, setClosed] = useState(!isOpen);\n    const [placed, setPlaced] = useState<PlacementTypes>(placement);\n    const menuRef = useRef<HTMLDivElement>(null);\n\n    // Open/close effect\n    useEffect(() => {\n        if (closed && isOpen) setClosed(false);\n    }, [isOpen]);\n\n\n    useEffect(() => {\n        if (!closed && target && menuRef.current) {\n            const updatePosition = () => {\n                if (menuRef.current && target) {\n                    requestAnimationFrame(() => {\n                        const p = placeMenu(placement!, menuRef.current as any, target);\n                        setPlaced(p);\n                    });\n                }\n            };\n\n            updatePosition();\n            window.addEventListener(\"resize\", updatePosition);\n            window.addEventListener(\"scroll\", updatePosition, true);\n\n            return () => {\n                window.removeEventListener(\"resize\", updatePosition);\n                window.removeEventListener(\"scroll\", updatePosition, true);\n            };\n        }\n        return\n    }, [closed, target, placement]);\n\n\n    if (closed) return null;\n\n    return (\n        <Portal {...slotProps?.portal}>\n            <ClickOutside\n                onClickOutside={(e: MouseEvent) => {\n                    if (target?.contains(e.target as any)) return;\n                    if (e.target !== target) {\n                        onClickOutside && onClickOutside(e);\n                    }\n                }}\n                ref={menuRef}\n                sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\n            >\n                <Transition\n                    duration={duration ?? 200}\n                    easing=\"fast\"\n                    variant={variant ?? \"grow\"}\n                    {...slotProps?.transition}\n                    open={isOpen}\n                    onOpen={onOpen}\n                    onOpened={onOpened}\n                    onClose={onClose}\n                    onClosed={() => {\n                        setClosed(true);\n                        onClosed && onClosed()\n                    }}\n                >\n                    <Tag\n                        baseClass=\"menu-content\"\n                        {...slotProps?.content}\n                        sxr={{\n                            overflow: \"hidden\",\n                            bgcolor: \"background.primary\",\n                            shadow: 2,\n                            radius: 1,\n                            transformOrigin: getTransformOrigin(placed),\n                            ...slotProps?.content?.sx,\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Transition>\n            </ClickOutside>\n        </Portal>\n    );\n};\n\nexport default Menu;\n"],"names":[],"mappings":";;;;;;;;;;AA0CA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;;;;AAKI;AACI;;;;AAII;AAAwB;;;AAGhC;AACJ;AAEA;;;AACI;;AAEA;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAMR;AAAY;;;;AAOI;AACI;;AAER;;;;AAoChB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\nimport Portal, { PortalProps } from \"../Portal\";\nimport ClickOutside from \"../ClickOutside\";\n\nexport type PlacementTypes =\n    | \"top\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"right\"\n    | \"right-top\"\n    | \"right-bottom\"\n    | \"left\"\n    | \"left-top\"\n    | \"left-bottom\";\n\nexport type MenuProps = {\n    children?: ReactNode;\n    target?: HTMLElement;\n    placement?: useBreakpointPropsType<PlacementTypes>;\n    zIndex?: number;\n\n    variant?: TransitionProps['variant'];\n    duration?: TransitionProps['duration'];\n    onOpen?: TransitionProps['onOpen'];\n    onOpened?: TransitionProps['onOpened'];\n    onClose?: TransitionProps['onClose'];\n    onClosed?: TransitionProps['onClosed'];\n\n    onClickOutside?: (e: MouseEvent) => void;\n\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">;\n        portal?: Omit<PortalProps, \"children\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n    };\n};\n\nconst placements: PlacementTypes[] = [\n    \"top\",\n    \"top-left\",\n    \"top-right\",\n    \"bottom\",\n    \"bottom-left\",\n    \"bottom-right\",\n    \"right\",\n    \"right-top\",\n    \"right-bottom\",\n    \"left\",\n    \"left-top\",\n    \"left-bottom\",\n];\n\nconst getTransformOrigin = (placement: PlacementTypes) => {\n    switch (placement) {\n        case \"top\":\n            return \"bottom\";\n        case \"top-left\":\n            return \"bottom left\";\n        case \"top-right\":\n            return \"bottom right\";\n        case \"bottom\":\n            return \"top\";\n        case \"bottom-left\":\n            return \"top left\";\n        case \"bottom-right\":\n            return \"top right\";\n        case \"left\":\n            return \"right\";\n        case \"left-top\":\n            return \"top right\";\n        case \"left-bottom\":\n            return \"bottom right\";\n        case \"right\":\n            return \"left\";\n        case \"right-top\":\n            return \"top left\";\n        case \"right-bottom\":\n            return \"bottom left\";\n        default:\n            return \"top\";\n    }\n};\n\nconst clampToViewport = (menu: HTMLElement, top: number, left: number) => {\n    const { width, height } = menu.getBoundingClientRect();\n\n    const clampedTop = Math.max(0, Math.min(top, window.innerHeight - height));\n    const clampedLeft = Math.max(0, Math.min(left, window.innerWidth - width));\n\n    return { top: clampedTop, left: clampedLeft };\n};\n\n// Compute coordinates for each placement\nconst computePosition = (\n    placement: PlacementTypes,\n    menu: HTMLElement,\n    target: HTMLElement\n) => {\n    const { width: mw, height: mh } = menu.getBoundingClientRect();\n    const {\n        top: tt,\n        left: tl,\n        bottom: tb,\n        right: tr,\n        width: tw,\n        height: th,\n    } = target.getBoundingClientRect();\n\n    const positions: Record<PlacementTypes, { top: number; left: number }> = {\n        \"bottom-left\": { top: tb, left: tl },\n        \"bottom-right\": { top: tb, left: tr - mw },\n        bottom: { top: tb, left: tl + (tw - mw) / 2 },\n\n        \"top-left\": { top: tt - mh, left: tl },\n        \"top-right\": { top: tt - mh, left: tr - mw },\n        top: { top: tt - mh, left: tl + (tw - mw) / 2 },\n\n        left: { top: tt + (th - mh) / 2, left: tl - mw },\n        \"left-top\": { top: tt, left: tl - mw },\n        \"left-bottom\": { top: tb - mh, left: tl - mw },\n\n        right: { top: tt + (th - mh) / 2, left: tr },\n        \"right-top\": { top: tt, left: tr },\n        \"right-bottom\": { top: tb - mh, left: tr },\n    };\n\n    return positions[placement];\n};\n\n\n// Check if menu is off-screen\nconst isOffScreen = (menu: HTMLElement) => {\n    const { x, y, width, height } = menu.getBoundingClientRect();\n    return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\n};\n\n// Try to place menu and fallback if off-screen\n// const placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\n//     let pos = computePosition(placement, menu, target);\n//     menu.style.top = pos.top + \"px\";\n//     menu.style.left = pos.left + \"px\";\n\n//     if (isOffScreen(menu)) {\n//         for (const p of placements) {\n//             const fallbackPos = computePosition(p, menu, target);\n//             menu.style.top = fallbackPos.top + \"px\";\n//             menu.style.left = fallbackPos.left + \"px\";\n//             if (!isOffScreen(menu)) return p;\n//         }\n//     }\n//     return placement;\n// };\n\nconst placeMenu = (\n    placement: PlacementTypes,\n    menu: HTMLElement,\n    target: HTMLElement\n) => {\n    let finalPlacement = placement;\n\n    let pos = computePosition(placement, menu, target);\n    let clamped = clampToViewport(menu, pos.top, pos.left);\n\n    menu.style.top = clamped.top + \"px\";\n    menu.style.left = clamped.left + \"px\";\n\n    // Try better placements\n    if (isOffScreen(menu)) {\n        for (const p of placements) {\n            const fallbackPos = computePosition(p, menu, target);\n            const fallbackClamped = clampToViewport(menu, fallbackPos.top, fallbackPos.left);\n\n            menu.style.top = fallbackClamped.top + \"px\";\n            menu.style.left = fallbackClamped.left + \"px\";\n\n            if (!isOffScreen(menu)) {\n                finalPlacement = p;\n                break;\n            }\n        }\n    }\n\n    return finalPlacement;\n};\n\n\n\nconst Menu = ({ children, target, ...props }: MenuProps) => {\n    let [{ onClickOutside, variant, duration, onOpen, onOpened, onClose, onClosed, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\n    const _p: any = {};\n    if (placement) _p.placement = placement;\n    const p: any = useBreakpointProps(_p);\n    placement = p.placement || \"bottom-left\";\n\n    const isOpen = Boolean(target);\n    const [closed, setClosed] = useState(!isOpen);\n    const [placed, setPlaced] = useState<PlacementTypes>(placement);\n    const menuRef = useRef<HTMLDivElement>(null);\n\n    // Open/close effect\n    useEffect(() => {\n        if (closed && isOpen) setClosed(false);\n    }, [isOpen]);\n\n\n    useEffect(() => {\n        if (!closed && target && menuRef.current) {\n            const updatePosition = () => {\n                if (menuRef.current && target) {\n                    requestAnimationFrame(() => {\n                        const p = placeMenu(placement!, menuRef.current as any, target);\n                        setPlaced(p);\n                    });\n                }\n            };\n\n            updatePosition();\n            window.addEventListener(\"resize\", updatePosition);\n            window.addEventListener(\"scroll\", updatePosition, true);\n\n            return () => {\n                window.removeEventListener(\"resize\", updatePosition);\n                window.removeEventListener(\"scroll\", updatePosition, true);\n            };\n        }\n        return\n    }, [closed, target, placement]);\n\n    if (closed) return null;\n\n    return (\n        <Portal {...slotProps?.portal}>\n            <ClickOutside\n                onClickOutside={(e: MouseEvent) => {\n                    if (target?.contains(e.target as any)) return;\n                    if (e.target !== target) {\n                        onClickOutside && onClickOutside(e);\n                    }\n                }}\n                ref={menuRef}\n                sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\n            >\n                <Transition\n                    duration={duration ?? 200}\n                    easing=\"fast\"\n                    variant={variant ?? \"grow\"}\n                    {...slotProps?.transition}\n                    open={isOpen}\n                    onOpen={onOpen}\n                    onOpened={onOpened}\n                    onClose={onClose}\n                    onClosed={() => {\n                        setClosed(true);\n                        onClosed && onClosed()\n                    }}\n                >\n                    <Tag\n                        baseClass=\"menu-content\"\n                        {...slotProps?.content}\n                        sxr={{\n                            overflow: \"hidden\",\n                            bgcolor: \"background.primary\",\n                            shadow: 2,\n                            radius: 1,\n                            transformOrigin: getTransformOrigin(placed),\n                            ...slotProps?.content?.sx,\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Transition>\n            </ClickOutside>\n        </Portal>\n    );\n};\n\nexport default Menu;\n"],"names":[],"mappings":";;;;;;;;;;AA0CA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;;;;;AAOA;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAQI;;;;AAMA;AACI;;AAEI;;;AAKA;;;;;;AAOR;AACJ;AAIA;;;AACI;;AAEA;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAKR;AAAY;;;;AAOI;AACI;;AAER;;;;AAoChB;;"}

package/Menu/index.js

@@ -50,6 +50,12 @@ const getTransformOrigin = (placement) => {
             return "top";
     }
 };
+const clampToViewport = (menu, top, left) => {
+    const { width, height } = menu.getBoundingClientRect();
+    const clampedTop = Math.max(0, Math.min(top, window.innerHeight - height));
+    const clampedLeft = Math.max(0, Math.min(left, window.innerWidth - width));
+    return { top: clampedTop, left: clampedLeft };
+};
 // Compute coordinates for each placement
 const computePosition = (placement, menu, target) => {
     const { width: mw, height: mh } = menu.getBoundingClientRect();
@@ -76,20 +82,40 @@ const isOffScreen = (menu) => {
     return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;
 };
 // Try to place menu and fallback if off-screen
+// const placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {
+//     let pos = computePosition(placement, menu, target);
+//     menu.style.top = pos.top + "px";
+//     menu.style.left = pos.left + "px";
+//     if (isOffScreen(menu)) {
+//         for (const p of placements) {
+//             const fallbackPos = computePosition(p, menu, target);
+//             menu.style.top = fallbackPos.top + "px";
+//             menu.style.left = fallbackPos.left + "px";
+//             if (!isOffScreen(menu)) return p;
+//         }
+//     }
+//     return placement;
+// };
 const placeMenu = (placement, menu, target) => {
+    let finalPlacement = placement;
     let pos = computePosition(placement, menu, target);
-    menu.style.top = pos.top + "px";
-    menu.style.left = pos.left + "px";
+    let clamped = clampToViewport(menu, pos.top, pos.left);
+    menu.style.top = clamped.top + "px";
+    menu.style.left = clamped.left + "px";
+    // Try better placements
     if (isOffScreen(menu)) {
         for (const p of placements) {
             const fallbackPos = computePosition(p, menu, target);
-            menu.style.top = fallbackPos.top + "px";
-            menu.style.left = fallbackPos.left + "px";
-            if (!isOffScreen(menu))
-                return p;
+            const fallbackClamped = clampToViewport(menu, fallbackPos.top, fallbackPos.left);
+            menu.style.top = fallbackClamped.top + "px";
+            menu.style.left = fallbackClamped.left + "px";
+            if (!isOffScreen(menu)) {
+                finalPlacement = p;
+                break;
+            }
         }
     }
-    return placement;
+    return finalPlacement;
 };
 const Menu = (_a) => {
     var _b;

package/Menu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\nimport Portal, { PortalProps } from \"../Portal\";\nimport ClickOutside from \"../ClickOutside\";\n\nexport type PlacementTypes =\n    | \"top\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"right\"\n    | \"right-top\"\n    | \"right-bottom\"\n    | \"left\"\n    | \"left-top\"\n    | \"left-bottom\";\n\nexport type MenuProps = {\n    children?: ReactNode;\n    target?: HTMLElement;\n    placement?: useBreakpointPropsType<PlacementTypes>;\n    zIndex?: number;\n\n    variant?: TransitionProps['variant'];\n    duration?: TransitionProps['duration'];\n    onOpen?: TransitionProps['onOpen'];\n    onOpened?: TransitionProps['onOpened'];\n    onClose?: TransitionProps['onClose'];\n    onClosed?: TransitionProps['onClosed'];\n\n    onClickOutside?: (e: MouseEvent) => void;\n\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">;\n        portal?: Omit<PortalProps, \"children\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n    };\n};\n\nconst placements: PlacementTypes[] = [\n    \"top\",\n    \"top-left\",\n    \"top-right\",\n    \"bottom\",\n    \"bottom-left\",\n    \"bottom-right\",\n    \"right\",\n    \"right-top\",\n    \"right-bottom\",\n    \"left\",\n    \"left-top\",\n    \"left-bottom\",\n];\n\nconst getTransformOrigin = (placement: PlacementTypes) => {\n    switch (placement) {\n        case \"top\":\n            return \"bottom\";\n        case \"top-left\":\n            return \"bottom left\";\n        case \"top-right\":\n            return \"bottom right\";\n        case \"bottom\":\n            return \"top\";\n        case \"bottom-left\":\n            return \"top left\";\n        case \"bottom-right\":\n            return \"top right\";\n        case \"left\":\n            return \"right\";\n        case \"left-top\":\n            return \"top right\";\n        case \"left-bottom\":\n            return \"bottom right\";\n        case \"right\":\n            return \"left\";\n        case \"right-top\":\n            return \"top left\";\n        case \"right-bottom\":\n            return \"bottom left\";\n        default:\n            return \"top\";\n    }\n};\n\n// Compute coordinates for each placement\nconst computePosition = (\n    placement: PlacementTypes,\n    menu: HTMLElement,\n    target: HTMLElement\n) => {\n    const { width: mw, height: mh } = menu.getBoundingClientRect();\n    const {\n        top: tt,\n        left: tl,\n        bottom: tb,\n        right: tr,\n        width: tw,\n        height: th,\n    } = target.getBoundingClientRect();\n\n    const positions: Record<PlacementTypes, { top: number; left: number }> = {\n        \"bottom-left\": { top: tb, left: tl },\n        \"bottom-right\": { top: tb, left: tr - mw },\n        bottom: { top: tb, left: tl + (tw - mw) / 2 },\n\n        \"top-left\": { top: tt - mh, left: tl },\n        \"top-right\": { top: tt - mh, left: tr - mw },\n        top: { top: tt - mh, left: tl + (tw - mw) / 2 },\n\n        left: { top: tt + (th - mh) / 2, left: tl - mw },\n        \"left-top\": { top: tt, left: tl - mw },\n        \"left-bottom\": { top: tb - mh, left: tl - mw },\n\n        right: { top: tt + (th - mh) / 2, left: tr },\n        \"right-top\": { top: tt, left: tr },\n        \"right-bottom\": { top: tb - mh, left: tr },\n    };\n\n    return positions[placement];\n};\n\n\n// Check if menu is off-screen\nconst isOffScreen = (menu: HTMLElement) => {\n    const { x, y, width, height } = menu.getBoundingClientRect();\n    return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\n};\n\n// Try to place menu and fallback if off-screen\nconst placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\n    let pos = computePosition(placement, menu, target);\n    menu.style.top = pos.top + \"px\";\n    menu.style.left = pos.left + \"px\";\n\n    if (isOffScreen(menu)) {\n        for (const p of placements) {\n            const fallbackPos = computePosition(p, menu, target);\n            menu.style.top = fallbackPos.top + \"px\";\n            menu.style.left = fallbackPos.left + \"px\";\n            if (!isOffScreen(menu)) return p;\n        }\n    }\n    return placement;\n};\n\nconst Menu = ({ children, target, ...props }: MenuProps) => {\n    let [{ onClickOutside, variant, duration, onOpen, onOpened, onClose, onClosed, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\n    const _p: any = {};\n    if (placement) _p.placement = placement;\n    const p: any = useBreakpointProps(_p);\n    placement = p.placement || \"bottom-left\";\n\n    const isOpen = Boolean(target);\n    const [closed, setClosed] = useState(!isOpen);\n    const [placed, setPlaced] = useState<PlacementTypes>(placement);\n    const menuRef = useRef<HTMLDivElement>(null);\n\n    // Open/close effect\n    useEffect(() => {\n        if (closed && isOpen) setClosed(false);\n    }, [isOpen]);\n\n\n    useEffect(() => {\n        if (!closed && target && menuRef.current) {\n            const updatePosition = () => {\n                if (menuRef.current && target) {\n                    requestAnimationFrame(() => {\n                        const p = placeMenu(placement!, menuRef.current as any, target);\n                        setPlaced(p);\n                    });\n                }\n            };\n\n            updatePosition();\n            window.addEventListener(\"resize\", updatePosition);\n            window.addEventListener(\"scroll\", updatePosition, true);\n\n            return () => {\n                window.removeEventListener(\"resize\", updatePosition);\n                window.removeEventListener(\"scroll\", updatePosition, true);\n            };\n        }\n        return\n    }, [closed, target, placement]);\n\n\n    if (closed) return null;\n\n    return (\n        <Portal {...slotProps?.portal}>\n            <ClickOutside\n                onClickOutside={(e: MouseEvent) => {\n                    if (target?.contains(e.target as any)) return;\n                    if (e.target !== target) {\n                        onClickOutside && onClickOutside(e);\n                    }\n                }}\n                ref={menuRef}\n                sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\n            >\n                <Transition\n                    duration={duration ?? 200}\n                    easing=\"fast\"\n                    variant={variant ?? \"grow\"}\n                    {...slotProps?.transition}\n                    open={isOpen}\n                    onOpen={onOpen}\n                    onOpened={onOpened}\n                    onClose={onClose}\n                    onClosed={() => {\n                        setClosed(true);\n                        onClosed && onClosed()\n                    }}\n                >\n                    <Tag\n                        baseClass=\"menu-content\"\n                        {...slotProps?.content}\n                        sxr={{\n                            overflow: \"hidden\",\n                            bgcolor: \"background.primary\",\n                            shadow: 2,\n                            radius: 1,\n                            transformOrigin: getTransformOrigin(placed),\n                            ...slotProps?.content?.sx,\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Transition>\n            </ClickOutside>\n        </Portal>\n    );\n};\n\nexport default Menu;\n"],"names":[],"mappings":";;;;;;;;AA0CA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;;;;AAKI;AACI;;;;AAII;AAAwB;;;AAGhC;AACJ;AAEA;;;AACI;;AAEA;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAMR;AAAY;;;;AAOI;AACI;;AAER;;;;AAoChB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\nimport Portal, { PortalProps } from \"../Portal\";\nimport ClickOutside from \"../ClickOutside\";\n\nexport type PlacementTypes =\n    | \"top\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"right\"\n    | \"right-top\"\n    | \"right-bottom\"\n    | \"left\"\n    | \"left-top\"\n    | \"left-bottom\";\n\nexport type MenuProps = {\n    children?: ReactNode;\n    target?: HTMLElement;\n    placement?: useBreakpointPropsType<PlacementTypes>;\n    zIndex?: number;\n\n    variant?: TransitionProps['variant'];\n    duration?: TransitionProps['duration'];\n    onOpen?: TransitionProps['onOpen'];\n    onOpened?: TransitionProps['onOpened'];\n    onClose?: TransitionProps['onClose'];\n    onClosed?: TransitionProps['onClosed'];\n\n    onClickOutside?: (e: MouseEvent) => void;\n\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">;\n        portal?: Omit<PortalProps, \"children\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n    };\n};\n\nconst placements: PlacementTypes[] = [\n    \"top\",\n    \"top-left\",\n    \"top-right\",\n    \"bottom\",\n    \"bottom-left\",\n    \"bottom-right\",\n    \"right\",\n    \"right-top\",\n    \"right-bottom\",\n    \"left\",\n    \"left-top\",\n    \"left-bottom\",\n];\n\nconst getTransformOrigin = (placement: PlacementTypes) => {\n    switch (placement) {\n        case \"top\":\n            return \"bottom\";\n        case \"top-left\":\n            return \"bottom left\";\n        case \"top-right\":\n            return \"bottom right\";\n        case \"bottom\":\n            return \"top\";\n        case \"bottom-left\":\n            return \"top left\";\n        case \"bottom-right\":\n            return \"top right\";\n        case \"left\":\n            return \"right\";\n        case \"left-top\":\n            return \"top right\";\n        case \"left-bottom\":\n            return \"bottom right\";\n        case \"right\":\n            return \"left\";\n        case \"right-top\":\n            return \"top left\";\n        case \"right-bottom\":\n            return \"bottom left\";\n        default:\n            return \"top\";\n    }\n};\n\nconst clampToViewport = (menu: HTMLElement, top: number, left: number) => {\n    const { width, height } = menu.getBoundingClientRect();\n\n    const clampedTop = Math.max(0, Math.min(top, window.innerHeight - height));\n    const clampedLeft = Math.max(0, Math.min(left, window.innerWidth - width));\n\n    return { top: clampedTop, left: clampedLeft };\n};\n\n// Compute coordinates for each placement\nconst computePosition = (\n    placement: PlacementTypes,\n    menu: HTMLElement,\n    target: HTMLElement\n) => {\n    const { width: mw, height: mh } = menu.getBoundingClientRect();\n    const {\n        top: tt,\n        left: tl,\n        bottom: tb,\n        right: tr,\n        width: tw,\n        height: th,\n    } = target.getBoundingClientRect();\n\n    const positions: Record<PlacementTypes, { top: number; left: number }> = {\n        \"bottom-left\": { top: tb, left: tl },\n        \"bottom-right\": { top: tb, left: tr - mw },\n        bottom: { top: tb, left: tl + (tw - mw) / 2 },\n\n        \"top-left\": { top: tt - mh, left: tl },\n        \"top-right\": { top: tt - mh, left: tr - mw },\n        top: { top: tt - mh, left: tl + (tw - mw) / 2 },\n\n        left: { top: tt + (th - mh) / 2, left: tl - mw },\n        \"left-top\": { top: tt, left: tl - mw },\n        \"left-bottom\": { top: tb - mh, left: tl - mw },\n\n        right: { top: tt + (th - mh) / 2, left: tr },\n        \"right-top\": { top: tt, left: tr },\n        \"right-bottom\": { top: tb - mh, left: tr },\n    };\n\n    return positions[placement];\n};\n\n\n// Check if menu is off-screen\nconst isOffScreen = (menu: HTMLElement) => {\n    const { x, y, width, height } = menu.getBoundingClientRect();\n    return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\n};\n\n// Try to place menu and fallback if off-screen\n// const placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\n//     let pos = computePosition(placement, menu, target);\n//     menu.style.top = pos.top + \"px\";\n//     menu.style.left = pos.left + \"px\";\n\n//     if (isOffScreen(menu)) {\n//         for (const p of placements) {\n//             const fallbackPos = computePosition(p, menu, target);\n//             menu.style.top = fallbackPos.top + \"px\";\n//             menu.style.left = fallbackPos.left + \"px\";\n//             if (!isOffScreen(menu)) return p;\n//         }\n//     }\n//     return placement;\n// };\n\nconst placeMenu = (\n    placement: PlacementTypes,\n    menu: HTMLElement,\n    target: HTMLElement\n) => {\n    let finalPlacement = placement;\n\n    let pos = computePosition(placement, menu, target);\n    let clamped = clampToViewport(menu, pos.top, pos.left);\n\n    menu.style.top = clamped.top + \"px\";\n    menu.style.left = clamped.left + \"px\";\n\n    // Try better placements\n    if (isOffScreen(menu)) {\n        for (const p of placements) {\n            const fallbackPos = computePosition(p, menu, target);\n            const fallbackClamped = clampToViewport(menu, fallbackPos.top, fallbackPos.left);\n\n            menu.style.top = fallbackClamped.top + \"px\";\n            menu.style.left = fallbackClamped.left + \"px\";\n\n            if (!isOffScreen(menu)) {\n                finalPlacement = p;\n                break;\n            }\n        }\n    }\n\n    return finalPlacement;\n};\n\n\n\nconst Menu = ({ children, target, ...props }: MenuProps) => {\n    let [{ onClickOutside, variant, duration, onOpen, onOpened, onClose, onClosed, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\n    const _p: any = {};\n    if (placement) _p.placement = placement;\n    const p: any = useBreakpointProps(_p);\n    placement = p.placement || \"bottom-left\";\n\n    const isOpen = Boolean(target);\n    const [closed, setClosed] = useState(!isOpen);\n    const [placed, setPlaced] = useState<PlacementTypes>(placement);\n    const menuRef = useRef<HTMLDivElement>(null);\n\n    // Open/close effect\n    useEffect(() => {\n        if (closed && isOpen) setClosed(false);\n    }, [isOpen]);\n\n\n    useEffect(() => {\n        if (!closed && target && menuRef.current) {\n            const updatePosition = () => {\n                if (menuRef.current && target) {\n                    requestAnimationFrame(() => {\n                        const p = placeMenu(placement!, menuRef.current as any, target);\n                        setPlaced(p);\n                    });\n                }\n            };\n\n            updatePosition();\n            window.addEventListener(\"resize\", updatePosition);\n            window.addEventListener(\"scroll\", updatePosition, true);\n\n            return () => {\n                window.removeEventListener(\"resize\", updatePosition);\n                window.removeEventListener(\"scroll\", updatePosition, true);\n            };\n        }\n        return\n    }, [closed, target, placement]);\n\n    if (closed) return null;\n\n    return (\n        <Portal {...slotProps?.portal}>\n            <ClickOutside\n                onClickOutside={(e: MouseEvent) => {\n                    if (target?.contains(e.target as any)) return;\n                    if (e.target !== target) {\n                        onClickOutside && onClickOutside(e);\n                    }\n                }}\n                ref={menuRef}\n                sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\n            >\n                <Transition\n                    duration={duration ?? 200}\n                    easing=\"fast\"\n                    variant={variant ?? \"grow\"}\n                    {...slotProps?.transition}\n                    open={isOpen}\n                    onOpen={onOpen}\n                    onOpened={onOpened}\n                    onClose={onClose}\n                    onClosed={() => {\n                        setClosed(true);\n                        onClosed && onClosed()\n                    }}\n                >\n                    <Tag\n                        baseClass=\"menu-content\"\n                        {...slotProps?.content}\n                        sxr={{\n                            overflow: \"hidden\",\n                            bgcolor: \"background.primary\",\n                            shadow: 2,\n                            radius: 1,\n                            transformOrigin: getTransformOrigin(placed),\n                            ...slotProps?.content?.sx,\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Transition>\n            </ClickOutside>\n        </Portal>\n    );\n};\n\nexport default Menu;\n"],"names":[],"mappings":";;;;;;;;AA0CA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;;;;;AAOA;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAQI;;;;AAMA;AACI;;AAEI;;;AAKA;;;;;;AAOR;AACJ;AAIA;;;AACI;;AAEA;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAKR;AAAY;;;;AAOI;AACI;;AAER;;;;AAoChB;;"}

package/Portal/index.cjs

@@ -20,7 +20,7 @@ const Portal = ({ children, appendTo, container }) => {
             appendTo.removeChild(c);
         };
     }, []);
-    return ReactDOM.createPortal(jsxRuntime.jsx(core.ThemeProvider, { theme: theme.name, children: children }), c);
+    return ReactDOM.createPortal(jsxRuntime.jsx(core.ThemeProvider, { theme: theme, children: children }), c);
 };
 
 module.exports = Portal;

package/Portal/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Portal/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useMemo } from 'react'\nimport ReactDOM from 'react-dom';\nimport { useTheme, ThemeProvider } from '@xanui/core';\nexport type PortalProps = {\n    children?: React.ReactNode;\n    appendTo?: HTMLElement;\n    container?: HTMLElement;\n}\n\nconst Portal = ({ children, appendTo, container }: PortalProps) => {\n    const theme = useTheme()\n    appendTo = appendTo || document.body\n\n    const c = useMemo(() => {\n        let _con: HTMLElement = container || document.createElement(\"div\");\n        appendTo.appendChild(_con);\n        _con.className = \"xui-portal\"\n        return _con\n    }, [container])\n\n    useEffect(() => {\n        return () => {\n            (appendTo as any).removeChild(c);\n        }\n    }, [])\n\n    return ReactDOM.createPortal(\n        <ThemeProvider theme={theme.name}>\n            {children}\n        </ThemeProvider>,\n        c,\n    );\n}\n\nexport default Portal"],"names":[],"mappings":";;;;;;;;AAUA;AACI;AACA;AAEA;;AAEI;AACA;AACA;AACJ;;AAGI;AACK;AACL;;AAGJ;AAMJ;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Portal/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useMemo } from 'react'\nimport ReactDOM from 'react-dom';\nimport { useTheme, ThemeProvider } from '@xanui/core';\nexport type PortalProps = {\n    children?: React.ReactNode;\n    appendTo?: HTMLElement;\n    container?: HTMLElement;\n}\n\nconst Portal = ({ children, appendTo, container }: PortalProps) => {\n    const theme = useTheme()\n    appendTo = appendTo || document.body\n\n    const c = useMemo(() => {\n        let _con: HTMLElement = container || document.createElement(\"div\");\n        appendTo.appendChild(_con);\n        _con.className = \"xui-portal\"\n        return _con\n    }, [container])\n\n    useEffect(() => {\n        return () => {\n            (appendTo as any).removeChild(c);\n        }\n    }, [])\n\n    return ReactDOM.createPortal(\n        <ThemeProvider theme={theme}>\n            {children}\n        </ThemeProvider>,\n        c,\n    );\n}\n\nexport default Portal"],"names":[],"mappings":";;;;;;;;AAUA;AACI;AACA;AAEA;;AAEI;AACA;AACA;AACJ;;AAGI;AACK;AACL;;AAGJ;AAMJ;;"}

package/Portal/index.js

@@ -18,7 +18,7 @@ const Portal = ({ children, appendTo, container }) => {
             appendTo.removeChild(c);
         };
     }, []);
-    return ReactDOM.createPortal(jsx(ThemeProvider, { theme: theme.name, children: children }), c);
+    return ReactDOM.createPortal(jsx(ThemeProvider, { theme: theme, children: children }), c);
 };
 
 export { Portal as default };

package/Portal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Portal/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useMemo } from 'react'\nimport ReactDOM from 'react-dom';\nimport { useTheme, ThemeProvider } from '@xanui/core';\nexport type PortalProps = {\n    children?: React.ReactNode;\n    appendTo?: HTMLElement;\n    container?: HTMLElement;\n}\n\nconst Portal = ({ children, appendTo, container }: PortalProps) => {\n    const theme = useTheme()\n    appendTo = appendTo || document.body\n\n    const c = useMemo(() => {\n        let _con: HTMLElement = container || document.createElement(\"div\");\n        appendTo.appendChild(_con);\n        _con.className = \"xui-portal\"\n        return _con\n    }, [container])\n\n    useEffect(() => {\n        return () => {\n            (appendTo as any).removeChild(c);\n        }\n    }, [])\n\n    return ReactDOM.createPortal(\n        <ThemeProvider theme={theme.name}>\n            {children}\n        </ThemeProvider>,\n        c,\n    );\n}\n\nexport default Portal"],"names":[],"mappings":";;;;;;AAUA;AACI;AACA;AAEA;;AAEI;AACA;AACA;AACJ;;AAGI;AACK;AACL;;AAGJ;AAMJ;;"}
+{"version":3,"file":"index.js","sources":["../../src/Portal/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useMemo } from 'react'\nimport ReactDOM from 'react-dom';\nimport { useTheme, ThemeProvider } from '@xanui/core';\nexport type PortalProps = {\n    children?: React.ReactNode;\n    appendTo?: HTMLElement;\n    container?: HTMLElement;\n}\n\nconst Portal = ({ children, appendTo, container }: PortalProps) => {\n    const theme = useTheme()\n    appendTo = appendTo || document.body\n\n    const c = useMemo(() => {\n        let _con: HTMLElement = container || document.createElement(\"div\");\n        appendTo.appendChild(_con);\n        _con.className = \"xui-portal\"\n        return _con\n    }, [container])\n\n    useEffect(() => {\n        return () => {\n            (appendTo as any).removeChild(c);\n        }\n    }, [])\n\n    return ReactDOM.createPortal(\n        <ThemeProvider theme={theme}>\n            {children}\n        </ThemeProvider>,\n        c,\n    );\n}\n\nexport default Portal"],"names":[],"mappings":";;;;;;AAUA;AACI;AACA;AAEA;;AAEI;AACA;AACA;AACJ;;AAGI;AACK;AACL;;AAGJ;AAMJ;;"}

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@xanui/ui",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "Xanui - A React Component Library",
   "private": false,
   "dependencies": {
-    "@xanui/core": "^1.2.54",
+    "@xanui/core": "^1.2.65",
     "@xanui/icons": "^1.1.12",
-    "pretty-class": "^1.0.8",
-    "react-state-bucket": "^1.2.17"
+    "pretty-class": "^1.0.8"
   },
   "keywords": [],
   "sideEffects": false,