@xanui/ui 1.1.21 → 1.1.22

package/Badge/index.d.ts

@@ -6,8 +6,15 @@ type BadgeProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, "baseCla
     color?: useBreakpointPropsType<UseColorTemplateColor>;
     placement?: useBreakpointPropsType<"left-top" | "left-bottom" | "right-top" | "right-bottom">;
     visible?: useBreakpointPropsType<boolean>;
+    disableTransition?: boolean;
+    disableSpace?: boolean;
     slotProps?: {
         transition?: Omit<TransitionProps, "open">;
+        content?: Omit<TagProps<"span">, "children">;
+    };
+    refs?: {
+        content?: React.Ref<any>;
+        transition?: React.Ref<any>;
     };
 };
 declare const Badge: React.ForwardRefExoticComponent<Omit<BadgeProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;

package/Badge/index.js

@@ -6,71 +6,104 @@ var React = require('react');
 var core = require('@xanui/core');
 
 const Badge = React.forwardRef((_a, ref) => {
-    var { children, content } = _a, rest = tslib.__rest(_a, ["children", "content"]);
-    let [_b] = core.useInterface("Badge", rest, {}), { color, placement, visible, slotProps } = _b, props = tslib.__rest(_b, ["color", "placement", "visible", "slotProps"]);
+    var { children, content, refs } = _a, rest = tslib.__rest(_a, ["children", "content", "refs"]);
+    let [_b] = core.useInterface("Badge", rest, {}), { color, placement, visible, slotProps, disableTransition, disableSpace } = _b, props = tslib.__rest(_b, ["color", "placement", "visible", "slotProps", "disableTransition", "disableSpace"]);
     color !== null && color !== void 0 ? color : (color = "danger");
     visible !== null && visible !== void 0 ? visible : (visible = true);
     placement !== null && placement !== void 0 ? placement : (placement = "right-top");
+    disableTransition !== null && disableTransition !== void 0 ? disableTransition : (disableTransition = false);
+    disableSpace !== null && disableSpace !== void 0 ? disableSpace : (disableSpace = false);
     const _p = {};
-    if (content)
-        _p.content = content;
-    if (color)
-        _p.color = color;
-    if (placement)
-        _p.placement = placement;
-    if (visible)
-        _p.visible = visible;
+    _p.content = content;
+    _p.color = color;
+    _p.placement = placement;
+    _p.visible = visible;
+    _p.disableTransition = disableTransition !== null && disableTransition !== void 0 ? disableTransition : false;
     const p = core.useBreakpointProps(_p);
     content = p.content;
     color = p.color;
     placement = p.placement;
     visible = p.visible;
-    const template = core.useColorTemplate(color, "fill");
-    let _css = {};
-    let pos = -3;
-    if (typeof content === "number") {
-        if (content.toString().length === 2) {
-            pos = -5;
-        }
-        else if (content.toString().length > 2) {
-            pos = -8;
-        }
-    }
+    disableTransition = p.disableTransition;
+    const isReactElement = React.isValidElement(content);
+    let template = core.useColorTemplate(color, "fill");
+    let _css = {
+        position: "absolute",
+    };
+    let translate = '';
     switch (placement) {
-        case "left-top":
-            _css = { top: content ? pos : 0, left: content ? pos : 0 };
-            break;
-        case "left-bottom":
-            _css = { bottom: content ? pos : 0, left: content ? pos : 0 };
-            break;
         case "right-top":
-            _css = { top: content ? pos : 0, right: content ? pos : 0 };
+            _css.top = 0;
+            _css.right = 0;
+            if (!disableSpace) {
+                translate = "translate(50%, -50%)";
+            }
             break;
         case "right-bottom":
-            _css = { bottom: content ? pos : 0, right: content ? pos : 0 };
+            _css.bottom = 0;
+            _css.right = 0;
+            if (!disableSpace) {
+                translate = "translate(50%, 50%)";
+            }
+            break;
+        case "left-top":
+            _css.top = 0;
+            _css.left = 0;
+            if (!disableSpace) {
+                translate = "translate(-50%, -50%)";
+            }
+            break;
+        case "left-bottom":
+            _css.bottom = 0;
+            _css.left = 0;
+            if (!disableSpace) {
+                translate = "translate(-50%, 50%)";
+            }
             break;
     }
-    if (content) {
-        _css.minWidth = 16;
-        _css.height = 16;
-        _css.height = 16;
-        _css.p = .8;
-        _css.px = .4;
+    if (disableTransition) {
+        _css.transform = translate;
+    }
+    if (!isReactElement) {
+        if (content !== undefined) {
+            _css.minWidth = 16;
+            _css.height = 16;
+            _css.p = .8;
+            _css.px = .4;
+        }
+        else {
+            _css.width = 8;
+            _css.height = 8;
+        }
     }
     else {
-        _css.width = 8;
-        _css.height = 8;
+        template = {};
     }
-    return (jsxRuntime.jsxs(core.Tag, Object.assign({}, props, { position: "relative", display: "inline-block", baseClass: 'badge', ref: ref, children: [jsxRuntime.jsx(core.Tag, Object.assign({ component: 'span', baseClass: 'badge-content', sxr: {
-                    position: "absolute",
-                    zIndex: 1,
-                    radius: 2,
-                    display: 'flex',
-                    justifyContent: "center",
-                    alignItems: 'center',
-                    fontWeight: 500,
-                    fontSize: 11
-                } }, template.primary, _css, { children: typeof content === 'number' ? (content >= 100 ? "99+" : content) : content })), children] })));
+    const _badge = jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { ref: refs === null || refs === void 0 ? void 0 : refs.content, component: 'span', baseClass: 'badge-content', sxr: {
+            position: "absolute",
+            zIndex: 1,
+            radius: 2,
+            display: 'flex',
+            justifyContent: "center",
+            alignItems: 'center',
+            fontWeight: 500,
+            fontSize: 11,
+            userSelect: "none",
+            pointerEvents: "none",
+            lineHeight: 1,
+        } }, template.primary, _css, { children: typeof content === 'number' ? (content >= 100 ? "99+" : content) : content }));
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({}, props, { position: "relative", display: "inline-block", baseClass: 'badge', ref: ref, children: [!disableTransition ? (jsxRuntime.jsx(core.Transition, Object.assign({ open: content !== undefined && visible }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { variant: () => {
+                    return {
+                        from: {
+                            opacity: 0,
+                            transform: `scale(0) ${translate}`.trim(),
+                        },
+                        to: {
+                            opacity: 1,
+                            transform: `scale(1) ${translate}`.trim(),
+                        },
+                    };
+                }, ref: refs === null || refs === void 0 ? void 0 : refs.transition, children: _badge }))) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: (content !== undefined && visible) && _badge }), children] })));
 });
 
 module.exports = Badge;

package/Badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Badge/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, useColorTemplate, useBreakpointPropsType, useBreakpointProps, TransitionProps } from '@xanui/core';\n\n\nexport type BadgeProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"baseClass\" | \"content\"> & {\n    content?: useBreakpointPropsType<number | ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    placement?: useBreakpointPropsType<\"left-top\" | \"left-bottom\" | \"right-top\" | \"right-bottom\">;\n    visible?: useBreakpointPropsType<boolean>;\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">\n    }\n}\n\nconst Badge = React.forwardRef(<T extends TagComponentType = \"div\">({ children, content, ...rest }: BadgeProps<T>, ref: React.Ref<any>) => {\n    let [{ color, placement, visible, slotProps, ...props }] = useInterface<any>(\"Badge\", rest, {})\n    color ??= \"danger\"\n    visible ??= true\n    placement ??= \"right-top\"\n\n    const _p: any = {}\n\n    if (content) _p.content = content\n    if (color) _p.color = color\n    if (placement) _p.placement = placement\n    if (visible) _p.visible = visible\n\n    const p: any = useBreakpointProps(_p)\n\n    content = p.content\n    color = p.color\n    placement = p.placement\n    visible = p.visible\n\n    const template = useColorTemplate(color, \"fill\")\n    let _css: any = {}\n    let pos = -3;\n    if (typeof content === \"number\") {\n        if (content.toString().length === 2) {\n            pos = -5\n        } else if (content.toString().length > 2) {\n            pos = -8\n        }\n    }\n\n    switch (placement) {\n        case \"left-top\":\n            _css = { top: content ? pos : 0, left: content ? pos : 0 }\n            break;\n        case \"left-bottom\":\n            _css = { bottom: content ? pos : 0, left: content ? pos : 0 }\n            break;\n        case \"right-top\":\n            _css = { top: content ? pos : 0, right: content ? pos : 0 }\n            break;\n        case \"right-bottom\":\n            _css = { bottom: content ? pos : 0, right: content ? pos : 0 }\n            break;\n    }\n    if (content) {\n        _css.minWidth = 16\n        _css.height = 16\n        _css.height = 16\n        _css.p = .8\n        _css.px = .4\n    } else {\n        _css.width = 8\n        _css.height = 8\n    }\n\n    return (\n        <Tag\n            {...props}\n            position=\"relative\"\n            display=\"inline-block\"\n            baseClass='badge'\n            ref={ref}\n        >\n            <Tag\n                component='span'\n                baseClass='badge-content'\n                sxr={{\n                    position: \"absolute\",\n                    zIndex: 1,\n                    radius: 2,\n                    display: 'flex',\n                    justifyContent: \"center\",\n                    alignItems: 'center',\n                    fontWeight: 500,\n                    fontSize: 11\n                }}\n                {...template.primary}\n                {..._css}\n            >\n                {typeof content === 'number' ? (content >= 100 ? \"99+\" : content) : content}\n            </Tag>\n            {children}\n        </Tag>\n    )\n})\n\nexport default Badge\n\n"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","_jsxs","Tag","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Badge/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, Transition, useInterface, UseColorTemplateColor, useColorTemplate, useBreakpointPropsType, useBreakpointProps, TransitionProps } from '@xanui/core';\n\nexport type BadgeProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"baseClass\" | \"content\"> & {\n    content?: useBreakpointPropsType<number | ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    placement?: useBreakpointPropsType<\"left-top\" | \"left-bottom\" | \"right-top\" | \"right-bottom\">;\n    visible?: useBreakpointPropsType<boolean>;\n    disableTransition?: boolean;\n    disableSpace?: boolean;\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">;\n        content?: Omit<TagProps<\"span\">, \"children\">;\n    },\n    refs?: {\n        content?: React.Ref<any>;\n        transition?: React.Ref<any>;\n    };\n}\n\nconst Badge = React.forwardRef(<T extends TagComponentType = \"div\">({ children, content, refs, ...rest }: BadgeProps<T>, ref: React.Ref<any>) => {\n    let [{ color, placement, visible, slotProps, disableTransition, disableSpace, ...props }] = useInterface<any>(\"Badge\", rest, {})\n    color ??= \"danger\"\n    visible ??= true\n    placement ??= \"right-top\"\n    disableTransition ??= false\n    disableSpace ??= false\n\n    const _p: any = {}\n\n    _p.content = content\n    _p.color = color\n    _p.placement = placement\n    _p.visible = visible\n    _p.disableTransition = disableTransition ?? false\n\n    const p: any = useBreakpointProps(_p)\n\n    content = p.content\n    color = p.color\n    placement = p.placement\n    visible = p.visible\n    disableTransition = p.disableTransition\n\n    const isReactElement = React.isValidElement(content);\n\n    let template: any = useColorTemplate(color, \"fill\")\n    let _css: any = {\n        position: \"absolute\",\n    }\n\n    let translate = ''\n\n    switch (placement) {\n        case \"right-top\":\n            _css.top = 0;\n            _css.right = 0;\n            if (!disableSpace) {\n                translate = \"translate(50%, -50%)\";\n            }\n            break;\n        case \"right-bottom\":\n            _css.bottom = 0;\n            _css.right = 0;\n            if (!disableSpace) {\n                translate = \"translate(50%, 50%)\";\n            }\n            break;\n        case \"left-top\":\n            _css.top = 0;\n            _css.left = 0;\n            if (!disableSpace) {\n                translate = \"translate(-50%, -50%)\";\n            }\n            break;\n        case \"left-bottom\":\n            _css.bottom = 0;\n            _css.left = 0;\n            if (!disableSpace) {\n                translate = \"translate(-50%, 50%)\";\n            }\n            break;\n    }\n\n    if (disableTransition) {\n        _css.transform = translate\n    }\n\n    if (!isReactElement) {\n        if (content !== undefined) {\n            _css.minWidth = 16\n            _css.height = 16\n            _css.p = .8\n            _css.px = .4\n        } else {\n            _css.width = 8\n            _css.height = 8\n        }\n    } else {\n        template = {}\n    }\n\n    const _badge = <Tag\n        {...slotProps?.content}\n        ref={refs?.content}\n        component='span'\n        baseClass='badge-content'\n        sxr={{\n            position: \"absolute\",\n            zIndex: 1,\n            radius: 2,\n            display: 'flex',\n            justifyContent: \"center\",\n            alignItems: 'center',\n            fontWeight: 500,\n            fontSize: 11,\n            userSelect: \"none\",\n            pointerEvents: \"none\",\n            lineHeight: 1,\n        }}\n        {...template.primary}\n        {..._css}\n    >\n        {typeof content === 'number' ? (content >= 100 ? \"99+\" : content) : content}\n    </Tag>\n\n    return (\n        <Tag\n            {...props}\n            position=\"relative\"\n            display=\"inline-block\"\n            baseClass='badge'\n            ref={ref}\n        >\n            {\n                !disableTransition ? (<Transition\n                    open={content !== undefined && visible}\n                    {...slotProps?.transition}\n                    variant={() => {\n                        return {\n                            from: {\n                                opacity: 0,\n                                transform: `scale(0) ${translate}`.trim(),\n                            },\n                            to: {\n                                opacity: 1,\n                                transform: `scale(1) ${translate}`.trim(),\n                            },\n                        }\n                    }}\n                    ref={refs?.transition}\n                >\n                    {_badge}\n                </Transition>) : <>{(content !== undefined && visible) && _badge}</>\n            }\n\n            {children}\n        </Tag>\n    )\n})\n\nexport default Badge\n\n"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","_jsx","Tag","_jsxs","Transition","_Fragment"],"mappings":"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"}

package/Badge/index.mjs

@@ -1,74 +1,107 @@
 import { __rest } from 'tslib';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React from 'react';
-import { useInterface, useBreakpointProps, useColorTemplate, Tag } from '@xanui/core';
+import { useInterface, useBreakpointProps, useColorTemplate, Tag, Transition } from '@xanui/core';
 
 const Badge = React.forwardRef((_a, ref) => {
-    var { children, content } = _a, rest = __rest(_a, ["children", "content"]);
-    let [_b] = useInterface("Badge", rest, {}), { color, placement, visible, slotProps } = _b, props = __rest(_b, ["color", "placement", "visible", "slotProps"]);
+    var { children, content, refs } = _a, rest = __rest(_a, ["children", "content", "refs"]);
+    let [_b] = useInterface("Badge", rest, {}), { color, placement, visible, slotProps, disableTransition, disableSpace } = _b, props = __rest(_b, ["color", "placement", "visible", "slotProps", "disableTransition", "disableSpace"]);
     color !== null && color !== void 0 ? color : (color = "danger");
     visible !== null && visible !== void 0 ? visible : (visible = true);
     placement !== null && placement !== void 0 ? placement : (placement = "right-top");
+    disableTransition !== null && disableTransition !== void 0 ? disableTransition : (disableTransition = false);
+    disableSpace !== null && disableSpace !== void 0 ? disableSpace : (disableSpace = false);
     const _p = {};
-    if (content)
-        _p.content = content;
-    if (color)
-        _p.color = color;
-    if (placement)
-        _p.placement = placement;
-    if (visible)
-        _p.visible = visible;
+    _p.content = content;
+    _p.color = color;
+    _p.placement = placement;
+    _p.visible = visible;
+    _p.disableTransition = disableTransition !== null && disableTransition !== void 0 ? disableTransition : false;
     const p = useBreakpointProps(_p);
     content = p.content;
     color = p.color;
     placement = p.placement;
     visible = p.visible;
-    const template = useColorTemplate(color, "fill");
-    let _css = {};
-    let pos = -3;
-    if (typeof content === "number") {
-        if (content.toString().length === 2) {
-            pos = -5;
-        }
-        else if (content.toString().length > 2) {
-            pos = -8;
-        }
-    }
+    disableTransition = p.disableTransition;
+    const isReactElement = React.isValidElement(content);
+    let template = useColorTemplate(color, "fill");
+    let _css = {
+        position: "absolute",
+    };
+    let translate = '';
     switch (placement) {
-        case "left-top":
-            _css = { top: content ? pos : 0, left: content ? pos : 0 };
-            break;
-        case "left-bottom":
-            _css = { bottom: content ? pos : 0, left: content ? pos : 0 };
-            break;
         case "right-top":
-            _css = { top: content ? pos : 0, right: content ? pos : 0 };
+            _css.top = 0;
+            _css.right = 0;
+            if (!disableSpace) {
+                translate = "translate(50%, -50%)";
+            }
             break;
         case "right-bottom":
-            _css = { bottom: content ? pos : 0, right: content ? pos : 0 };
+            _css.bottom = 0;
+            _css.right = 0;
+            if (!disableSpace) {
+                translate = "translate(50%, 50%)";
+            }
+            break;
+        case "left-top":
+            _css.top = 0;
+            _css.left = 0;
+            if (!disableSpace) {
+                translate = "translate(-50%, -50%)";
+            }
+            break;
+        case "left-bottom":
+            _css.bottom = 0;
+            _css.left = 0;
+            if (!disableSpace) {
+                translate = "translate(-50%, 50%)";
+            }
             break;
     }
-    if (content) {
-        _css.minWidth = 16;
-        _css.height = 16;
-        _css.height = 16;
-        _css.p = .8;
-        _css.px = .4;
+    if (disableTransition) {
+        _css.transform = translate;
+    }
+    if (!isReactElement) {
+        if (content !== undefined) {
+            _css.minWidth = 16;
+            _css.height = 16;
+            _css.p = .8;
+            _css.px = .4;
+        }
+        else {
+            _css.width = 8;
+            _css.height = 8;
+        }
     }
     else {
-        _css.width = 8;
-        _css.height = 8;
+        template = {};
     }
-    return (jsxs(Tag, Object.assign({}, props, { position: "relative", display: "inline-block", baseClass: 'badge', ref: ref, children: [jsx(Tag, Object.assign({ component: 'span', baseClass: 'badge-content', sxr: {
-                    position: "absolute",
-                    zIndex: 1,
-                    radius: 2,
-                    display: 'flex',
-                    justifyContent: "center",
-                    alignItems: 'center',
-                    fontWeight: 500,
-                    fontSize: 11
-                } }, template.primary, _css, { children: typeof content === 'number' ? (content >= 100 ? "99+" : content) : content })), children] })));
+    const _badge = jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { ref: refs === null || refs === void 0 ? void 0 : refs.content, component: 'span', baseClass: 'badge-content', sxr: {
+            position: "absolute",
+            zIndex: 1,
+            radius: 2,
+            display: 'flex',
+            justifyContent: "center",
+            alignItems: 'center',
+            fontWeight: 500,
+            fontSize: 11,
+            userSelect: "none",
+            pointerEvents: "none",
+            lineHeight: 1,
+        } }, template.primary, _css, { children: typeof content === 'number' ? (content >= 100 ? "99+" : content) : content }));
+    return (jsxs(Tag, Object.assign({}, props, { position: "relative", display: "inline-block", baseClass: 'badge', ref: ref, children: [!disableTransition ? (jsx(Transition, Object.assign({ open: content !== undefined && visible }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { variant: () => {
+                    return {
+                        from: {
+                            opacity: 0,
+                            transform: `scale(0) ${translate}`.trim(),
+                        },
+                        to: {
+                            opacity: 1,
+                            transform: `scale(1) ${translate}`.trim(),
+                        },
+                    };
+                }, ref: refs === null || refs === void 0 ? void 0 : refs.transition, children: _badge }))) : jsx(Fragment, { children: (content !== undefined && visible) && _badge }), children] })));
 });
 
 export { Badge as default };

package/Badge/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Badge/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, useColorTemplate, useBreakpointPropsType, useBreakpointProps, TransitionProps } from '@xanui/core';\n\n\nexport type BadgeProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"baseClass\" | \"content\"> & {\n    content?: useBreakpointPropsType<number | ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    placement?: useBreakpointPropsType<\"left-top\" | \"left-bottom\" | \"right-top\" | \"right-bottom\">;\n    visible?: useBreakpointPropsType<boolean>;\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">\n    }\n}\n\nconst Badge = React.forwardRef(<T extends TagComponentType = \"div\">({ children, content, ...rest }: BadgeProps<T>, ref: React.Ref<any>) => {\n    let [{ color, placement, visible, slotProps, ...props }] = useInterface<any>(\"Badge\", rest, {})\n    color ??= \"danger\"\n    visible ??= true\n    placement ??= \"right-top\"\n\n    const _p: any = {}\n\n    if (content) _p.content = content\n    if (color) _p.color = color\n    if (placement) _p.placement = placement\n    if (visible) _p.visible = visible\n\n    const p: any = useBreakpointProps(_p)\n\n    content = p.content\n    color = p.color\n    placement = p.placement\n    visible = p.visible\n\n    const template = useColorTemplate(color, \"fill\")\n    let _css: any = {}\n    let pos = -3;\n    if (typeof content === \"number\") {\n        if (content.toString().length === 2) {\n            pos = -5\n        } else if (content.toString().length > 2) {\n            pos = -8\n        }\n    }\n\n    switch (placement) {\n        case \"left-top\":\n            _css = { top: content ? pos : 0, left: content ? pos : 0 }\n            break;\n        case \"left-bottom\":\n            _css = { bottom: content ? pos : 0, left: content ? pos : 0 }\n            break;\n        case \"right-top\":\n            _css = { top: content ? pos : 0, right: content ? pos : 0 }\n            break;\n        case \"right-bottom\":\n            _css = { bottom: content ? pos : 0, right: content ? pos : 0 }\n            break;\n    }\n    if (content) {\n        _css.minWidth = 16\n        _css.height = 16\n        _css.height = 16\n        _css.p = .8\n        _css.px = .4\n    } else {\n        _css.width = 8\n        _css.height = 8\n    }\n\n    return (\n        <Tag\n            {...props}\n            position=\"relative\"\n            display=\"inline-block\"\n            baseClass='badge'\n            ref={ref}\n        >\n            <Tag\n                component='span'\n                baseClass='badge-content'\n                sxr={{\n                    position: \"absolute\",\n                    zIndex: 1,\n                    radius: 2,\n                    display: 'flex',\n                    justifyContent: \"center\",\n                    alignItems: 'center',\n                    fontWeight: 500,\n                    fontSize: 11\n                }}\n                {...template.primary}\n                {..._css}\n            >\n                {typeof content === 'number' ? (content >= 100 ? \"99+\" : content) : content}\n            </Tag>\n            {children}\n        </Tag>\n    )\n})\n\nexport default Badge\n\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Badge/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, Transition, useInterface, UseColorTemplateColor, useColorTemplate, useBreakpointPropsType, useBreakpointProps, TransitionProps } from '@xanui/core';\n\nexport type BadgeProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"baseClass\" | \"content\"> & {\n    content?: useBreakpointPropsType<number | ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    placement?: useBreakpointPropsType<\"left-top\" | \"left-bottom\" | \"right-top\" | \"right-bottom\">;\n    visible?: useBreakpointPropsType<boolean>;\n    disableTransition?: boolean;\n    disableSpace?: boolean;\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">;\n        content?: Omit<TagProps<\"span\">, \"children\">;\n    },\n    refs?: {\n        content?: React.Ref<any>;\n        transition?: React.Ref<any>;\n    };\n}\n\nconst Badge = React.forwardRef(<T extends TagComponentType = \"div\">({ children, content, refs, ...rest }: BadgeProps<T>, ref: React.Ref<any>) => {\n    let [{ color, placement, visible, slotProps, disableTransition, disableSpace, ...props }] = useInterface<any>(\"Badge\", rest, {})\n    color ??= \"danger\"\n    visible ??= true\n    placement ??= \"right-top\"\n    disableTransition ??= false\n    disableSpace ??= false\n\n    const _p: any = {}\n\n    _p.content = content\n    _p.color = color\n    _p.placement = placement\n    _p.visible = visible\n    _p.disableTransition = disableTransition ?? false\n\n    const p: any = useBreakpointProps(_p)\n\n    content = p.content\n    color = p.color\n    placement = p.placement\n    visible = p.visible\n    disableTransition = p.disableTransition\n\n    const isReactElement = React.isValidElement(content);\n\n    let template: any = useColorTemplate(color, \"fill\")\n    let _css: any = {\n        position: \"absolute\",\n    }\n\n    let translate = ''\n\n    switch (placement) {\n        case \"right-top\":\n            _css.top = 0;\n            _css.right = 0;\n            if (!disableSpace) {\n                translate = \"translate(50%, -50%)\";\n            }\n            break;\n        case \"right-bottom\":\n            _css.bottom = 0;\n            _css.right = 0;\n            if (!disableSpace) {\n                translate = \"translate(50%, 50%)\";\n            }\n            break;\n        case \"left-top\":\n            _css.top = 0;\n            _css.left = 0;\n            if (!disableSpace) {\n                translate = \"translate(-50%, -50%)\";\n            }\n            break;\n        case \"left-bottom\":\n            _css.bottom = 0;\n            _css.left = 0;\n            if (!disableSpace) {\n                translate = \"translate(-50%, 50%)\";\n            }\n            break;\n    }\n\n    if (disableTransition) {\n        _css.transform = translate\n    }\n\n    if (!isReactElement) {\n        if (content !== undefined) {\n            _css.minWidth = 16\n            _css.height = 16\n            _css.p = .8\n            _css.px = .4\n        } else {\n            _css.width = 8\n            _css.height = 8\n        }\n    } else {\n        template = {}\n    }\n\n    const _badge = <Tag\n        {...slotProps?.content}\n        ref={refs?.content}\n        component='span'\n        baseClass='badge-content'\n        sxr={{\n            position: \"absolute\",\n            zIndex: 1,\n            radius: 2,\n            display: 'flex',\n            justifyContent: \"center\",\n            alignItems: 'center',\n            fontWeight: 500,\n            fontSize: 11,\n            userSelect: \"none\",\n            pointerEvents: \"none\",\n            lineHeight: 1,\n        }}\n        {...template.primary}\n        {..._css}\n    >\n        {typeof content === 'number' ? (content >= 100 ? \"99+\" : content) : content}\n    </Tag>\n\n    return (\n        <Tag\n            {...props}\n            position=\"relative\"\n            display=\"inline-block\"\n            baseClass='badge'\n            ref={ref}\n        >\n            {\n                !disableTransition ? (<Transition\n                    open={content !== undefined && visible}\n                    {...slotProps?.transition}\n                    variant={() => {\n                        return {\n                            from: {\n                                opacity: 0,\n                                transform: `scale(0) ${translate}`.trim(),\n                            },\n                            to: {\n                                opacity: 1,\n                                transform: `scale(1) ${translate}`.trim(),\n                            },\n                        }\n                    }}\n                    ref={refs?.transition}\n                >\n                    {_badge}\n                </Transition>) : <>{(content !== undefined && visible) && _badge}</>\n            }\n\n            {children}\n        </Tag>\n    )\n})\n\nexport default Badge\n\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/Portal/index.js

@@ -14,7 +14,7 @@ const Portal = ({ children, appendTo, container }) => {
         appendTo.appendChild(_con);
         _con.className = "xui-portal";
         return _con;
-    }, []);
+    }, [container]);
     React.useEffect(() => {
         return () => {
             appendTo.removeChild(c);

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    }, [])\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;;;AAIA;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.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;;"}

package/Portal/index.mjs

@@ -12,7 +12,7 @@ const Portal = ({ children, appendTo, container }) => {
         appendTo.appendChild(_con);
         _con.className = "xui-portal";
         return _con;
-    }, []);
+    }, [container]);
     useEffect(() => {
         return () => {
             appendTo.removeChild(c);

package/Portal/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","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    }, [])\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;;;AAIA;AACK;AACL;;AAGJ;AAMJ;;"}
+{"version":3,"file":"index.mjs","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;;"}

package/Select/index.d.ts

@@ -12,6 +12,7 @@ type SelectProps = {
     placeholder?: useBreakpointPropsType<string>;
     color?: useBreakpointPropsType<UseColorTemplateColor>;
     variant?: useBreakpointPropsType<UseColorTemplateType>;
+    fullWidth?: boolean;
     refs?: {
         input?: React.Ref<any>;
         menu?: React.Ref<any>;

package/Select/index.js

@@ -13,9 +13,9 @@ var UpIcon = require('@xanui/icons/KeyboardArrowUp');
 var core = require('@xanui/core');
 
 const Select = React.forwardRef((_a, ref) => {
-    var _b, _c, _d, _e, _f;
+    var _b, _c, _d, _e, _f, _g;
     var { onChange, value, children, refs } = _a, props = tslib.__rest(_a, ["onChange", "value", "children", "refs"]);
-    let [{ slotProps, color, variant, placeholder }] = core.useInterface("Select", props, {});
+    let [{ slotProps, color, variant, fullWidth, placeholder }] = core.useInterface("Select", props, {});
     color !== null && color !== void 0 ? color : (color = "brand");
     variant !== null && variant !== void 0 ? variant : (variant = "fill");
     const [target, setTarget] = React.useState();
@@ -42,11 +42,9 @@ const Select = React.forwardRef((_a, ref) => {
     }, [children, value]);
     const mergeRefs = core.useMergeRefs(ref, conRef);
     const toggleMenu = () => setTarget(target ? null : conRef.current);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index, Object.assign({ ref: mergeRefs, color: color, variant: variant === "soft" ? "fill" : variant, endIcon: jsxRuntime.jsxs(index$1, { flexDirection: "row", component: "span", children: [" ", (target ? jsxRuntime.jsx(UpIcon, {}) : jsxRuntime.jsx(DownIcon, {}))] }), readOnly: true, value: typeof selectedProps.children === 'string' ? selectedProps.children : value, cursor: "pointer", userSelect: "none", startIcon: selectedProps.startIcon, focused: !!target, placeholder: placeholder }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { refs: Object.assign({ input: refs === null || refs === void 0 ? void 0 : refs.input }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _b === void 0 ? void 0 : _b.refs), slotProps: {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index, Object.assign({ ref: mergeRefs, color: color, variant: variant === "soft" ? "fill" : variant, endIcon: jsxRuntime.jsxs(index$1, { flexDirection: "row", component: "span", children: [" ", (target ? jsxRuntime.jsx(UpIcon, {}) : jsxRuntime.jsx(DownIcon, {}))] }), readOnly: true, value: typeof selectedProps.children === 'string' ? selectedProps.children : value, cursor: "pointer", userSelect: "none", startIcon: selectedProps.startIcon, focused: !!target, placeholder: placeholder, fullWidth: fullWidth }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { refs: Object.assign({ input: refs === null || refs === void 0 ? void 0 : refs.input }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _b === void 0 ? void 0 : _b.refs), slotProps: {
                     rootContainer: Object.assign(Object.assign({ cursor: "pointer", userSelect: "none" }, (((_d = (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _c === void 0 ? void 0 : _c.slotProps) === null || _d === void 0 ? void 0 : _d.container) || {})), { onClick: toggleMenu })
-                } })), jsxRuntime.jsx(index$2, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.menu, target: target, placement: "bottom-left" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { slotProps: {
-                    content: Object.assign(Object.assign({ mt: .5 }, (_e = slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu) === null || _e === void 0 ? void 0 : _e.content), { width: conRef && ((_f = conRef === null || conRef === void 0 ? void 0 : conRef.current) === null || _f === void 0 ? void 0 : _f.clientWidth) })
-                }, onClickOutside: toggleMenu, children: jsxRuntime.jsx(index$3, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.list }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant, children: childs })) }))] }));
+                } })), jsxRuntime.jsx(index$2, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.menu, target: target, placement: "bottom-left" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { slotProps: Object.assign(Object.assign({}, (_e = slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu) === null || _e === void 0 ? void 0 : _e.slotProps), { content: Object.assign(Object.assign({ mt: .5 }, (_f = slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu) === null || _f === void 0 ? void 0 : _f.content), { width: conRef && ((_g = conRef === null || conRef === void 0 ? void 0 : conRef.current) === null || _g === void 0 ? void 0 : _g.clientWidth) }) }), onClickOutside: toggleMenu, children: jsxRuntime.jsx(index$3, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.list }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant, children: childs })) }))] }));
 });
 
 module.exports = Select;

package/Select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { UseColorTemplateColor, UseColorTemplateType, useInterface, useBreakpointPropsType, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = {\n    value?: string | number;\n    onChange?: (value: string | number) => void;\n    children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n    placeholder?: useBreakpointPropsType<string>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    refs?: {\n        input?: React.Ref<any>;\n        menu?: React.Ref<any>;\n        list?: React.Ref<any>;\n    };\n    slotProps?: {\n        menu?: Omit<MenuProps, 'children' | 'target'>;\n        input?: Omit<InputProps, \"onChange\" | \"value\">;\n        list?: Omit<ListProps, \"children\">\n    }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n    let [{ slotProps, color, variant, placeholder }] = useInterface<any>(\"Select\", props, {})\n    color ??= \"brand\"\n    variant ??= \"fill\"\n    const [target, setTarget] = useState<any>()\n    const conRef = useRef(null)\n    const { childs, selectedProps } = useMemo(() => {\n        let sProps: any = {}\n        const c = Children.map(children, (child: any) => {\n            let selected = child.props.value === value\n            if (selected) sProps = child.props\n            return cloneElement(child, {\n                value: undefined,\n                selected,\n                onClick: () => {\n                    setTarget(null)\n                    onChange && onChange(child.props.value)\n                }\n            })\n        })\n        return {\n            childs: c,\n            selectedProps: sProps as OptionProps\n        }\n    }, [children, value])\n\n    const mergeRefs = useMergeRefs(ref, conRef)\n    const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n    return (\n        <>\n            <Input\n                ref={mergeRefs}\n                color={color}\n                variant={variant === \"soft\" ? \"fill\" : variant}\n                endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n                readOnly\n                value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n                cursor=\"pointer\"\n                userSelect=\"none\"\n                startIcon={selectedProps.startIcon}\n                focused={!!target}\n                placeholder={placeholder}\n                {...slotProps?.input}\n                refs={{\n                    input: refs?.input,\n                    ...slotProps?.input?.refs\n                }}\n                slotProps={{\n                    rootContainer: {\n                        cursor: \"pointer\",\n                        userSelect: \"none\",\n                        ...(slotProps?.input?.slotProps?.container || {}),\n                        onClick: toggleMenu,\n                    }\n                }}\n            />\n            <Menu\n                ref={refs?.menu}\n                target={target}\n                placement=\"bottom-left\"\n                {...slotProps?.menu}\n                slotProps={{\n                    content: {\n                        mt: .5,\n                        ...slotProps?.menu?.content,\n                        width: conRef && (conRef?.current as any)?.clientWidth,\n                    }\n                }}\n                onClickOutside={toggleMenu}\n            >\n                <List\n                    ref={refs?.list}\n                    {...slotProps?.list}\n                    color={color}\n                    variant={variant}\n                >\n                    {childs}\n                </List>\n            </Menu>\n        </>\n    )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;;;AAgCA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAoBgB;AAMH;AAQG;AAKH;AAcjB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { UseColorTemplateColor, UseColorTemplateType, useInterface, useBreakpointPropsType, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = {\n    value?: string | number;\n    onChange?: (value: string | number) => void;\n    children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n    placeholder?: useBreakpointPropsType<string>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    fullWidth?: boolean;\n    refs?: {\n        input?: React.Ref<any>;\n        menu?: React.Ref<any>;\n        list?: React.Ref<any>;\n    };\n    slotProps?: {\n        menu?: Omit<MenuProps, 'children' | 'target'>;\n        input?: Omit<InputProps, \"onChange\" | \"value\">;\n        list?: Omit<ListProps, \"children\">\n    }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n    let [{ slotProps, color, variant, fullWidth, placeholder }] = useInterface<any>(\"Select\", props, {})\n    color ??= \"brand\"\n    variant ??= \"fill\"\n    const [target, setTarget] = useState<any>()\n    const conRef = useRef(null)\n    const { childs, selectedProps } = useMemo(() => {\n        let sProps: any = {}\n        const c = Children.map(children, (child: any) => {\n            let selected = child.props.value === value\n            if (selected) sProps = child.props\n            return cloneElement(child, {\n                value: undefined,\n                selected,\n                onClick: () => {\n                    setTarget(null)\n                    onChange && onChange(child.props.value)\n                }\n            })\n        })\n        return {\n            childs: c,\n            selectedProps: sProps as OptionProps\n        }\n    }, [children, value])\n\n    const mergeRefs = useMergeRefs(ref, conRef)\n    const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n    return (\n        <>\n            <Input\n                ref={mergeRefs}\n                color={color}\n                variant={variant === \"soft\" ? \"fill\" : variant}\n                endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n                readOnly\n                value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n                cursor=\"pointer\"\n                userSelect=\"none\"\n                startIcon={selectedProps.startIcon}\n                focused={!!target}\n                placeholder={placeholder}\n                fullWidth={fullWidth}\n                {...slotProps?.input}\n                refs={{\n                    input: refs?.input,\n                    ...slotProps?.input?.refs\n                }}\n                slotProps={{\n                    rootContainer: {\n                        cursor: \"pointer\",\n                        userSelect: \"none\",\n                        ...(slotProps?.input?.slotProps?.container || {}),\n                        onClick: toggleMenu,\n                    }\n                }}\n            />\n            <Menu\n                ref={refs?.menu}\n                target={target}\n                placement=\"bottom-left\"\n                {...slotProps?.menu}\n                slotProps={{\n                    ...slotProps?.menu?.slotProps,\n                    content: {\n                        mt: .5,\n                        ...slotProps?.menu?.content,\n                        width: conRef && (conRef?.current as any)?.clientWidth,\n                    }\n                }}\n                onClickOutside={toggleMenu}\n            >\n                <List\n                    ref={refs?.list}\n                    {...slotProps?.list}\n                    color={color}\n                    variant={variant}\n                >\n                    {childs}\n                </List>\n            </Menu>\n        </>\n    )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;;;AAiCA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAqBgB;;AAkCpB;;"}

package/Select/index.mjs

@@ -11,9 +11,9 @@ import UpIcon from '@xanui/icons/KeyboardArrowUp';
 import { useInterface, useMergeRefs } from '@xanui/core';
 
 const Select = React.forwardRef((_a, ref) => {
-    var _b, _c, _d, _e, _f;
+    var _b, _c, _d, _e, _f, _g;
     var { onChange, value, children, refs } = _a, props = __rest(_a, ["onChange", "value", "children", "refs"]);
-    let [{ slotProps, color, variant, placeholder }] = useInterface("Select", props, {});
+    let [{ slotProps, color, variant, fullWidth, placeholder }] = useInterface("Select", props, {});
     color !== null && color !== void 0 ? color : (color = "brand");
     variant !== null && variant !== void 0 ? variant : (variant = "fill");
     const [target, setTarget] = useState();
@@ -40,11 +40,9 @@ const Select = React.forwardRef((_a, ref) => {
     }, [children, value]);
     const mergeRefs = useMergeRefs(ref, conRef);
     const toggleMenu = () => setTarget(target ? null : conRef.current);
-    return (jsxs(Fragment, { children: [jsx(Input, Object.assign({ ref: mergeRefs, color: color, variant: variant === "soft" ? "fill" : variant, endIcon: jsxs(Stack, { flexDirection: "row", component: "span", children: [" ", (target ? jsx(UpIcon, {}) : jsx(DownIcon, {}))] }), readOnly: true, value: typeof selectedProps.children === 'string' ? selectedProps.children : value, cursor: "pointer", userSelect: "none", startIcon: selectedProps.startIcon, focused: !!target, placeholder: placeholder }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { refs: Object.assign({ input: refs === null || refs === void 0 ? void 0 : refs.input }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _b === void 0 ? void 0 : _b.refs), slotProps: {
+    return (jsxs(Fragment, { children: [jsx(Input, Object.assign({ ref: mergeRefs, color: color, variant: variant === "soft" ? "fill" : variant, endIcon: jsxs(Stack, { flexDirection: "row", component: "span", children: [" ", (target ? jsx(UpIcon, {}) : jsx(DownIcon, {}))] }), readOnly: true, value: typeof selectedProps.children === 'string' ? selectedProps.children : value, cursor: "pointer", userSelect: "none", startIcon: selectedProps.startIcon, focused: !!target, placeholder: placeholder, fullWidth: fullWidth }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { refs: Object.assign({ input: refs === null || refs === void 0 ? void 0 : refs.input }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _b === void 0 ? void 0 : _b.refs), slotProps: {
                     rootContainer: Object.assign(Object.assign({ cursor: "pointer", userSelect: "none" }, (((_d = (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _c === void 0 ? void 0 : _c.slotProps) === null || _d === void 0 ? void 0 : _d.container) || {})), { onClick: toggleMenu })
-                } })), jsx(Menu, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.menu, target: target, placement: "bottom-left" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { slotProps: {
-                    content: Object.assign(Object.assign({ mt: .5 }, (_e = slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu) === null || _e === void 0 ? void 0 : _e.content), { width: conRef && ((_f = conRef === null || conRef === void 0 ? void 0 : conRef.current) === null || _f === void 0 ? void 0 : _f.clientWidth) })
-                }, onClickOutside: toggleMenu, children: jsx(List, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.list }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant, children: childs })) }))] }));
+                } })), jsx(Menu, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.menu, target: target, placement: "bottom-left" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { slotProps: Object.assign(Object.assign({}, (_e = slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu) === null || _e === void 0 ? void 0 : _e.slotProps), { content: Object.assign(Object.assign({ mt: .5 }, (_f = slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu) === null || _f === void 0 ? void 0 : _f.content), { width: conRef && ((_g = conRef === null || conRef === void 0 ? void 0 : conRef.current) === null || _g === void 0 ? void 0 : _g.clientWidth) }) }), onClickOutside: toggleMenu, children: jsx(List, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.list }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant, children: childs })) }))] }));
 });
 
 export { Select as default };

package/Select/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { UseColorTemplateColor, UseColorTemplateType, useInterface, useBreakpointPropsType, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = {\n    value?: string | number;\n    onChange?: (value: string | number) => void;\n    children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n    placeholder?: useBreakpointPropsType<string>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    refs?: {\n        input?: React.Ref<any>;\n        menu?: React.Ref<any>;\n        list?: React.Ref<any>;\n    };\n    slotProps?: {\n        menu?: Omit<MenuProps, 'children' | 'target'>;\n        input?: Omit<InputProps, \"onChange\" | \"value\">;\n        list?: Omit<ListProps, \"children\">\n    }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n    let [{ slotProps, color, variant, placeholder }] = useInterface<any>(\"Select\", props, {})\n    color ??= \"brand\"\n    variant ??= \"fill\"\n    const [target, setTarget] = useState<any>()\n    const conRef = useRef(null)\n    const { childs, selectedProps } = useMemo(() => {\n        let sProps: any = {}\n        const c = Children.map(children, (child: any) => {\n            let selected = child.props.value === value\n            if (selected) sProps = child.props\n            return cloneElement(child, {\n                value: undefined,\n                selected,\n                onClick: () => {\n                    setTarget(null)\n                    onChange && onChange(child.props.value)\n                }\n            })\n        })\n        return {\n            childs: c,\n            selectedProps: sProps as OptionProps\n        }\n    }, [children, value])\n\n    const mergeRefs = useMergeRefs(ref, conRef)\n    const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n    return (\n        <>\n            <Input\n                ref={mergeRefs}\n                color={color}\n                variant={variant === \"soft\" ? \"fill\" : variant}\n                endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n                readOnly\n                value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n                cursor=\"pointer\"\n                userSelect=\"none\"\n                startIcon={selectedProps.startIcon}\n                focused={!!target}\n                placeholder={placeholder}\n                {...slotProps?.input}\n                refs={{\n                    input: refs?.input,\n                    ...slotProps?.input?.refs\n                }}\n                slotProps={{\n                    rootContainer: {\n                        cursor: \"pointer\",\n                        userSelect: \"none\",\n                        ...(slotProps?.input?.slotProps?.container || {}),\n                        onClick: toggleMenu,\n                    }\n                }}\n            />\n            <Menu\n                ref={refs?.menu}\n                target={target}\n                placement=\"bottom-left\"\n                {...slotProps?.menu}\n                slotProps={{\n                    content: {\n                        mt: .5,\n                        ...slotProps?.menu?.content,\n                        width: conRef && (conRef?.current as any)?.clientWidth,\n                    }\n                }}\n                onClickOutside={toggleMenu}\n            >\n                <List\n                    ref={refs?.list}\n                    {...slotProps?.list}\n                    color={color}\n                    variant={variant}\n                >\n                    {childs}\n                </List>\n            </Menu>\n        </>\n    )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;AAgCA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAoBgB;AAMH;AAQG;AAKH;AAcjB;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { UseColorTemplateColor, UseColorTemplateType, useInterface, useBreakpointPropsType, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = {\n    value?: string | number;\n    onChange?: (value: string | number) => void;\n    children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n    placeholder?: useBreakpointPropsType<string>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    fullWidth?: boolean;\n    refs?: {\n        input?: React.Ref<any>;\n        menu?: React.Ref<any>;\n        list?: React.Ref<any>;\n    };\n    slotProps?: {\n        menu?: Omit<MenuProps, 'children' | 'target'>;\n        input?: Omit<InputProps, \"onChange\" | \"value\">;\n        list?: Omit<ListProps, \"children\">\n    }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n    let [{ slotProps, color, variant, fullWidth, placeholder }] = useInterface<any>(\"Select\", props, {})\n    color ??= \"brand\"\n    variant ??= \"fill\"\n    const [target, setTarget] = useState<any>()\n    const conRef = useRef(null)\n    const { childs, selectedProps } = useMemo(() => {\n        let sProps: any = {}\n        const c = Children.map(children, (child: any) => {\n            let selected = child.props.value === value\n            if (selected) sProps = child.props\n            return cloneElement(child, {\n                value: undefined,\n                selected,\n                onClick: () => {\n                    setTarget(null)\n                    onChange && onChange(child.props.value)\n                }\n            })\n        })\n        return {\n            childs: c,\n            selectedProps: sProps as OptionProps\n        }\n    }, [children, value])\n\n    const mergeRefs = useMergeRefs(ref, conRef)\n    const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n    return (\n        <>\n            <Input\n                ref={mergeRefs}\n                color={color}\n                variant={variant === \"soft\" ? \"fill\" : variant}\n                endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n                readOnly\n                value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n                cursor=\"pointer\"\n                userSelect=\"none\"\n                startIcon={selectedProps.startIcon}\n                focused={!!target}\n                placeholder={placeholder}\n                fullWidth={fullWidth}\n                {...slotProps?.input}\n                refs={{\n                    input: refs?.input,\n                    ...slotProps?.input?.refs\n                }}\n                slotProps={{\n                    rootContainer: {\n                        cursor: \"pointer\",\n                        userSelect: \"none\",\n                        ...(slotProps?.input?.slotProps?.container || {}),\n                        onClick: toggleMenu,\n                    }\n                }}\n            />\n            <Menu\n                ref={refs?.menu}\n                target={target}\n                placement=\"bottom-left\"\n                {...slotProps?.menu}\n                slotProps={{\n                    ...slotProps?.menu?.slotProps,\n                    content: {\n                        mt: .5,\n                        ...slotProps?.menu?.content,\n                        width: conRef && (conRef?.current as any)?.clientWidth,\n                    }\n                }}\n                onClickOutside={toggleMenu}\n            >\n                <List\n                    ref={refs?.list}\n                    {...slotProps?.list}\n                    color={color}\n                    variant={variant}\n                >\n                    {childs}\n                </List>\n            </Menu>\n        </>\n    )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;AAiCA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAqBgB;;AAkCpB;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xanui/ui",
-  "version": "1.1.21",
+  "version": "1.1.22",
   "description": "",
   "private": false,
   "main": "./index.js",