@xanui/ui 1.1.20 → 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/Input/index.d.ts

@@ -1,23 +1,49 @@
-import React, { ReactElement, MutableRefObject } from 'react';
+import React, { ReactElement } from 'react';
 import { TagComponentType, TagProps, useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';
 
-type InputProps<T extends TagComponentType = "input"> = Omit<TagProps<T>, "size" | "color"> & {
+type InputProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, "size" | "color"> & {
+    value?: string;
+    type?: TagProps<'input'>['type'];
+    name?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    autoFocus?: boolean;
+    autoComplete?: string;
+    onFocus?: (e: React.FocusEvent<any>) => void;
+    onBlur?: (e: React.FocusEvent<any>) => void;
+    onChange?: (e: React.ChangeEvent<any>) => void;
+    onInput?: (e: React.FormEvent<any>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<any>) => void;
+    onKeyUp?: (e: React.KeyboardEvent<any>) => void;
+    rows?: useBreakpointPropsType<number>;
+    minRows?: useBreakpointPropsType<number>;
+    maxRows?: useBreakpointPropsType<number>;
+    fullWidth?: boolean;
     startIcon?: useBreakpointPropsType<ReactElement>;
     endIcon?: useBreakpointPropsType<ReactElement>;
     iconPlacement?: useBreakpointPropsType<"start" | "center" | "end">;
     focused?: boolean;
     color?: useBreakpointPropsType<Omit<UseColorTemplateColor, "default">>;
-    containerRef?: MutableRefObject<HTMLDivElement | undefined>;
     variant?: useBreakpointPropsType<"fill" | "outline" | "text">;
     error?: boolean;
     helperText?: useBreakpointPropsType<string>;
     multiline?: boolean;
     size?: useBreakpointPropsType<"small" | "medium" | "large">;
-    rows?: useBreakpointPropsType<number>;
-    minRows?: useBreakpointPropsType<number>;
-    maxRows?: useBreakpointPropsType<number>;
+    refs?: {
+        rootContainer?: React.Ref<"div">;
+        startIcon?: React.Ref<ReactElement>;
+        endIcon?: React.Ref<ReactElement>;
+        inputContainer?: React.Ref<"div">;
+        input?: React.Ref<'input' | 'textarea'>;
+        helperText?: React.Ref<"div">;
+    };
     slotProps?: {
-        container?: Omit<TagProps<"div">, "children">;
+        rootContainer?: Omit<TagProps<"div">, "children">;
+        startIcon?: Omit<TagProps<'div'>, "children">;
+        endIcon?: Omit<TagProps<'div'>, "children">;
+        inputContainer?: Omit<TagProps<"div">, "children">;
+        helperText?: Omit<TagProps<"div">, "children">;
+        input?: Partial<TagProps<T>>;
     };
 };
 declare const Input: React.ForwardRefExoticComponent<Omit<InputProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;

package/Input/index.js

@@ -5,12 +5,11 @@ var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var core = require('@xanui/core');
-var index = require('../Text/index.js');
 
 const Input = React.forwardRef((_a, ref) => {
     var _b, _c, _d;
-    var { value } = _a, props = tslib.__rest(_a, ["value"]);
-    let [_e, theme] = core.useInterface("Input", props, {}), { startIcon, endIcon, iconPlacement, onFocus, color, onBlur, focused, containerRef, disabled, variant, error, helperText, multiline, size, rows, minRows, maxRows, slotProps } = _e, rest = tslib.__rest(_e, ["startIcon", "endIcon", "iconPlacement", "onFocus", "color", "onBlur", "focused", "containerRef", "disabled", "variant", "error", "helperText", "multiline", "size", "rows", "minRows", "maxRows", "slotProps"]);
+    var { value, refs } = _a, props = tslib.__rest(_a, ["value", "refs"]);
+    let [_e, theme] = core.useInterface("Input", props, {}), { startIcon, endIcon, iconPlacement, color, name, placeholder, type, readOnly, autoFocus, autoComplete, onFocus, onBlur, onChange, onKeyDown, onKeyUp, focused, disabled, variant, error, helperText, multiline, size, rows, minRows, maxRows, fullWidth, slotProps } = _e, rest = tslib.__rest(_e, ["startIcon", "endIcon", "iconPlacement", "color", "name", "placeholder", "type", "readOnly", "autoFocus", "autoComplete", "onFocus", "onBlur", "onChange", "onKeyDown", "onKeyUp", "focused", "disabled", "variant", "error", "helperText", "multiline", "size", "rows", "minRows", "maxRows", "fullWidth", "slotProps"]);
     const _p = {};
     if (startIcon)
         _p.startIcon = startIcon;
@@ -43,18 +42,21 @@ const Input = React.forwardRef((_a, ref) => {
     rows = p.rows;
     minRows = p.minRows;
     maxRows = p.maxRows;
-    ref !== null && ref !== void 0 ? ref : (ref = React.useRef(null));
     iconPlacement !== null && iconPlacement !== void 0 ? iconPlacement : (iconPlacement = multiline ? "end" : "center");
     if (!value)
         iconPlacement = 'center';
     const [_focused, setFocused] = React.useState(false);
-    const conRef = React.useRef(null);
     let _focus = focused || _focused;
+    const inputRef = React.useRef(null);
+    const inputMergeRef = core.useMergeRefs(inputRef, refs === null || refs === void 0 ? void 0 : refs.input);
     React.useEffect(() => {
-        if (containerRef) {
-            containerRef.current = conRef === null || conRef === void 0 ? void 0 : conRef.current;
+        if (autoFocus) {
+            setTimeout(() => {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 100);
         }
-    }, [containerRef]);
+    }, [autoFocus]);
     let _rows = React.useMemo(() => {
         if (rows)
             return rows;
@@ -100,18 +102,18 @@ const Input = React.forwardRef((_a, ref) => {
             }
         };
     }
-    React.useEffect(() => {
-        if (ref.current) {
-            ref.current.style.height = "auto";
-            ref.current.style.height = `${ref.current.scrollHeight}px`;
-        }
-    }, [value]);
-    return (jsxRuntime.jsxs(core.Tag, { baseClass: `input${_focus ? " input-focused" : ""}`, children: [jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.container, { sxr: {
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({ width: fullWidth ? "100%" : undefined }, rest, { ref: ref, baseClass: 'input-root', classNames: {
+            'input-full-width': fullWidth || false,
+            'input-focused': _focus,
+            'input-error': error || false,
+            [`input-variant-${variant}`]: true,
+            [`input-size-${size}`]: true,
+        }, children: [jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rootContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.rootContainer, baseClass: 'root-container', sxr: {
+                    width: "100%",
                     display: "flex",
                     flexDirection: "row",
                     alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,
                     flexWrap: "nowrap",
-                    // minWidth: 100,
                     transitionProperty: "border, box-shadow, background",
                     bgcolor: error ? "danger.soft.primary" : variant === "fill" ? "background.secondary" : "background.primary",
                     border: variant === "text" ? 0 : "1px solid",
@@ -119,13 +121,14 @@ const Input = React.forwardRef((_a, ref) => {
                     borderRadius: 1,
                     px: 1,
                     py: .5,
-                }, baseClass: 'input-container', disabled: disabled || false, ref: conRef }, _size, { height: multiline ? "auto" : _size.height, minHeight: _size.height, children: [startIcon && jsxRuntime.jsx(core.Tag, { flex: "0 0 auto", sxr: {
+                }, disabled: disabled || false }, _size, { height: multiline ? "auto" : _size.height, minHeight: _size.height, children: [startIcon && jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.startIcon, { ref: refs === null || refs === void 0 ? void 0 : refs.startIcon, flex: "0 0 auto", sxr: {
                             height: "100%",
                             alignItems: 'center',
                             justifyContent: "center",
                             display: "flex",
                             color: error ? "danger.primary" : "text.secondary",
-                        }, baseClass: "input-start-icon", children: startIcon }), jsxRuntime.jsx(core.Tag, { flex: 1, sxr: {
+                        }, baseClass: "input-start-icon", children: startIcon })), jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.inputContainer, baseClass: 'input-container', flex: 1, sxr: {
+                            width: "100%",
                             display: "flex",
                             alignItems: "center",
                             flex: 1,
@@ -138,7 +141,7 @@ const Input = React.forwardRef((_a, ref) => {
                                 "box-shadow": `0 0 0px 1000px ${variant === "fill" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,
                                 transition: "background-color 5000s ease-in-out 0s"
                             }
-                        }, children: jsxRuntime.jsx(core.Tag, Object.assign({ component: multiline ? 'textarea' : 'input' }, multiprops, rest, { sxr: {
+                        }, children: jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { ref: inputMergeRef, baseClass: 'input', component: multiline ? 'textarea' : 'input' }, multiprops, { sxr: {
                                 border: 0,
                                 outline: 0,
                                 bgcolor: "transparent",
@@ -147,19 +150,25 @@ const Input = React.forwardRef((_a, ref) => {
                                 height: multiline ? "auto" : _size.height + "px!important",
                                 width: "100%",
                                 maxHeight: 200,
-                            }, value: value, baseClass: 'input-box', ref: ref, onFocus: (e) => {
+                            }, value: value, onChange: onChange, onFocus: (e) => {
                                 focused !== null && focused !== void 0 ? focused : setFocused(true);
                                 onFocus && onFocus(e);
                             }, onBlur: (e) => {
                                 focused !== null && focused !== void 0 ? focused : setFocused(false);
                                 onBlur && onBlur(e);
-                            } })) }), endIcon && jsxRuntime.jsx(core.Tag, { flex: "0 0 auto", sxr: {
+                            }, onKeyDown: onKeyDown, onKeyUp: onKeyUp, name: name, placeholder: placeholder, type: type, readOnly: readOnly, autoComplete: autoComplete })) })), endIcon && jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.endIcon, { ref: refs === null || refs === void 0 ? void 0 : refs.endIcon, flex: "0 0 auto", sxr: {
                             height: "100%",
                             alignItems: 'center',
                             justifyContent: "center",
                             display: 'flex',
                             color: error ? "danger.primary" : "text.secondary",
-                        }, baseClass: "input-end-icon", children: endIcon })] })), helperText && jsxRuntime.jsx(index, { pl: .5, className: "input-helper-text", fontSize: "small", color: error ? "danger.primary" : "text.primary", children: helperText })] }));
+                        }, baseClass: "input-end-icon", children: endIcon }))] })), helperText && jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.helperText, { ref: refs === null || refs === void 0 ? void 0 : refs.helperText, baseClass: "input-helper-text", sxr: {
+                    color: error ? "danger.primary" : "text.primary",
+                    fontSize: "small",
+                    lineHeight: "text",
+                    fontWeight: 'text',
+                    pl: .5,
+                }, children: helperText }))] })));
 });
 
 module.exports = Input;