@xanui/ui 1.0.0

package/Alert/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\nimport { Tag, TagProps, useBreakpointProps, TransitionVariantTypes, useColorTemplate, ColorTemplateColors, ColorTemplateType, useInterface, useBreakpointPropsType } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement, ReactNode } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\n    color?: useBreakpointPropsType<ColorTemplateColors>;\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n    onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n    let [{\n        title,\n        variant,\n        icon,\n        color,\n        direction,\n        slotProps,\n        onClose,\n        ..._props\n    }] = useInterface<any>(\"Alert\", rest, {\n        variant: \"fill\"\n    })\n    color ??= \"default\"\n    direction ??= \"row\"\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (variant) _p.variant = variant\n    if (icon) _p.icon = icon\n    if (color) _p.color = color\n    if (direction) _p.direction = direction\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    variant = p.variant\n    icon = p.icon\n    color = p.color\n    direction = p.direction\n\n    let isRow = direction === 'row'\n\n\n    const template = useColorTemplate(color, variant)\n    delete template.hover\n\n    let iconsx = {\n        fontSize: isRow ? 22 : 40,\n        color: color === 'default' ? \"text.primary\" : template.color\n    }\n\n    const icons: any = {\n        \"info\": <InfoIcon sx={iconsx} />,\n        \"warning\": <WarningIcon sx={iconsx} />,\n        \"success\": <SuccessIcon sx={iconsx} />,\n        \"danger\": <ErrorIcon sx={iconsx} />\n    }\n\n    let _icon = icons[icon] || icons[color]\n\n    return (\n        <Tag\n            {..._props}\n            baseClass=\"alert\"\n            sxr={{\n                justifyContent: \"flex-start\",\n                position: \"relative\",\n                radius: 1,\n                px: isRow ? (_icon ? .5 : 2) : 3,\n                py: isRow ? .5 : 3,\n                flexDirection: \"column\",\n                display: 'flex',\n                fontFamily: \"default\",\n                ..._props?.sx\n            }}\n            {...template}\n        >\n            {\n                onClose && <IconButton\n                    color={color}\n                    variant={variant === 'fill' ? \"fill\" : \"text\"}\n                    size={25}\n                    sx={{\n                        position: \"absolute\",\n                        top: 5,\n                        right: 5\n                    }}\n                    onClick={onClose}\n                    className=\"alert-close-button\"\n                >\n                    <IconClose fontSize={18} />\n                </IconButton>\n            }\n            <Tag\n                sx={{\n                    display: \"flex\",\n                    gap: 1,\n                    flexDirection: direction,\n                    alignItems: isRow ? \"flex-start\" : \"center\"\n                }}\n                baseClass=\"alert-container\"\n            >\n                {\n                    _icon && <Tag\n                        baseClass=\"alert-icon\"\n                        sxr={{\n                            display: \"flex\",\n                            alignItems: \"center\",\n                            justifyContent: \"center\",\n                            p: isRow ? 1 : 0,\n                            \"& svg\": {\n                                color: template.color\n                            }\n                        }}\n                    >\n                        {_icon}\n                    </Tag>\n                }\n                <Tag\n                    baseClass=\"alert-content\"\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"column\",\n                        flex: 1,\n                        color: template.color,\n                        py: 1,\n                        textAlign: isRow ? \"left\" : \"center\",\n                        gap: isRow ? 0 : 1\n                    }}\n                >\n                    {title && <>\n                        {\n                            isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n                                className=\"alert-title\"\n                                variant=\"text\"\n                                sx={{\n                                    font: \"text\",\n                                    fontWeight: \"bold!important\",\n                                    color: template.color\n                                }}\n                            >{title}</Text>\n                        }\n                    </>}\n                    <Tag\n                        sxr={{\n                            font: \"button\",\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Tag>\n            </Tag>\n        </Tag>\n    )\n}\n\nexport type AlertConfirmProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n    content?: ReactNode;\n    size?: \"small\" | \"medium\" | \"large\" | number;\n    closeButton?: boolean;\n    clickOutsideToClose?: boolean;\n    okButtonText?: string;\n    closeButtonText?: string;\n    hideOkButton?: boolean;\n    hideCloseButton?: boolean;\n    buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n    variant?: \"text\" | \"fill\"\n    onConfirm?: (ok: boolean) => void;\n    transition?: TransitionVariantTypes;\n    blurMode?: ModalProps['blurMode'];\n    slotProps?: {\n        modal?: Omit<ModalProps, \"childred\" | \"transition\" | \"blurMode\">;\n        okButton?: Omit<ButtonProps, \"children\">;\n        closeButton?: Omit<ButtonProps, \"children\">;\n    }\n}\n\nAlert.confirm = (props: AlertConfirmProps) => {\n    const id = \"_\" + Math.random().toString(16)\n    let {\n        content,\n        size,\n        color,\n        direction,\n        variant,\n        closeButton,\n        clickOutsideToClose,\n        okButtonText,\n        closeButtonText,\n        hideOkButton,\n        hideCloseButton,\n        buttonPlacement,\n        onConfirm,\n        transition,\n        blurMode,\n        slotProps,\n        ...rest\n    } = props\n\n    hideOkButton ??= false\n    hideCloseButton ??= false\n\n    size ??= \"small\"\n    color ??= 'default'\n    variant ??= \"text\"\n    direction ??= \"row\"\n    buttonPlacement ??= \"end\"\n    let sx: any = {};\n\n    switch (buttonPlacement) {\n        case \"start\":\n            sx.justifyContent = 'flex-start'\n            break;\n        case \"end\":\n            sx.justifyContent = 'flex-end'\n            break;\n        case \"between\":\n            sx.justifyContent = 'space-between'\n            break;\n        case \"full\":\n            sx = {\n                \"& button\": {\n                    flex: 1\n                }\n            }\n            break;\n    }\n\n    let sizes: any = {\n        small: 320,\n        medium: 400,\n        large: 600\n    }\n\n    const close = () => Modal.close(id)\n    let okcolor = color\n    let closecolor = color\n    if (color === 'default') {\n        okcolor = 'brand'\n        closecolor = 'default'\n        variant = 'text'\n    } else {\n        if (variant === 'fill') {\n            okcolor = 'default'\n            closecolor = 'default'\n        } else {\n            okcolor = color\n            closecolor = 'default'\n        }\n    }\n\n    return Modal.open(id, <Alert\n        direction={direction}\n        sx={{\n            px: 2,\n            py: 1,\n            pt: direction === 'row' ? 1 : 2\n        }}\n        color={color}\n        variant={variant}\n        onClose={closeButton ? close : undefined}\n        {...rest}\n    >\n        {content}\n        <Tag\n            sxr={{\n                display: \"flex\",\n                gap: 1,\n                pt: 4,\n                flexDirection: \"row\",\n                ...sx,\n            }}\n        >\n            {!hideCloseButton && <Button\n                color={closecolor}\n                variant=\"fill\"\n                {...slotProps?.closeButton}\n                onClick={() => {\n                    close()\n                    onConfirm && onConfirm(false)\n                }}\n            >{closeButtonText || \"Close\"}</Button>}\n            {!hideOkButton && <Button\n                color={okcolor}\n                variant=\"fill\"\n                {...slotProps?.okButton}\n\n                onClick={() => {\n                    Modal.close(id)\n                    onConfirm && onConfirm(true)\n                }}\n            >{okButtonText || \"OK\"}</Button>}\n        </Tag>\n    </Alert>, {\n        ...slotProps?.modal,\n        size: sizes[size] || size,\n        blur: 40,\n        blurMode: blurMode || \"transparent\",\n        transition: transition || \"zoom\",\n        onClickOutside: () => {\n            clickOutsideToClose && close()\n        }\n    })\n}\n\nexport default Alert"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/Avatar/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TagComponentType, TagProps, useBreakpointPropsType } from '@xanui/core';
+
+type AvatarProps<T extends TagComponentType = "img"> = TagProps<T> & {
+    size?: useBreakpointPropsType<number>;
+};
+declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarProps<TagComponentType>, "ref"> & React.RefAttributes<unknown>>;
+
+export { Avatar as default };
+export type { AvatarProps };

package/Avatar/index.js

@@ -0,0 +1,34 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core'),PersonIcon=require('@xanui/icons/Person');const Avatar = React.forwardRef((_a, ref) => {
+    var { children, src, alt } = _a, rest = tslib.__rest(_a, ["children", "src", "alt"]);
+    const [faild, setFaild] = React.useState();
+    let [_b] = core.useInterface("Avatar", rest, {}), { size } = _b, props = tslib.__rest(_b, ["size"]);
+    size !== null && size !== void 0 ? size : (size = 36);
+    const _p = {};
+    if (size)
+        _p.size = size;
+    const p = core.useBreakpointProps(_p);
+    size = p.size;
+    if (faild === false || !src) {
+        let t = (alt === null || alt === void 0 ? void 0 : alt.charAt(0).toUpperCase()) || (children || jsxRuntime.jsx(PersonIcon, {}));
+        return (jsxRuntime.jsx(core.Tag, Object.assign({ component: "div", src: src }, props, { baseClass: 'avatar', sxr: {
+                display: "inline-flex",
+                justifyContent: "center",
+                alignItems: "center",
+                bgcolor: "background.secondary",
+                radius: size,
+                fontSize: (size / 3) * 2,
+                width: size,
+                height: size,
+                userSelect: "none",
+                color: "text.primary",
+                '& svg': {
+                    fontSize: (size / 3) * 2,
+                    opacity: .6
+                }
+            }, ref: ref }, { children: t })));
+    }
+    return (jsxRuntime.jsx(core.Tag, Object.assign({ component: "img", radius: size, width: size, height: size, objectFit: "cover" }, props, { alt: alt, src: src, baseClass: 'avatar', onError: (e) => {
+            setFaild(false);
+            props.onError && props.onError(e);
+        }, ref: ref })));
+});exports.default=Avatar;//# sourceMappingURL=index.js.map

package/Avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/Avatar/index.tsx"],"sourcesContent":["\nimport React, { useState } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport PersonIcon from '@xanui/icons/Person'\n\nexport type AvatarProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\n    size?: useBreakpointPropsType<number>;\n}\n\nconst Avatar = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, ...rest }: AvatarProps<T>, ref: any) => {\n    const [faild, setFaild] = useState<boolean>()\n    let [{ size, ...props }] = useInterface<any>(\"Avatar\", rest, {})\n    size ??= 36\n    const _p: any = {}\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n    size = p.size\n\n    if (faild === false || !src) {\n        let t = alt?.charAt(0).toUpperCase() || (children || <PersonIcon />)\n        return (\n            <Tag\n                component=\"div\"\n                src={src}\n                {...props}\n                baseClass='avatar'\n                sxr={{\n                    display: \"inline-flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                    bgcolor: \"background.secondary\",\n                    radius: size,\n                    fontSize: (size / 3) * 2,\n                    width: size,\n                    height: size,\n                    userSelect: \"none\",\n                    color: \"text.primary\",\n                    '& svg': {\n                        fontSize: (size / 3) * 2,\n                        opacity: .6\n                    }\n                }}\n                ref={ref}\n            >{t}</Tag>\n        )\n    }\n    return (\n        <Tag\n            component=\"img\"\n            radius={size}\n            width={size}\n            height={size}\n            objectFit=\"cover\"\n            {...props}\n            alt={alt}\n            src={src}\n            baseClass='avatar'\n            onError={(e) => {\n                setFaild(false)\n                props.onError && props.onError(e as any)\n            }}\n            ref={ref}\n        />\n    )\n})\n\nexport default Avatar\n\n\n"],"names":["__rest","useState","useInterface","useBreakpointProps","_jsx","Tag"],"mappings":"sOASA,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA+C,EAAE,GAAQ,KAAI;QAA7D,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,OAA2B,EAAtB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAA7B,CAAA,UAAA,EAAA,KAAA,EAAA,KAAA,CAA+B,CAAF;IAC9F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGC,cAAQ,EAAW;AAC7C,IAAA,IAAI,OAAuBC,iBAAY,CAAM,QAAQ,EAAE,IAAI,EAAE,EAAE,CAAC,EAA3D,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAAF,YAAA,CAAA,EAAA,EAAhB,CAAA,MAAA,CAAkB,CAAyC;IAChE,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAJ,IAAI,IAAJ,IAAI,GAAK,EAAE,CAAA;IACX,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,MAAM,CAAC,GAAQG,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,IAAI,GAAG,CAAC,CAAC,IAAI;AAEb,IAAA,IAAI,KAAK,KAAK,KAAK,IAAI,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,GAAG,CAAA,GAAG,aAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,MAAM,CAAC,CAAC,CAAA,CAAE,WAAW,EAAE,MAAK,QAAQ,IAAIC,cAAA,CAAC,UAAU,EAAA,EAAA,CAAG,CAAC;AACpE,QAAA,QACIA,cAAA,CAACC,QAAG,kBACA,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,GAAG,EAAA,EACJ,KAAK,EAAA,EACT,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAE;AACD,gBAAA,OAAO,EAAE,aAAa;AACtB,gBAAA,cAAc,EAAE,QAAQ;AACxB,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,OAAO,EAAE,sBAAsB;AAC/B,gBAAA,MAAM,EAAE,IAAI;AACZ,gBAAA,QAAQ,EAAE,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC;AACxB,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,MAAM,EAAE,IAAI;AACZ,gBAAA,UAAU,EAAE,MAAM;AAClB,gBAAA,KAAK,EAAE,cAAc;AACrB,gBAAA,OAAO,EAAE;AACL,oBAAA,QAAQ,EAAE,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC;AACxB,oBAAA,OAAO,EAAE;AACZ;AACJ,aAAA,EACD,GAAG,EAAE,GAAG,gBACV,CAAC,EAAA,CAAA,CAAO;AAEjB,IAAA;AACD,IAAA,QACID,cAAA,CAACC,QAAG,kBACA,SAAS,EAAC,KAAK,EACf,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,SAAS,EAAC,OAAO,EAAA,EACb,KAAK,EAAA,EACT,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAC,KAAI;YACX,QAAQ,CAAC,KAAK,CAAC;YACf,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,CAAQ,CAAC;AAC5C,QAAA,CAAC,EACD,GAAG,EAAE,GAAG,EAAA,CAAA,CACV;AAEV,CAAC"}

package/Avatar/index.mjs

@@ -0,0 +1,34 @@
+import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React,{useState}from'react';import {useInterface,useBreakpointProps,Tag}from'@xanui/core';import PersonIcon from'@xanui/icons/Person';const Avatar = React.forwardRef((_a, ref) => {
+    var { children, src, alt } = _a, rest = __rest(_a, ["children", "src", "alt"]);
+    const [faild, setFaild] = useState();
+    let [_b] = useInterface("Avatar", rest, {}), { size } = _b, props = __rest(_b, ["size"]);
+    size !== null && size !== void 0 ? size : (size = 36);
+    const _p = {};
+    if (size)
+        _p.size = size;
+    const p = useBreakpointProps(_p);
+    size = p.size;
+    if (faild === false || !src) {
+        let t = (alt === null || alt === void 0 ? void 0 : alt.charAt(0).toUpperCase()) || (children || jsx(PersonIcon, {}));
+        return (jsx(Tag, Object.assign({ component: "div", src: src }, props, { baseClass: 'avatar', sxr: {
+                display: "inline-flex",
+                justifyContent: "center",
+                alignItems: "center",
+                bgcolor: "background.secondary",
+                radius: size,
+                fontSize: (size / 3) * 2,
+                width: size,
+                height: size,
+                userSelect: "none",
+                color: "text.primary",
+                '& svg': {
+                    fontSize: (size / 3) * 2,
+                    opacity: .6
+                }
+            }, ref: ref }, { children: t })));
+    }
+    return (jsx(Tag, Object.assign({ component: "img", radius: size, width: size, height: size, objectFit: "cover" }, props, { alt: alt, src: src, baseClass: 'avatar', onError: (e) => {
+            setFaild(false);
+            props.onError && props.onError(e);
+        }, ref: ref })));
+});export{Avatar as default};//# sourceMappingURL=index.mjs.map

package/Avatar/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/Avatar/index.tsx"],"sourcesContent":["\nimport React, { useState } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport PersonIcon from '@xanui/icons/Person'\n\nexport type AvatarProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\n    size?: useBreakpointPropsType<number>;\n}\n\nconst Avatar = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, ...rest }: AvatarProps<T>, ref: any) => {\n    const [faild, setFaild] = useState<boolean>()\n    let [{ size, ...props }] = useInterface<any>(\"Avatar\", rest, {})\n    size ??= 36\n    const _p: any = {}\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n    size = p.size\n\n    if (faild === false || !src) {\n        let t = alt?.charAt(0).toUpperCase() || (children || <PersonIcon />)\n        return (\n            <Tag\n                component=\"div\"\n                src={src}\n                {...props}\n                baseClass='avatar'\n                sxr={{\n                    display: \"inline-flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                    bgcolor: \"background.secondary\",\n                    radius: size,\n                    fontSize: (size / 3) * 2,\n                    width: size,\n                    height: size,\n                    userSelect: \"none\",\n                    color: \"text.primary\",\n                    '& svg': {\n                        fontSize: (size / 3) * 2,\n                        opacity: .6\n                    }\n                }}\n                ref={ref}\n            >{t}</Tag>\n        )\n    }\n    return (\n        <Tag\n            component=\"img\"\n            radius={size}\n            width={size}\n            height={size}\n            objectFit=\"cover\"\n            {...props}\n            alt={alt}\n            src={src}\n            baseClass='avatar'\n            onError={(e) => {\n                setFaild(false)\n                props.onError && props.onError(e as any)\n            }}\n            ref={ref}\n        />\n    )\n})\n\nexport default Avatar\n\n\n"],"names":["_jsx"],"mappings":"4MASA,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA+C,EAAE,GAAQ,KAAI;QAA7D,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,OAA2B,EAAtB,IAAI,GAAA,MAAA,CAAA,EAAA,EAA7B,CAAA,UAAA,EAAA,KAAA,EAAA,KAAA,CAA+B,CAAF;IAC9F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAW;AAC7C,IAAA,IAAI,OAAuB,YAAY,CAAM,QAAQ,EAAE,IAAI,EAAE,EAAE,CAAC,EAA3D,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAAhB,CAAA,MAAA,CAAkB,CAAyC;IAChE,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAJ,IAAI,IAAJ,IAAI,GAAK,EAAE,CAAA;IACX,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,IAAI,GAAG,CAAC,CAAC,IAAI;AAEb,IAAA,IAAI,KAAK,KAAK,KAAK,IAAI,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,GAAG,CAAA,GAAG,aAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,MAAM,CAAC,CAAC,CAAA,CAAE,WAAW,EAAE,MAAK,QAAQ,IAAIA,GAAA,CAAC,UAAU,EAAA,EAAA,CAAG,CAAC;AACpE,QAAA,QACIA,GAAA,CAAC,GAAG,kBACA,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,GAAG,EAAA,EACJ,KAAK,EAAA,EACT,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAE;AACD,gBAAA,OAAO,EAAE,aAAa;AACtB,gBAAA,cAAc,EAAE,QAAQ;AACxB,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,OAAO,EAAE,sBAAsB;AAC/B,gBAAA,MAAM,EAAE,IAAI;AACZ,gBAAA,QAAQ,EAAE,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC;AACxB,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,MAAM,EAAE,IAAI;AACZ,gBAAA,UAAU,EAAE,MAAM;AAClB,gBAAA,KAAK,EAAE,cAAc;AACrB,gBAAA,OAAO,EAAE;AACL,oBAAA,QAAQ,EAAE,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC;AACxB,oBAAA,OAAO,EAAE;AACZ;AACJ,aAAA,EACD,GAAG,EAAE,GAAG,gBACV,CAAC,EAAA,CAAA,CAAO;AAEjB,IAAA;AACD,IAAA,QACIA,GAAA,CAAC,GAAG,kBACA,SAAS,EAAC,KAAK,EACf,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,SAAS,EAAC,OAAO,EAAA,EACb,KAAK,EAAA,EACT,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAC,KAAI;YACX,QAAQ,CAAC,KAAK,CAAC;YACf,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,CAAQ,CAAC;AAC5C,QAAA,CAAC,EACD,GAAG,EAAE,GAAG,EAAA,CAAA,CACV;AAEV,CAAC"}

package/Badge/index.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactElement } from 'react';
+import { TagComponentType, TagProps, useBreakpointPropsType, ColorTemplateColors, TransitionProps } from '@xanui/core';
+
+type BadgeProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, "baseClass" | "content"> & {
+    content?: useBreakpointPropsType<number | ReactElement>;
+    color?: useBreakpointPropsType<ColorTemplateColors>;
+    placement?: useBreakpointPropsType<"left-top" | "left-bottom" | "right-top" | "right-bottom">;
+    visible?: useBreakpointPropsType<boolean>;
+    slotProps?: {
+        transition?: Omit<TransitionProps, "open">;
+    };
+};
+declare const Badge: React.ForwardRefExoticComponent<Omit<BadgeProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+
+export { Badge as default };
+export type { BadgeProps };

package/Badge/index.js

@@ -0,0 +1,68 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),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"]);
+    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");
+    const _p = {};
+    if (content)
+        _p.content = content;
+    if (color)
+        _p.color = color;
+    if (placement)
+        _p.placement = placement;
+    if (visible)
+        _p.visible = visible;
+    const p = core.useBreakpointProps(_p);
+    content = p.content;
+    color = p.color;
+    placement = p.placement;
+    visible = p.visible;
+    const template = core.useColorTemplate(color, "fill");
+    delete template.hover;
+    let _css = {};
+    let pos = -3;
+    if (typeof content === "number") {
+        if (content.toString().length === 2) {
+            pos = -5;
+        }
+        else if (content.toString().length > 2) {
+            pos = -8;
+        }
+    }
+    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 };
+            break;
+        case "right-bottom":
+            _css = { bottom: content ? pos : 0, right: content ? pos : 0 };
+            break;
+    }
+    if (content) {
+        _css.minWidth = 16;
+        _css.height = 16;
+        _css.height = 16;
+        _css.p = .8;
+        _css.px = .4;
+    }
+    else {
+        _css.width = 8;
+        _css.height = 8;
+    }
+    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, _css, { children: typeof content === 'number' ? (content >= 100 ? "99+" : content) : content })), children] })));
+});exports.default=Badge;//# sourceMappingURL=index.js.map

package/Badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/Badge/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, ColorTemplateColors, 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<ColorTemplateColors>;\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    delete template.hover\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}\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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"}

package/Badge/index.mjs

@@ -0,0 +1,68 @@
+import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React from'react';import {useInterface,useBreakpointProps,useColorTemplate,Tag}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"]);
+    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");
+    const _p = {};
+    if (content)
+        _p.content = content;
+    if (color)
+        _p.color = color;
+    if (placement)
+        _p.placement = placement;
+    if (visible)
+        _p.visible = visible;
+    const p = useBreakpointProps(_p);
+    content = p.content;
+    color = p.color;
+    placement = p.placement;
+    visible = p.visible;
+    const template = useColorTemplate(color, "fill");
+    delete template.hover;
+    let _css = {};
+    let pos = -3;
+    if (typeof content === "number") {
+        if (content.toString().length === 2) {
+            pos = -5;
+        }
+        else if (content.toString().length > 2) {
+            pos = -8;
+        }
+    }
+    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 };
+            break;
+        case "right-bottom":
+            _css = { bottom: content ? pos : 0, right: content ? pos : 0 };
+            break;
+    }
+    if (content) {
+        _css.minWidth = 16;
+        _css.height = 16;
+        _css.height = 16;
+        _css.p = .8;
+        _css.px = .4;
+    }
+    else {
+        _css.width = 8;
+        _css.height = 8;
+    }
+    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, _css, { children: typeof content === 'number' ? (content >= 100 ? "99+" : content) : content })), children] })));
+});export{Badge as default};//# sourceMappingURL=index.mjs.map

package/Badge/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/Badge/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, ColorTemplateColors, 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<ColorTemplateColors>;\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    delete template.hover\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}\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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"}

package/Box/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TagComponentType, TagProps } from '@xanui/core';
+
+type BoxProps<T extends TagComponentType = "div"> = TagProps<T>;
+declare const Box: React.ForwardRefExoticComponent<Omit<BoxProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+
+export { Box as default };
+export type { BoxProps };

package/Box/index.js

@@ -0,0 +1,4 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core');const Box = React.forwardRef((_a, ref) => {
+    var { children } = _a, props = tslib.__rest(_a, ["children"]);
+    return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, { baseClass: 'box', ref: ref }, { children: children })));
+});exports.default=Box;//# sourceMappingURL=index.js.map

package/Box/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/Box/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type BoxProps<T extends TagComponentType = \"div\"> = TagProps<T>\n\nconst Box = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: BoxProps<T>, ref: React.Ref<any>) => {\n    return (\n        <Tag\n            {...props}\n            baseClass='box'\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Box\n\n"],"names":["__rest","_jsx","Tag"],"mappings":"4LAMA,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAmC,EAAE,GAAmB,KAAI;AAA5D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;AAClF,IAAA,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,IACT,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,GAAG,gBACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC"}

package/Box/index.mjs

@@ -0,0 +1,4 @@
+import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from'react';import {Tag}from'@xanui/core';const Box = React.forwardRef((_a, ref) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (jsx(Tag, Object.assign({}, props, { baseClass: 'box', ref: ref }, { children: children })));
+});export{Box as default};//# sourceMappingURL=index.mjs.map

package/Box/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/Box/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type BoxProps<T extends TagComponentType = \"div\"> = TagProps<T>\n\nconst Box = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: BoxProps<T>, ref: React.Ref<any>) => {\n    return (\n        <Tag\n            {...props}\n            baseClass='box'\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Box\n\n"],"names":["_jsx"],"mappings":"sHAMA,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAmC,EAAE,GAAmB,KAAI;AAA5D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,KAAK,GAAA,MAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;AAClF,IAAA,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,IACT,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,GAAG,gBACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC"}

package/Button/index.d.ts

@@ -0,0 +1,22 @@
+import React, { ReactElement } from 'react';
+import { TagComponentType, TagProps, useBreakpointPropsType, ColorTemplateColors, ColorTemplateType } from '@xanui/core';
+import { UseCornerTypes } from '../useCorner/index.js';
+import { CircleProgressProps } from '../CircleProgress/index.js';
+
+type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, "color" | "size" | "direction"> & {
+    startIcon?: useBreakpointPropsType<ReactElement>;
+    endIcon?: useBreakpointPropsType<ReactElement>;
+    color?: useBreakpointPropsType<ColorTemplateColors>;
+    variant?: useBreakpointPropsType<ColorTemplateType>;
+    corner?: useBreakpointPropsType<UseCornerTypes>;
+    size?: useBreakpointPropsType<"small" | "medium" | "large">;
+    direction?: useBreakpointPropsType<"row" | "column">;
+    loading?: boolean;
+    slotProps?: {
+        loading?: Omit<CircleProgressProps, "color" | "hideTrack" | "size">;
+    };
+};
+declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+
+export { Button as default };
+export type { ButtonProps };

package/Button/index.js

@@ -0,0 +1,77 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core'),index=require('../useCorner/index.js'),index$1=require('../CircleProgress/index.js');const Button = React.forwardRef((_a, ref) => {
+    var _b;
+    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
+    let [_c] = core.useInterface('Button', rest, {
+        variant: "fill",
+        color: "brand",
+        corner: "rounded",
+        size: "medium"
+    }), { variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps } = _c, _props = tslib.__rest(_c, ["variant", "startIcon", "endIcon", "color", "corner", "size", "loading", "direction", "slotProps"]);
+    const _p = {};
+    if (startIcon)
+        _p.startIcon = startIcon;
+    if (endIcon)
+        _p.endIcon = endIcon;
+    if (color)
+        _p.color = color;
+    if (variant)
+        _p.variant = variant;
+    if (corner)
+        _p.corner = corner;
+    if (size)
+        _p.size = size;
+    if (direction)
+        _p.direction = direction;
+    const p = core.useBreakpointProps(_p);
+    startIcon = p.startIcon;
+    endIcon = p.endIcon;
+    color = p.color;
+    variant = p.variant;
+    corner = p.corner;
+    size = p.size;
+    direction = p.direction || "row";
+    const _d = core.useColorTemplate(color, variant), { hover: templateHover } = _d, templatecss = tslib.__rest(_d, ["hover"]);
+    const cornerCss = index.default(corner);
+    const sizes = {
+        small: {
+            height: 32,
+            px: 2,
+            gap: .5,
+            fontSize: 12
+        },
+        medium: {
+            height: 40,
+            px: 2,
+            gap: 1,
+            fontSize: 14
+        },
+        large: {
+            height: 52,
+            px: 3,
+            gap: 1,
+            fontSize: 16
+        }
+    };
+    const progressSizes = {
+        small: 20,
+        medium: 25,
+        large: 30
+    };
+    let _size = (sizes[size] || {});
+    if (direction === 'column') {
+        delete _size.height;
+        _size.gap = .5;
+        _size.py = 1;
+    }
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({ component: 'button', baseClass: 'button' }, _props, { sxr: Object.assign(Object.assign(Object.assign({ flexShrink: "0", whiteSpace: "nowrap", border: 0, cursor: "pointer", font: "button", display: "flex", textTransform: "uppercase", flexDirection: direction, alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden", userSelect: "none" }, _size), cornerCss), templatecss), hover: Object.assign(Object.assign({}, templateHover), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), disabled: (_b = loading !== null && loading !== void 0 ? loading : _props.disabled) !== null && _b !== void 0 ? _b : false, ref: ref }, { children: [loading && jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: 'button-loading-container', sxr: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    zIndex: 1,
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                } }, { children: jsxRuntime.jsx(index$1.default, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.loading, { color: color === 'default' ? `brand` : "default", hideTrack: true, size: progressSizes[size], className: 'button-loading-progress' })) })), startIcon && jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: 'button-start-icon', component: 'span', display: "inline-block" }, { children: startIcon })), children, endIcon && jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: 'button-end-icon', component: 'span', display: "inline-block" }, { children: endIcon }))] })));
+});exports.default=Button;//# sourceMappingURL=index.js.map

package/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/Button/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, ColorTemplateColors, ColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress'\n\n\nexport type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\" | \"direction\"> & {\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<ColorTemplateColors>;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    loading?: boolean;\n    slotProps?: {\n        loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">\n    }\n}\n\n\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: ButtonProps<T>, ref: React.Ref<any>) => {\n    let [{ variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, ..._props }] = useInterface<any>('Button', rest, {\n        variant: \"fill\",\n        color: \"brand\",\n        corner: \"rounded\",\n        size: \"medium\"\n    })\n\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    if (size) _p.size = size\n    if (direction) _p.direction = direction\n    const p: any = useBreakpointProps(_p)\n\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    color = p.color\n    variant = p.variant\n    corner = p.corner\n    size = p.size\n    direction = p.direction || \"row\"\n\n    const { hover: templateHover, ...templatecss } = useColorTemplate(color, variant)\n    const cornerCss = useCorner(corner)\n\n    const sizes: any = {\n        small: {\n            height: 32,\n            px: 2,\n            gap: .5,\n            fontSize: 12\n        },\n        medium: {\n            height: 40,\n            px: 2,\n            gap: 1,\n            fontSize: 14\n        },\n        large: {\n            height: 52,\n            px: 3,\n            gap: 1,\n            fontSize: 16\n        }\n    }\n\n    const progressSizes: any = {\n        small: 20,\n        medium: 25,\n        large: 30\n    }\n\n    let _size = (sizes[size as any] || {})\n    if (direction === 'column') {\n        delete _size.height\n        _size.gap = .5\n        _size.py = 1\n    }\n\n    return (\n        <Tag\n            component='button'\n            baseClass='button'\n            {..._props}\n            sxr={{\n                flexShrink: \"0\",\n                whiteSpace: \"nowrap\",\n                border: 0,\n                cursor: \"pointer\",\n                font: \"button\",\n                display: \"flex\",\n                textTransform: \"uppercase\",\n                flexDirection: direction,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                position: \"relative\",\n                overflow: \"hidden\",\n                userSelect: \"none\",\n                ..._size,\n                ...cornerCss,\n                ...templatecss,\n            }}\n            hover={{\n                ...templateHover,\n                ...((_props as any)?.hover || {})\n            }}\n            disabled={loading ?? _props.disabled ?? false}\n            ref={ref}\n        >\n            {loading && <Tag\n                baseClass='button-loading-container'\n                sxr={{\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    right: 0,\n                    bottom: 0,\n                    zIndex: 1,\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                }}\n            >\n                <CircleProgress\n                    {...slotProps?.loading}\n                    color={color === 'default' ? `brand` : \"default\"}\n                    hideTrack\n                    size={progressSizes[size]}\n                    className='button-loading-progress'\n                />\n            </Tag>}\n            {startIcon && <Tag\n                baseClass='button-start-icon'\n                component='span'\n                display=\"inline-block\"\n            >{startIcon}</Tag>}\n            {children}\n            {endIcon && <Tag\n                baseClass='button-end-icon'\n                component='span'\n                display=\"inline-block\"\n            >{endIcon}</Tag>}\n        </Tag>\n    )\n})\n\nexport default Button\n"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","useCorner","_jsxs","Tag","_jsx","CircleProgress"],"mappings":"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"}

package/Button/index.mjs

@@ -0,0 +1,77 @@
+import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React from'react';import {useInterface,useBreakpointProps,useColorTemplate,Tag}from'@xanui/core';import useCorner from'../useCorner/index.mjs';import CircleProgress from'../CircleProgress/index.mjs';const Button = React.forwardRef((_a, ref) => {
+    var _b;
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    let [_c] = useInterface('Button', rest, {
+        variant: "fill",
+        color: "brand",
+        corner: "rounded",
+        size: "medium"
+    }), { variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps } = _c, _props = __rest(_c, ["variant", "startIcon", "endIcon", "color", "corner", "size", "loading", "direction", "slotProps"]);
+    const _p = {};
+    if (startIcon)
+        _p.startIcon = startIcon;
+    if (endIcon)
+        _p.endIcon = endIcon;
+    if (color)
+        _p.color = color;
+    if (variant)
+        _p.variant = variant;
+    if (corner)
+        _p.corner = corner;
+    if (size)
+        _p.size = size;
+    if (direction)
+        _p.direction = direction;
+    const p = useBreakpointProps(_p);
+    startIcon = p.startIcon;
+    endIcon = p.endIcon;
+    color = p.color;
+    variant = p.variant;
+    corner = p.corner;
+    size = p.size;
+    direction = p.direction || "row";
+    const _d = useColorTemplate(color, variant), { hover: templateHover } = _d, templatecss = __rest(_d, ["hover"]);
+    const cornerCss = useCorner(corner);
+    const sizes = {
+        small: {
+            height: 32,
+            px: 2,
+            gap: .5,
+            fontSize: 12
+        },
+        medium: {
+            height: 40,
+            px: 2,
+            gap: 1,
+            fontSize: 14
+        },
+        large: {
+            height: 52,
+            px: 3,
+            gap: 1,
+            fontSize: 16
+        }
+    };
+    const progressSizes = {
+        small: 20,
+        medium: 25,
+        large: 30
+    };
+    let _size = (sizes[size] || {});
+    if (direction === 'column') {
+        delete _size.height;
+        _size.gap = .5;
+        _size.py = 1;
+    }
+    return (jsxs(Tag, Object.assign({ component: 'button', baseClass: 'button' }, _props, { sxr: Object.assign(Object.assign(Object.assign({ flexShrink: "0", whiteSpace: "nowrap", border: 0, cursor: "pointer", font: "button", display: "flex", textTransform: "uppercase", flexDirection: direction, alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden", userSelect: "none" }, _size), cornerCss), templatecss), hover: Object.assign(Object.assign({}, templateHover), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), disabled: (_b = loading !== null && loading !== void 0 ? loading : _props.disabled) !== null && _b !== void 0 ? _b : false, ref: ref }, { children: [loading && jsx(Tag, Object.assign({ baseClass: 'button-loading-container', sxr: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    zIndex: 1,
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                } }, { children: jsx(CircleProgress, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.loading, { color: color === 'default' ? `brand` : "default", hideTrack: true, size: progressSizes[size], className: 'button-loading-progress' })) })), startIcon && jsx(Tag, Object.assign({ baseClass: 'button-start-icon', component: 'span', display: "inline-block" }, { children: startIcon })), children, endIcon && jsx(Tag, Object.assign({ baseClass: 'button-end-icon', component: 'span', display: "inline-block" }, { children: endIcon }))] })));
+});export{Button as default};//# sourceMappingURL=index.mjs.map

package/Button/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/Button/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, ColorTemplateColors, ColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress'\n\n\nexport type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\" | \"direction\"> & {\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<ColorTemplateColors>;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    loading?: boolean;\n    slotProps?: {\n        loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">\n    }\n}\n\n\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: ButtonProps<T>, ref: React.Ref<any>) => {\n    let [{ variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, ..._props }] = useInterface<any>('Button', rest, {\n        variant: \"fill\",\n        color: \"brand\",\n        corner: \"rounded\",\n        size: \"medium\"\n    })\n\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    if (size) _p.size = size\n    if (direction) _p.direction = direction\n    const p: any = useBreakpointProps(_p)\n\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    color = p.color\n    variant = p.variant\n    corner = p.corner\n    size = p.size\n    direction = p.direction || \"row\"\n\n    const { hover: templateHover, ...templatecss } = useColorTemplate(color, variant)\n    const cornerCss = useCorner(corner)\n\n    const sizes: any = {\n        small: {\n            height: 32,\n            px: 2,\n            gap: .5,\n            fontSize: 12\n        },\n        medium: {\n            height: 40,\n            px: 2,\n            gap: 1,\n            fontSize: 14\n        },\n        large: {\n            height: 52,\n            px: 3,\n            gap: 1,\n            fontSize: 16\n        }\n    }\n\n    const progressSizes: any = {\n        small: 20,\n        medium: 25,\n        large: 30\n    }\n\n    let _size = (sizes[size as any] || {})\n    if (direction === 'column') {\n        delete _size.height\n        _size.gap = .5\n        _size.py = 1\n    }\n\n    return (\n        <Tag\n            component='button'\n            baseClass='button'\n            {..._props}\n            sxr={{\n                flexShrink: \"0\",\n                whiteSpace: \"nowrap\",\n                border: 0,\n                cursor: \"pointer\",\n                font: \"button\",\n                display: \"flex\",\n                textTransform: \"uppercase\",\n                flexDirection: direction,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                position: \"relative\",\n                overflow: \"hidden\",\n                userSelect: \"none\",\n                ..._size,\n                ...cornerCss,\n                ...templatecss,\n            }}\n            hover={{\n                ...templateHover,\n                ...((_props as any)?.hover || {})\n            }}\n            disabled={loading ?? _props.disabled ?? false}\n            ref={ref}\n        >\n            {loading && <Tag\n                baseClass='button-loading-container'\n                sxr={{\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    right: 0,\n                    bottom: 0,\n                    zIndex: 1,\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                }}\n            >\n                <CircleProgress\n                    {...slotProps?.loading}\n                    color={color === 'default' ? `brand` : \"default\"}\n                    hideTrack\n                    size={progressSizes[size]}\n                    className='button-loading-progress'\n                />\n            </Tag>}\n            {startIcon && <Tag\n                baseClass='button-start-icon'\n                component='span'\n                display=\"inline-block\"\n            >{startIcon}</Tag>}\n            {children}\n            {endIcon && <Tag\n                baseClass='button-end-icon'\n                component='span'\n                display=\"inline-block\"\n            >{endIcon}</Tag>}\n        </Tag>\n    )\n})\n\nexport default Button\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/ButtonGroup/index.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactElement } from 'react';
+import { TagComponentType, TagProps, useBreakpointPropsType, ColorTemplateColors, ColorTemplateType } from '@xanui/core';
+import { ButtonProps } from '../Button/index.js';
+
+type ButtonGroupProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, 'children' | "size"> & {
+    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];
+    color?: useBreakpointPropsType<ColorTemplateColors>;
+    variant?: useBreakpointPropsType<ColorTemplateType>;
+    size?: useBreakpointPropsType<"small" | "medium" | "large">;
+};
+declare const ButtonGroup: React.ForwardRefExoticComponent<Omit<ButtonGroupProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+
+export { ButtonGroup as default };
+export type { ButtonGroupProps };