@xanui/ui 1.1.37 → 1.1.40

package/Accordion/index.cjs

@@ -0,0 +1,96 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+var ExpandIcon = require('@xanui/icons/ExpandMore');
+var index$2 = require('../Collaps/index.cjs');
+var index = require('../List/index.cjs');
+var index$1 = require('../ListItem/index.cjs');
+
+const Accordion = React.forwardRef((_a, ref) => {
+    var { children, title, subtitle } = _a, rest = tslib.__rest(_a, ["children", "title", "subtitle"]);
+    const [_expand, setExpand] = React.useState(false);
+    let [_b] = core.useInterface("Accordion", rest, {
+        onClick: () => setExpand(!_expand),
+        color: "brand",
+        variant: "soft"
+    }), { expand, onClick, color, variant, hoverColor, hoverVariant, expandIcon, expandIconPlacement, startIcon, endIcon, expandAction, classNames, slotProps } = _b, rootProps = tslib.__rest(_b, ["expand", "onClick", "color", "variant", "hoverColor", "hoverVariant", "expandIcon", "expandIconPlacement", "startIcon", "endIcon", "expandAction", "classNames", "slotProps"]);
+    const _p = {};
+    if (title)
+        _p.title = title;
+    if (subtitle)
+        _p.subtitle = subtitle;
+    if (startIcon)
+        _p.startIcon = startIcon;
+    if (endIcon)
+        _p.endIcon = endIcon;
+    if (expandIcon)
+        _p.expandIcon = expandIcon;
+    if (expandIconPlacement)
+        _p.expandIconPlacement = expandIconPlacement;
+    if (expandAction)
+        _p.expandAction = expandAction;
+    if (color)
+        _p.color = color;
+    if (variant)
+        _p.variant = variant;
+    if (hoverColor)
+        _p.hoverColor = hoverColor;
+    if (hoverVariant)
+        _p.hoverVariant = hoverVariant;
+    const p = core.useBreakpointProps(_p);
+    title = p.title;
+    subtitle = p.subtitle;
+    startIcon = p.startIcon;
+    endIcon = p.endIcon;
+    expandIcon = p.expandIcon;
+    expandIconPlacement = p.expandIconPlacement;
+    expandAction = p.expandAction;
+    color = p.color;
+    variant = p.variant;
+    hoverColor = p.hoverColor;
+    hoverVariant = p.hoverVariant;
+    expand = expand === undefined ? _expand : expand;
+    expandIcon = expandIcon ? jsxRuntime.jsx(core.Tag, Object.assign({ cursor: "pointer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandIconContainer, { onClick: expandAction === 'icon' && onClick ? () => onClick() : () => { }, className: 'expand-icon-container', children: expandIcon })) : jsxRuntime.jsx(core.Tag, Object.assign({ transform: `rotate(${expand ? 0 : -180}deg)`, transition: "transform .4s", cursor: "pointer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandIconContainer, { onClick: expandAction === 'icon' && onClick ? () => onClick() : () => { }, className: 'expand-icon-container', children: jsxRuntime.jsx(ExpandIcon, {}) }));
+    let itemsx = {};
+    if (expandIconPlacement === 'start') {
+        itemsx = {
+            startIcon: jsxRuntime.jsxs(core.Tag, { className: 'start-icon-container', sxr: {
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: 1
+                }, children: [expandIcon, startIcon] }),
+            endIcon
+        };
+    }
+    else {
+        itemsx = {
+            endIcon: jsxRuntime.jsxs(core.Tag, { className: 'end-icon-container', sxr: {
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: 1
+                }, children: [endIcon, expandIcon] }),
+            startIcon
+        };
+    }
+    if (expandAction === 'icon') {
+        itemsx.onClick = () => { };
+        itemsx.cursor = "initial!important";
+    }
+    return (jsxRuntime.jsx(core.Tag, Object.assign({}, rootProps, { sxr: {
+            bgcolor: "background.primary"
+        }, baseClass: 'accordion', classNames: [{ "accordion-expanded": expand }, ...(classNames || [])], ref: ref, children: jsxRuntime.jsxs(index, Object.assign({ component: 'div' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.header, { color: color, variant: variant, hoverColor: hoverColor, hoverVariant: hoverVariant, className: 'accoutdion-header', children: [jsxRuntime.jsx(index$1, Object.assign({ minHeight: 55, radius: 0, component: 'div' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.headerContent, itemsx, { subtitle: subtitle, selected: expand, onClick: () => onClick && onClick(), className: "accordion-header-content", children: title })), jsxRuntime.jsx(index$2, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.collaps, { open: expand, className: "accordion-collaps", children: jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { sxr: {
+                            color: "text.primary",
+                            p: 2,
+                            py: 1,
+                            bgcolor: "background.primary"
+                        }, baseClass: 'accordion-content', children: children })) }))] })) })));
+});
+
+module.exports = Accordion;
+//# sourceMappingURL=index.cjs.map

package/Accordion/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Accordion/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { ReactElement, useState } from 'react';\r\nimport { Tag, TagProps, useInterface, UseColorTemplateColor, UseColorTemplateType, TagComponentType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\r\nimport ExpandIcon from \"@xanui/icons/ExpandMore\";\r\nimport Collaps, { CollapsProps } from '../Collaps';\r\nimport List, { ListProps } from '../List';\r\nimport ListItem, { ListItemProps } from '../ListItem';\r\n\r\nexport type AccordionProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\r\n    expand?: boolean;\r\n    onClick?: () => void;\r\n    title: useBreakpointPropsType<ReactElement | string>;\r\n    subtitle?: useBreakpointPropsType<ReactElement | string>;\r\n    startIcon?: useBreakpointPropsType<ReactElement>;\r\n    endIcon?: useBreakpointPropsType<ReactElement>;\r\n    expandIcon?: useBreakpointPropsType<ReactElement>;\r\n    expandIconPlacement?: useBreakpointPropsType<\"start\" | \"end\">;\r\n    expandAction?: useBreakpointPropsType<\"header\" | \"icon\">;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\r\n\r\n    slotProps?: {\r\n        header?: Omit<ListProps, \"children\" | \"color\" | \"variant\" | \"hoverColor\" | \"hoverVariant\" | \"className\">;\r\n        headerContent?: Omit<ListItemProps, \"children\" | \"subtitle\" | \"selected\" | \"startIcon\" | \"endIcon\" | \"onClick\" | \"className\">\r\n        collaps?: Omit<CollapsProps, \"children\" | \"in\">;\r\n        content?: Omit<TagProps, \"children\">;\r\n        expandIconContainer?: Omit<TagProps<\"div\">, 'children' | 'className'>;\r\n    }\r\n}\r\n\r\nconst Accordion = React.forwardRef(<T extends TagComponentType = \"div\">({ children, title, subtitle, ...rest }: AccordionProps<T>, ref: React.Ref<any>) => {\r\n    const [_expand, setExpand] = useState(false)\r\n    let [{\r\n        expand,\r\n        onClick,\r\n        color,\r\n        variant,\r\n        hoverColor,\r\n        hoverVariant,\r\n        expandIcon,\r\n        expandIconPlacement,\r\n        startIcon,\r\n        endIcon,\r\n        expandAction,\r\n        classNames,\r\n        slotProps,\r\n        ...rootProps\r\n    }] = useInterface<any>(\"Accordion\", rest, {\r\n        onClick: () => setExpand(!_expand) as any,\r\n        color: \"brand\",\r\n        variant: \"soft\"\r\n    })\r\n\r\n    const _p: any = {}\r\n    if (title) _p.title = title\r\n    if (subtitle) _p.subtitle = subtitle\r\n    if (startIcon) _p.startIcon = startIcon\r\n    if (endIcon) _p.endIcon = endIcon\r\n    if (expandIcon) _p.expandIcon = expandIcon\r\n    if (expandIconPlacement) _p.expandIconPlacement = expandIconPlacement\r\n    if (expandAction) _p.expandAction = expandAction\r\n    if (color) _p.color = color\r\n    if (variant) _p.variant = variant\r\n    if (hoverColor) _p.hoverColor = hoverColor\r\n    if (hoverVariant) _p.hoverVariant = hoverVariant\r\n\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    title = p.title\r\n    subtitle = p.subtitle\r\n    startIcon = p.startIcon\r\n    endIcon = p.endIcon\r\n    expandIcon = p.expandIcon\r\n    expandIconPlacement = p.expandIconPlacement\r\n    expandAction = p.expandAction\r\n    color = p.color\r\n    variant = p.variant\r\n    hoverColor = p.hoverColor\r\n    hoverVariant = p.hoverVariant\r\n\r\n    expand = expand === undefined ? _expand : expand\r\n    expandIcon = expandIcon ? <Tag\r\n        cursor=\"pointer\"\r\n        {...slotProps?.expandIconContainer}\r\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\r\n        className='expand-icon-container'\r\n    >\r\n        {expandIcon}\r\n    </Tag> : <Tag\r\n        transform={`rotate(${expand ? 0 : -180}deg)`}\r\n        transition=\"transform .4s\"\r\n        cursor=\"pointer\"\r\n        {...slotProps?.expandIconContainer}\r\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\r\n        className='expand-icon-container'\r\n    >\r\n        <ExpandIcon />\r\n    </Tag>\r\n\r\n    let itemsx: any = {}\r\n\r\n    if (expandIconPlacement === 'start') {\r\n        itemsx = {\r\n            startIcon: <Tag\r\n                className='start-icon-container'\r\n                sxr={{\r\n                    display: \"flex\",\r\n                    flexDirection: \"row\",\r\n                    alignItems: \"center\",\r\n                    gap: 1\r\n                }}\r\n            >\r\n                {expandIcon}\r\n                {startIcon}\r\n            </Tag>,\r\n            endIcon\r\n        }\r\n\r\n    } else {\r\n        itemsx = {\r\n            endIcon: <Tag\r\n                className='end-icon-container'\r\n                sxr={{\r\n                    display: \"flex\",\r\n                    flexDirection: \"row\",\r\n                    alignItems: \"center\",\r\n                    gap: 1\r\n                }}\r\n            >\r\n                {endIcon}\r\n                {expandIcon}\r\n            </Tag>,\r\n            startIcon\r\n        }\r\n    }\r\n\r\n    if (expandAction === 'icon') {\r\n        itemsx.onClick = () => { }\r\n        itemsx.cursor = \"initial!important\"\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            {...rootProps}\r\n            sxr={{\r\n                bgcolor: \"background.primary\"\r\n            }}\r\n            baseClass='accordion'\r\n            classNames={[{ \"accordion-expanded\": expand }, ...(classNames || [])]}\r\n            ref={ref}\r\n        >\r\n            <List\r\n                component='div'\r\n                {...slotProps?.header}\r\n                color={color}\r\n                variant={variant}\r\n                hoverColor={hoverColor}\r\n                hoverVariant={hoverVariant}\r\n                className='accoutdion-header'\r\n            >\r\n                <ListItem\r\n                    minHeight={55}\r\n                    radius={0}\r\n                    component='div'\r\n                    {...slotProps?.headerContent}\r\n                    {...itemsx}\r\n                    subtitle={subtitle}\r\n                    selected={expand}\r\n                    onClick={() => onClick && onClick()}\r\n                    className=\"accordion-header-content\"\r\n                >{title}</ListItem>\r\n                <Collaps\r\n                    {...slotProps?.collaps}\r\n                    open={expand}\r\n                    className=\"accordion-collaps\"\r\n                >\r\n                    <Tag\r\n                        {...slotProps?.content}\r\n                        sxr={{\r\n                            color: \"text.primary\",\r\n                            p: 2,\r\n                            py: 1,\r\n                            bgcolor: \"background.primary\"\r\n                        }}\r\n                        baseClass='accordion-content'\r\n                    >\r\n                        {children}\r\n                    </Tag>\r\n                </Collaps>\r\n            </List>\r\n        </Tag>\r\n    )\r\n})\r\nexport default Accordion\r\n\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;;;AAgCA;;;AAEI;;AAiBI;AACA;AACH;;AAGD;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAa;AACb;AAAgB;AAChB;AAAyB;AACzB;AAAkB;AAClB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAkB;AAElB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAqBA;AACI;;AAIY;AACA;AACA;AACA;;;;;;AAUZ;;AAIY;AACA;AACA;AACA;;;;;AAUhB;AACI;AACA;;AAGJ;AAIY;AACH;AAiCe;AACA;AACA;AACA;;AAU5B;;"}

package/Accordion/index.js

@@ -1,23 +1,21 @@
 "use client";
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@xanui/core');
-var ExpandIcon = require('@xanui/icons/ExpandMore');
-var index$2 = require('../Collaps/index.js');
-var index = require('../List/index.js');
-var index$1 = require('../ListItem/index.js');
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useState } from 'react';
+import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
+import ExpandIcon from '@xanui/icons/ExpandMore';
+import Collaps from '../Collaps/index.js';
+import List from '../List/index.js';
+import ListItem from '../ListItem/index.js';
 
 const Accordion = React.forwardRef((_a, ref) => {
-    var { children, title, subtitle } = _a, rest = tslib.__rest(_a, ["children", "title", "subtitle"]);
-    const [_expand, setExpand] = React.useState(false);
-    let [_b] = core.useInterface("Accordion", rest, {
+    var { children, title, subtitle } = _a, rest = __rest(_a, ["children", "title", "subtitle"]);
+    const [_expand, setExpand] = useState(false);
+    let [_b] = useInterface("Accordion", rest, {
         onClick: () => setExpand(!_expand),
         color: "brand",
         variant: "soft"
-    }), { expand, onClick, color, variant, hoverColor, hoverVariant, expandIcon, expandIconPlacement, startIcon, endIcon, expandAction, classNames, slotProps } = _b, rootProps = tslib.__rest(_b, ["expand", "onClick", "color", "variant", "hoverColor", "hoverVariant", "expandIcon", "expandIconPlacement", "startIcon", "endIcon", "expandAction", "classNames", "slotProps"]);
+    }), { expand, onClick, color, variant, hoverColor, hoverVariant, expandIcon, expandIconPlacement, startIcon, endIcon, expandAction, classNames, slotProps } = _b, rootProps = __rest(_b, ["expand", "onClick", "color", "variant", "hoverColor", "hoverVariant", "expandIcon", "expandIconPlacement", "startIcon", "endIcon", "expandAction", "classNames", "slotProps"]);
     const _p = {};
     if (title)
         _p.title = title;
@@ -41,7 +39,7 @@ const Accordion = React.forwardRef((_a, ref) => {
         _p.hoverColor = hoverColor;
     if (hoverVariant)
         _p.hoverVariant = hoverVariant;
-    const p = core.useBreakpointProps(_p);
+    const p = useBreakpointProps(_p);
     title = p.title;
     subtitle = p.subtitle;
     startIcon = p.startIcon;
@@ -54,11 +52,11 @@ const Accordion = React.forwardRef((_a, ref) => {
     hoverColor = p.hoverColor;
     hoverVariant = p.hoverVariant;
     expand = expand === undefined ? _expand : expand;
-    expandIcon = expandIcon ? jsxRuntime.jsx(core.Tag, Object.assign({ cursor: "pointer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandIconContainer, { onClick: expandAction === 'icon' && onClick ? () => onClick() : () => { }, className: 'expand-icon-container', children: expandIcon })) : jsxRuntime.jsx(core.Tag, Object.assign({ transform: `rotate(${expand ? 0 : -180}deg)`, transition: "transform .4s", cursor: "pointer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandIconContainer, { onClick: expandAction === 'icon' && onClick ? () => onClick() : () => { }, className: 'expand-icon-container', children: jsxRuntime.jsx(ExpandIcon, {}) }));
+    expandIcon = expandIcon ? jsx(Tag, Object.assign({ cursor: "pointer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandIconContainer, { onClick: expandAction === 'icon' && onClick ? () => onClick() : () => { }, className: 'expand-icon-container', children: expandIcon })) : jsx(Tag, Object.assign({ transform: `rotate(${expand ? 0 : -180}deg)`, transition: "transform .4s", cursor: "pointer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandIconContainer, { onClick: expandAction === 'icon' && onClick ? () => onClick() : () => { }, className: 'expand-icon-container', children: jsx(ExpandIcon, {}) }));
     let itemsx = {};
     if (expandIconPlacement === 'start') {
         itemsx = {
-            startIcon: jsxRuntime.jsxs(core.Tag, { className: 'start-icon-container', sxr: {
+            startIcon: jsxs(Tag, { className: 'start-icon-container', sxr: {
                     display: "flex",
                     flexDirection: "row",
                     alignItems: "center",
@@ -69,7 +67,7 @@ const Accordion = React.forwardRef((_a, ref) => {
     }
     else {
         itemsx = {
-            endIcon: jsxRuntime.jsxs(core.Tag, { className: 'end-icon-container', sxr: {
+            endIcon: jsxs(Tag, { className: 'end-icon-container', sxr: {
                     display: "flex",
                     flexDirection: "row",
                     alignItems: "center",
@@ -82,9 +80,9 @@ const Accordion = React.forwardRef((_a, ref) => {
         itemsx.onClick = () => { };
         itemsx.cursor = "initial!important";
     }
-    return (jsxRuntime.jsx(core.Tag, Object.assign({}, rootProps, { sxr: {
+    return (jsx(Tag, Object.assign({}, rootProps, { sxr: {
             bgcolor: "background.primary"
-        }, baseClass: 'accordion', classNames: [{ "accordion-expanded": expand }, ...(classNames || [])], ref: ref, children: jsxRuntime.jsxs(index, Object.assign({ component: 'div' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.header, { color: color, variant: variant, hoverColor: hoverColor, hoverVariant: hoverVariant, className: 'accoutdion-header', children: [jsxRuntime.jsx(index$1, Object.assign({ minHeight: 55, radius: 0, component: 'div' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.headerContent, itemsx, { subtitle: subtitle, selected: expand, onClick: () => onClick && onClick(), className: "accordion-header-content", children: title })), jsxRuntime.jsx(index$2, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.collaps, { open: expand, className: "accordion-collaps", children: jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { sxr: {
+        }, baseClass: 'accordion', classNames: [{ "accordion-expanded": expand }, ...(classNames || [])], ref: ref, children: jsxs(List, Object.assign({ component: 'div' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.header, { color: color, variant: variant, hoverColor: hoverColor, hoverVariant: hoverVariant, className: 'accoutdion-header', children: [jsx(ListItem, Object.assign({ minHeight: 55, radius: 0, component: 'div' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.headerContent, itemsx, { subtitle: subtitle, selected: expand, onClick: () => onClick && onClick(), className: "accordion-header-content", children: title })), jsx(Collaps, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.collaps, { open: expand, className: "accordion-collaps", children: jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { sxr: {
                             color: "text.primary",
                             p: 2,
                             py: 1,
@@ -92,5 +90,5 @@ const Accordion = React.forwardRef((_a, ref) => {
                         }, baseClass: 'accordion-content', children: children })) }))] })) })));
 });
 
-module.exports = Accordion;
+export { Accordion as default };
 //# sourceMappingURL=index.js.map

package/Accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Accordion/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { ReactElement, useState } from 'react';\r\nimport { Tag, TagProps, useInterface, UseColorTemplateColor, UseColorTemplateType, TagComponentType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\r\nimport ExpandIcon from \"@xanui/icons/ExpandMore\";\r\nimport Collaps, { CollapsProps } from '../Collaps';\r\nimport List, { ListProps } from '../List';\r\nimport ListItem, { ListItemProps } from '../ListItem';\r\n\r\nexport type AccordionProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\r\n    expand?: boolean;\r\n    onClick?: () => void;\r\n    title: useBreakpointPropsType<ReactElement | string>;\r\n    subtitle?: useBreakpointPropsType<ReactElement | string>;\r\n    startIcon?: useBreakpointPropsType<ReactElement>;\r\n    endIcon?: useBreakpointPropsType<ReactElement>;\r\n    expandIcon?: useBreakpointPropsType<ReactElement>;\r\n    expandIconPlacement?: useBreakpointPropsType<\"start\" | \"end\">;\r\n    expandAction?: useBreakpointPropsType<\"header\" | \"icon\">;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\r\n\r\n    slotProps?: {\r\n        header?: Omit<ListProps, \"children\" | \"color\" | \"variant\" | \"hoverColor\" | \"hoverVariant\" | \"className\">;\r\n        headerContent?: Omit<ListItemProps, \"children\" | \"subtitle\" | \"selected\" | \"startIcon\" | \"endIcon\" | \"onClick\" | \"className\">\r\n        collaps?: Omit<CollapsProps, \"children\" | \"in\">;\r\n        content?: Omit<TagProps, \"children\">;\r\n        expandIconContainer?: Omit<TagProps<\"div\">, 'children' | 'className'>;\r\n    }\r\n}\r\n\r\nconst Accordion = React.forwardRef(<T extends TagComponentType = \"div\">({ children, title, subtitle, ...rest }: AccordionProps<T>, ref: React.Ref<any>) => {\r\n    const [_expand, setExpand] = useState(false)\r\n    let [{\r\n        expand,\r\n        onClick,\r\n        color,\r\n        variant,\r\n        hoverColor,\r\n        hoverVariant,\r\n        expandIcon,\r\n        expandIconPlacement,\r\n        startIcon,\r\n        endIcon,\r\n        expandAction,\r\n        classNames,\r\n        slotProps,\r\n        ...rootProps\r\n    }] = useInterface<any>(\"Accordion\", rest, {\r\n        onClick: () => setExpand(!_expand) as any,\r\n        color: \"brand\",\r\n        variant: \"soft\"\r\n    })\r\n\r\n    const _p: any = {}\r\n    if (title) _p.title = title\r\n    if (subtitle) _p.subtitle = subtitle\r\n    if (startIcon) _p.startIcon = startIcon\r\n    if (endIcon) _p.endIcon = endIcon\r\n    if (expandIcon) _p.expandIcon = expandIcon\r\n    if (expandIconPlacement) _p.expandIconPlacement = expandIconPlacement\r\n    if (expandAction) _p.expandAction = expandAction\r\n    if (color) _p.color = color\r\n    if (variant) _p.variant = variant\r\n    if (hoverColor) _p.hoverColor = hoverColor\r\n    if (hoverVariant) _p.hoverVariant = hoverVariant\r\n\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    title = p.title\r\n    subtitle = p.subtitle\r\n    startIcon = p.startIcon\r\n    endIcon = p.endIcon\r\n    expandIcon = p.expandIcon\r\n    expandIconPlacement = p.expandIconPlacement\r\n    expandAction = p.expandAction\r\n    color = p.color\r\n    variant = p.variant\r\n    hoverColor = p.hoverColor\r\n    hoverVariant = p.hoverVariant\r\n\r\n    expand = expand === undefined ? _expand : expand\r\n    expandIcon = expandIcon ? <Tag\r\n        cursor=\"pointer\"\r\n        {...slotProps?.expandIconContainer}\r\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\r\n        className='expand-icon-container'\r\n    >\r\n        {expandIcon}\r\n    </Tag> : <Tag\r\n        transform={`rotate(${expand ? 0 : -180}deg)`}\r\n        transition=\"transform .4s\"\r\n        cursor=\"pointer\"\r\n        {...slotProps?.expandIconContainer}\r\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\r\n        className='expand-icon-container'\r\n    >\r\n        <ExpandIcon />\r\n    </Tag>\r\n\r\n    let itemsx: any = {}\r\n\r\n    if (expandIconPlacement === 'start') {\r\n        itemsx = {\r\n            startIcon: <Tag\r\n                className='start-icon-container'\r\n                sxr={{\r\n                    display: \"flex\",\r\n                    flexDirection: \"row\",\r\n                    alignItems: \"center\",\r\n                    gap: 1\r\n                }}\r\n            >\r\n                {expandIcon}\r\n                {startIcon}\r\n            </Tag>,\r\n            endIcon\r\n        }\r\n\r\n    } else {\r\n        itemsx = {\r\n            endIcon: <Tag\r\n                className='end-icon-container'\r\n                sxr={{\r\n                    display: \"flex\",\r\n                    flexDirection: \"row\",\r\n                    alignItems: \"center\",\r\n                    gap: 1\r\n                }}\r\n            >\r\n                {endIcon}\r\n                {expandIcon}\r\n            </Tag>,\r\n            startIcon\r\n        }\r\n    }\r\n\r\n    if (expandAction === 'icon') {\r\n        itemsx.onClick = () => { }\r\n        itemsx.cursor = \"initial!important\"\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            {...rootProps}\r\n            sxr={{\r\n                bgcolor: \"background.primary\"\r\n            }}\r\n            baseClass='accordion'\r\n            classNames={[{ \"accordion-expanded\": expand }, ...(classNames || [])]}\r\n            ref={ref}\r\n        >\r\n            <List\r\n                component='div'\r\n                {...slotProps?.header}\r\n                color={color}\r\n                variant={variant}\r\n                hoverColor={hoverColor}\r\n                hoverVariant={hoverVariant}\r\n                className='accoutdion-header'\r\n            >\r\n                <ListItem\r\n                    minHeight={55}\r\n                    radius={0}\r\n                    component='div'\r\n                    {...slotProps?.headerContent}\r\n                    {...itemsx}\r\n                    subtitle={subtitle}\r\n                    selected={expand}\r\n                    onClick={() => onClick && onClick()}\r\n                    className=\"accordion-header-content\"\r\n                >{title}</ListItem>\r\n                <Collaps\r\n                    {...slotProps?.collaps}\r\n                    open={expand}\r\n                    className=\"accordion-collaps\"\r\n                >\r\n                    <Tag\r\n                        {...slotProps?.content}\r\n                        sxr={{\r\n                            color: \"text.primary\",\r\n                            p: 2,\r\n                            py: 1,\r\n                            bgcolor: \"background.primary\"\r\n                        }}\r\n                        baseClass='accordion-content'\r\n                    >\r\n                        {children}\r\n                    </Tag>\r\n                </Collaps>\r\n            </List>\r\n        </Tag>\r\n    )\r\n})\r\nexport default Accordion\r\n\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;;;AAgCA;;;AAEI;;AAiBI;AACA;AACH;;AAGD;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAa;AACb;AAAgB;AAChB;AAAyB;AACzB;AAAkB;AAClB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAkB;AAElB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAqBA;AACI;;AAIY;AACA;AACA;AACA;;;;;;AAUZ;;AAIY;AACA;AACA;AACA;;;;;AAUhB;AACI;AACA;;AAGJ;AAIY;AACH;AAiCe;AACA;AACA;AACA;;AAU5B;;"}
+{"version":3,"file":"index.js","sources":["../../src/Accordion/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { ReactElement, useState } from 'react';\r\nimport { Tag, TagProps, useInterface, UseColorTemplateColor, UseColorTemplateType, TagComponentType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\r\nimport ExpandIcon from \"@xanui/icons/ExpandMore\";\r\nimport Collaps, { CollapsProps } from '../Collaps';\r\nimport List, { ListProps } from '../List';\r\nimport ListItem, { ListItemProps } from '../ListItem';\r\n\r\nexport type AccordionProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\r\n    expand?: boolean;\r\n    onClick?: () => void;\r\n    title: useBreakpointPropsType<ReactElement | string>;\r\n    subtitle?: useBreakpointPropsType<ReactElement | string>;\r\n    startIcon?: useBreakpointPropsType<ReactElement>;\r\n    endIcon?: useBreakpointPropsType<ReactElement>;\r\n    expandIcon?: useBreakpointPropsType<ReactElement>;\r\n    expandIconPlacement?: useBreakpointPropsType<\"start\" | \"end\">;\r\n    expandAction?: useBreakpointPropsType<\"header\" | \"icon\">;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\r\n\r\n    slotProps?: {\r\n        header?: Omit<ListProps, \"children\" | \"color\" | \"variant\" | \"hoverColor\" | \"hoverVariant\" | \"className\">;\r\n        headerContent?: Omit<ListItemProps, \"children\" | \"subtitle\" | \"selected\" | \"startIcon\" | \"endIcon\" | \"onClick\" | \"className\">\r\n        collaps?: Omit<CollapsProps, \"children\" | \"in\">;\r\n        content?: Omit<TagProps, \"children\">;\r\n        expandIconContainer?: Omit<TagProps<\"div\">, 'children' | 'className'>;\r\n    }\r\n}\r\n\r\nconst Accordion = React.forwardRef(<T extends TagComponentType = \"div\">({ children, title, subtitle, ...rest }: AccordionProps<T>, ref: React.Ref<any>) => {\r\n    const [_expand, setExpand] = useState(false)\r\n    let [{\r\n        expand,\r\n        onClick,\r\n        color,\r\n        variant,\r\n        hoverColor,\r\n        hoverVariant,\r\n        expandIcon,\r\n        expandIconPlacement,\r\n        startIcon,\r\n        endIcon,\r\n        expandAction,\r\n        classNames,\r\n        slotProps,\r\n        ...rootProps\r\n    }] = useInterface<any>(\"Accordion\", rest, {\r\n        onClick: () => setExpand(!_expand) as any,\r\n        color: \"brand\",\r\n        variant: \"soft\"\r\n    })\r\n\r\n    const _p: any = {}\r\n    if (title) _p.title = title\r\n    if (subtitle) _p.subtitle = subtitle\r\n    if (startIcon) _p.startIcon = startIcon\r\n    if (endIcon) _p.endIcon = endIcon\r\n    if (expandIcon) _p.expandIcon = expandIcon\r\n    if (expandIconPlacement) _p.expandIconPlacement = expandIconPlacement\r\n    if (expandAction) _p.expandAction = expandAction\r\n    if (color) _p.color = color\r\n    if (variant) _p.variant = variant\r\n    if (hoverColor) _p.hoverColor = hoverColor\r\n    if (hoverVariant) _p.hoverVariant = hoverVariant\r\n\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    title = p.title\r\n    subtitle = p.subtitle\r\n    startIcon = p.startIcon\r\n    endIcon = p.endIcon\r\n    expandIcon = p.expandIcon\r\n    expandIconPlacement = p.expandIconPlacement\r\n    expandAction = p.expandAction\r\n    color = p.color\r\n    variant = p.variant\r\n    hoverColor = p.hoverColor\r\n    hoverVariant = p.hoverVariant\r\n\r\n    expand = expand === undefined ? _expand : expand\r\n    expandIcon = expandIcon ? <Tag\r\n        cursor=\"pointer\"\r\n        {...slotProps?.expandIconContainer}\r\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\r\n        className='expand-icon-container'\r\n    >\r\n        {expandIcon}\r\n    </Tag> : <Tag\r\n        transform={`rotate(${expand ? 0 : -180}deg)`}\r\n        transition=\"transform .4s\"\r\n        cursor=\"pointer\"\r\n        {...slotProps?.expandIconContainer}\r\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\r\n        className='expand-icon-container'\r\n    >\r\n        <ExpandIcon />\r\n    </Tag>\r\n\r\n    let itemsx: any = {}\r\n\r\n    if (expandIconPlacement === 'start') {\r\n        itemsx = {\r\n            startIcon: <Tag\r\n                className='start-icon-container'\r\n                sxr={{\r\n                    display: \"flex\",\r\n                    flexDirection: \"row\",\r\n                    alignItems: \"center\",\r\n                    gap: 1\r\n                }}\r\n            >\r\n                {expandIcon}\r\n                {startIcon}\r\n            </Tag>,\r\n            endIcon\r\n        }\r\n\r\n    } else {\r\n        itemsx = {\r\n            endIcon: <Tag\r\n                className='end-icon-container'\r\n                sxr={{\r\n                    display: \"flex\",\r\n                    flexDirection: \"row\",\r\n                    alignItems: \"center\",\r\n                    gap: 1\r\n                }}\r\n            >\r\n                {endIcon}\r\n                {expandIcon}\r\n            </Tag>,\r\n            startIcon\r\n        }\r\n    }\r\n\r\n    if (expandAction === 'icon') {\r\n        itemsx.onClick = () => { }\r\n        itemsx.cursor = \"initial!important\"\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            {...rootProps}\r\n            sxr={{\r\n                bgcolor: \"background.primary\"\r\n            }}\r\n            baseClass='accordion'\r\n            classNames={[{ \"accordion-expanded\": expand }, ...(classNames || [])]}\r\n            ref={ref}\r\n        >\r\n            <List\r\n                component='div'\r\n                {...slotProps?.header}\r\n                color={color}\r\n                variant={variant}\r\n                hoverColor={hoverColor}\r\n                hoverVariant={hoverVariant}\r\n                className='accoutdion-header'\r\n            >\r\n                <ListItem\r\n                    minHeight={55}\r\n                    radius={0}\r\n                    component='div'\r\n                    {...slotProps?.headerContent}\r\n                    {...itemsx}\r\n                    subtitle={subtitle}\r\n                    selected={expand}\r\n                    onClick={() => onClick && onClick()}\r\n                    className=\"accordion-header-content\"\r\n                >{title}</ListItem>\r\n                <Collaps\r\n                    {...slotProps?.collaps}\r\n                    open={expand}\r\n                    className=\"accordion-collaps\"\r\n                >\r\n                    <Tag\r\n                        {...slotProps?.content}\r\n                        sxr={{\r\n                            color: \"text.primary\",\r\n                            p: 2,\r\n                            py: 1,\r\n                            bgcolor: \"background.primary\"\r\n                        }}\r\n                        baseClass='accordion-content'\r\n                    >\r\n                        {children}\r\n                    </Tag>\r\n                </Collaps>\r\n            </List>\r\n        </Tag>\r\n    )\r\n})\r\nexport default Accordion\r\n\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;AAgCA;;;AAEI;;AAiBI;AACA;AACH;;AAGD;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAa;AACb;AAAgB;AAChB;AAAyB;AACzB;AAAkB;AAClB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAkB;AAElB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAqBA;AACI;;AAIY;AACA;AACA;AACA;;;;;;AAUZ;;AAIY;AACA;AACA;AACA;;;;;AAUhB;AACI;AACA;;AAGJ;AAIY;AACH;AAiCe;AACA;AACA;AACA;;AAU5B;;"}

package/Alert/index.cjs

@@ -0,0 +1,121 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@xanui/core');
+var React = require('react');
+var index$1 = require('../Text/index.cjs');
+var InfoIcon = require('@xanui/icons/Info');
+var WarningIcon = require('@xanui/icons/Warning');
+var SuccessIcon = require('@xanui/icons/CheckCircle');
+var ErrorIcon = require('@xanui/icons/Cancel');
+var Close = require('@xanui/icons/Close');
+var index = require('../IconButton/index.cjs');
+var index$2 = require('../useAlert/index.cjs');
+
+const Alert = (_a) => {
+    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
+    let [_b] = core.useInterface("Alert", rest, {
+        variant: "fill"
+    }), { title, variant, icon, color, direction, slotProps, onClose } = _b, _props = tslib.__rest(_b, ["title", "variant", "icon", "color", "direction", "slotProps", "onClose"]);
+    color !== null && color !== void 0 ? color : (color = "default");
+    direction !== null && direction !== void 0 ? direction : (direction = "row");
+    const _p = {};
+    if (title)
+        _p.title = title;
+    if (variant)
+        _p.variant = variant;
+    if (icon)
+        _p.icon = icon;
+    if (color)
+        _p.color = color;
+    if (direction)
+        _p.direction = direction;
+    const p = core.useBreakpointProps(_p);
+    title = p.title;
+    variant = p.variant;
+    icon = p.icon;
+    color = p.color;
+    direction = p.direction;
+    let isRow = direction === 'row';
+    const template = core.useColorTemplate(color, variant);
+    let iconsx = {
+        fontSize: isRow ? 22 : 40,
+        color: color === 'default' ? "text.primary" : template.primary.color
+    };
+    const icons = {
+        "info": jsxRuntime.jsx(InfoIcon, { sx: iconsx }),
+        "warning": jsxRuntime.jsx(WarningIcon, { sx: iconsx }),
+        "success": jsxRuntime.jsx(SuccessIcon, { sx: iconsx }),
+        "danger": jsxRuntime.jsx(ErrorIcon, { sx: iconsx })
+    };
+    let _icon = icons[icon] || icons[color];
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({}, _props, { baseClass: "alert", sxr: Object.assign({ justifyContent: "flex-start", position: "relative", radius: 1, px: isRow ? (_icon ? .5 : 2) : 3, py: isRow ? .5 : 3, flexDirection: "column", display: 'flex' }, _props === null || _props === void 0 ? void 0 : _props.sx) }, template.primary, { children: [onClose && jsxRuntime.jsx(index, { color: color, variant: variant === 'fill' ? "fill" : "text", size: 25, sx: {
+                    position: "absolute",
+                    top: 5,
+                    right: 5
+                }, onClick: onClose, className: "alert-close-button", children: jsxRuntime.jsx(Close, { fontSize: 18 }) }), jsxRuntime.jsxs(core.Tag, { sx: {
+                    display: "flex",
+                    gap: 1,
+                    flexDirection: direction,
+                    alignItems: isRow ? "flex-start" : "center"
+                }, baseClass: "alert-container", children: [_icon && jsxRuntime.jsx(core.Tag, { baseClass: "alert-icon", sxr: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            p: isRow ? 1 : 0,
+                            "& svg": {
+                                color: template.primary.color
+                            }
+                        }, children: _icon }), jsxRuntime.jsxs(core.Tag, { baseClass: "alert-content", sxr: {
+                            display: "flex",
+                            flexDirection: "column",
+                            flex: 1,
+                            color: template.primary.color,
+                            py: 1,
+                            textAlign: isRow ? "left" : "center",
+                            gap: isRow ? 0 : 1
+                        }, children: [title && jsxRuntime.jsx(jsxRuntime.Fragment, { children: React.isValidElement(title) ? jsxRuntime.jsx(core.Tag, { className: "alert-title", children: title }) : jsxRuntime.jsx(index$1, { className: "alert-title", variant: "text", sx: {
+                                        font: "text",
+                                        fontWeight: "bold!important",
+                                        color: template.primary.color
+                                    }, children: title }) }), jsxRuntime.jsx(core.Tag, { sxr: {
+                                    font: "button",
+                                }, children: children })] })] })] })));
+};
+const ActionAlert = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const ref = React.useRef(null);
+    const alert = index$2(Object.assign(Object.assign({}, props), { slotProps: Object.assign(Object.assign({}, props.slotProps), { modal: Object.assign(Object.assign({}, (_a = props.slotProps) === null || _a === void 0 ? void 0 : _a.modal), { slotProps: Object.assign(Object.assign({}, (_c = (_b = props.slotProps) === null || _b === void 0 ? void 0 : _b.modal) === null || _c === void 0 ? void 0 : _c.slotProps), { layer: Object.assign(Object.assign({}, (_f = (_e = (_d = props.slotProps) === null || _d === void 0 ? void 0 : _d.modal) === null || _e === void 0 ? void 0 : _e.slotProps) === null || _f === void 0 ? void 0 : _f.layer), { portal: Object.assign(Object.assign({}, (_k = (_j = (_h = (_g = props.slotProps) === null || _g === void 0 ? void 0 : _g.modal) === null || _h === void 0 ? void 0 : _h.slotProps) === null || _j === void 0 ? void 0 : _j.layer) === null || _k === void 0 ? void 0 : _k.portal), { container: ref.current || undefined }) }) }) }) }) }));
+    React.useEffect(() => {
+        if (props.open) {
+            alert.open();
+        }
+        else {
+            alert.close();
+        }
+    }, [props.open]);
+    return jsxRuntime.jsx(core.Tag, { ref: ref });
+};
+Alert.confirm = (props) => {
+    var _a;
+    const a = core.Renderar.render(ActionAlert, Object.assign(Object.assign({ open: true }, props), { slotProps: Object.assign(Object.assign({}, props.slotProps), { modal: Object.assign(Object.assign({}, (_a = props.slotProps) === null || _a === void 0 ? void 0 : _a.modal), { onClosed: () => {
+                    var _a, _b, _c, _d;
+                    a.unrender();
+                    if ((_b = (_a = props === null || props === void 0 ? void 0 : props.slotProps) === null || _a === void 0 ? void 0 : _a.modal) === null || _b === void 0 ? void 0 : _b.onClosed) {
+                        (_d = (_c = props.slotProps) === null || _c === void 0 ? void 0 : _c.modal) === null || _d === void 0 ? void 0 : _d.onClosed();
+                    }
+                } }) }) }));
+    return {
+        open: () => {
+            a.updateProps({ open: true });
+        },
+        close: () => {
+            a.updateProps({ open: false });
+        },
+    };
+};
+
+module.exports = Alert;
+//# sourceMappingURL=index.cjs.map

package/Alert/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Alert/index.tsx"],"sourcesContent":["'use client'\r\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor } from \"@xanui/core\"\r\nimport React, { isValidElement, ReactElement, useEffect, useRef } from \"react\"\r\nimport Text from \"../Text\"\r\nimport InfoIcon from '@xanui/icons/Info';\r\nimport WarningIcon from '@xanui/icons/Warning';\r\nimport SuccessIcon from '@xanui/icons/CheckCircle';\r\nimport ErrorIcon from '@xanui/icons/Cancel';\r\nimport IconClose from '@xanui/icons/Close';\r\nimport IconButton from \"../IconButton\";\r\nimport useAlert, { UseAlerProps } from \"../useAlert\";\r\n\r\n\r\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\r\n    title?: useBreakpointPropsType<string | ReactElement>;\r\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\r\n    onClose?: React.DOMAttributes<\"button\">['onClick'];\r\n}\r\n\r\nexport type AlertMesssageType = string | ReactElement | AlertProps\r\n\r\nconst Alert = ({ children, ...rest }: AlertProps) => {\r\n    let [{\r\n        title,\r\n        variant,\r\n        icon,\r\n        color,\r\n        direction,\r\n        slotProps,\r\n        onClose,\r\n        ..._props\r\n    }] = useInterface<any>(\"Alert\", rest, {\r\n        variant: \"fill\"\r\n    })\r\n    color ??= \"default\"\r\n    direction ??= \"row\"\r\n\r\n    const _p: any = {}\r\n    if (title) _p.title = title\r\n    if (variant) _p.variant = variant\r\n    if (icon) _p.icon = icon\r\n    if (color) _p.color = color\r\n    if (direction) _p.direction = direction\r\n\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    title = p.title\r\n    variant = p.variant\r\n    icon = p.icon\r\n    color = p.color\r\n    direction = p.direction\r\n\r\n    let isRow = direction === 'row'\r\n\r\n\r\n    const template = useColorTemplate(color, variant)\r\n\r\n    let iconsx = {\r\n        fontSize: isRow ? 22 : 40,\r\n        color: color === 'default' ? \"text.primary\" : template.primary.color\r\n    }\r\n\r\n    const icons: any = {\r\n        \"info\": <InfoIcon sx={iconsx} />,\r\n        \"warning\": <WarningIcon sx={iconsx} />,\r\n        \"success\": <SuccessIcon sx={iconsx} />,\r\n        \"danger\": <ErrorIcon sx={iconsx} />\r\n    }\r\n\r\n    let _icon = icons[icon] || icons[color]\r\n\r\n    return (\r\n        <Tag\r\n            {..._props}\r\n            baseClass=\"alert\"\r\n            sxr={{\r\n                justifyContent: \"flex-start\",\r\n                position: \"relative\",\r\n                radius: 1,\r\n                px: isRow ? (_icon ? .5 : 2) : 3,\r\n                py: isRow ? .5 : 3,\r\n                flexDirection: \"column\",\r\n                display: 'flex',\r\n                ..._props?.sx\r\n            }}\r\n            {...template.primary}\r\n        >\r\n            {\r\n                onClose && <IconButton\r\n                    color={color}\r\n                    variant={variant === 'fill' ? \"fill\" : \"text\"}\r\n                    size={25}\r\n                    sx={{\r\n                        position: \"absolute\",\r\n                        top: 5,\r\n                        right: 5\r\n                    }}\r\n                    onClick={onClose}\r\n                    className=\"alert-close-button\"\r\n                >\r\n                    <IconClose fontSize={18} />\r\n                </IconButton>\r\n            }\r\n            <Tag\r\n                sx={{\r\n                    display: \"flex\",\r\n                    gap: 1,\r\n                    flexDirection: direction,\r\n                    alignItems: isRow ? \"flex-start\" : \"center\"\r\n                }}\r\n                baseClass=\"alert-container\"\r\n            >\r\n                {\r\n                    _icon && <Tag\r\n                        baseClass=\"alert-icon\"\r\n                        sxr={{\r\n                            display: \"flex\",\r\n                            alignItems: \"center\",\r\n                            justifyContent: \"center\",\r\n                            p: isRow ? 1 : 0,\r\n                            \"& svg\": {\r\n                                color: template.primary.color\r\n                            }\r\n                        }}\r\n                    >\r\n                        {_icon}\r\n                    </Tag>\r\n                }\r\n                <Tag\r\n                    baseClass=\"alert-content\"\r\n                    sxr={{\r\n                        display: \"flex\",\r\n                        flexDirection: \"column\",\r\n                        flex: 1,\r\n                        color: template.primary.color,\r\n                        py: 1,\r\n                        textAlign: isRow ? \"left\" : \"center\",\r\n                        gap: isRow ? 0 : 1\r\n                    }}\r\n                >\r\n                    {title && <>\r\n                        {\r\n                            isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\r\n                                className=\"alert-title\"\r\n                                variant=\"text\"\r\n                                sx={{\r\n                                    font: \"text\",\r\n                                    fontWeight: \"bold!important\",\r\n                                    color: template.primary.color\r\n                                }}\r\n                            >{title}</Text>\r\n                        }\r\n                    </>}\r\n                    <Tag\r\n                        sxr={{\r\n                            font: \"button\",\r\n                        }}\r\n                    >\r\n                        {children}\r\n                    </Tag>\r\n                </Tag>\r\n            </Tag>\r\n        </Tag>\r\n    )\r\n}\r\n\r\nconst ActionAlert = (props: UseAlerProps) => {\r\n    const ref = useRef<HTMLDivElement>(null);\r\n    const alert = useAlert({\r\n        ...props,\r\n        slotProps: {\r\n            ...props.slotProps,\r\n            modal: {\r\n                ...props.slotProps?.modal,\r\n                slotProps: {\r\n                    ...props.slotProps?.modal?.slotProps,\r\n                    layer: {\r\n                        ...props.slotProps?.modal?.slotProps?.layer,\r\n                        portal: {\r\n                            ...props.slotProps?.modal?.slotProps?.layer?.portal,\r\n                            container: ref.current || undefined\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    })\r\n\r\n    useEffect(() => {\r\n        if (props.open) {\r\n            alert.open()\r\n        } else {\r\n            alert.close()\r\n        }\r\n    }, [props.open])\r\n    return <Tag ref={ref}></Tag>\r\n}\r\n\r\nAlert.confirm = (props: UseAlerProps) => {\r\n    const a = Renderar.render(ActionAlert as any, {\r\n        open: true,\r\n        ...props,\r\n        slotProps: {\r\n            ...props.slotProps,\r\n            modal: {\r\n                ...props.slotProps?.modal,\r\n                onClosed: () => {\r\n                    a.unrender()\r\n                    if (props?.slotProps?.modal?.onClosed) {\r\n                        props.slotProps?.modal?.onClosed()\r\n                    }\r\n                },\r\n            }\r\n        },\r\n    })\r\n\r\n    return {\r\n        open: () => {\r\n            a.updateProps({ open: true })\r\n        },\r\n        close: () => {\r\n            a.updateProps({ open: false })\r\n        },\r\n    }\r\n}\r\n\r\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;AACA;;;AAGH;AAQe;AACA;AACA;;AAOR;AACH;AAQzB;AAEA;;AACI;AACA;;AAqBI;;;;;;AAKJ;AACA;AACJ;AAEA;;AACI;;;AASgB;;;AAGJ;;;;;;;;;AAahB;;"}

package/Alert/index.js

@@ -1,24 +1,22 @@
 "use client";
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@xanui/core');
-var React = require('react');
-var index$1 = require('../Text/index.js');
-var InfoIcon = require('@xanui/icons/Info');
-var WarningIcon = require('@xanui/icons/Warning');
-var SuccessIcon = require('@xanui/icons/CheckCircle');
-var ErrorIcon = require('@xanui/icons/Cancel');
-var Close = require('@xanui/icons/Close');
-var index = require('../IconButton/index.js');
-var index$2 = require('../useAlert/index.js');
+import { __rest } from 'tslib';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useInterface, useBreakpointProps, useColorTemplate, Tag, Renderar } from '@xanui/core';
+import { isValidElement, useRef, useEffect } from 'react';
+import Text from '../Text/index.js';
+import InfoIcon from '@xanui/icons/Info';
+import WarningIcon from '@xanui/icons/Warning';
+import SuccessIcon from '@xanui/icons/CheckCircle';
+import ErrorIcon from '@xanui/icons/Cancel';
+import Close from '@xanui/icons/Close';
+import IconButton from '../IconButton/index.js';
+import useAlert from '../useAlert/index.js';
 
 const Alert = (_a) => {
-    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
-    let [_b] = core.useInterface("Alert", rest, {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    let [_b] = useInterface("Alert", rest, {
         variant: "fill"
-    }), { title, variant, icon, color, direction, slotProps, onClose } = _b, _props = tslib.__rest(_b, ["title", "variant", "icon", "color", "direction", "slotProps", "onClose"]);
+    }), { title, variant, icon, color, direction, slotProps, onClose } = _b, _props = __rest(_b, ["title", "variant", "icon", "color", "direction", "slotProps", "onClose"]);
     color !== null && color !== void 0 ? color : (color = "default");
     direction !== null && direction !== void 0 ? direction : (direction = "row");
     const _p = {};
@@ -32,35 +30,35 @@ const Alert = (_a) => {
         _p.color = color;
     if (direction)
         _p.direction = direction;
-    const p = core.useBreakpointProps(_p);
+    const p = useBreakpointProps(_p);
     title = p.title;
     variant = p.variant;
     icon = p.icon;
     color = p.color;
     direction = p.direction;
     let isRow = direction === 'row';
-    const template = core.useColorTemplate(color, variant);
+    const template = useColorTemplate(color, variant);
     let iconsx = {
         fontSize: isRow ? 22 : 40,
         color: color === 'default' ? "text.primary" : template.primary.color
     };
     const icons = {
-        "info": jsxRuntime.jsx(InfoIcon, { sx: iconsx }),
-        "warning": jsxRuntime.jsx(WarningIcon, { sx: iconsx }),
-        "success": jsxRuntime.jsx(SuccessIcon, { sx: iconsx }),
-        "danger": jsxRuntime.jsx(ErrorIcon, { sx: iconsx })
+        "info": jsx(InfoIcon, { sx: iconsx }),
+        "warning": jsx(WarningIcon, { sx: iconsx }),
+        "success": jsx(SuccessIcon, { sx: iconsx }),
+        "danger": jsx(ErrorIcon, { sx: iconsx })
     };
     let _icon = icons[icon] || icons[color];
-    return (jsxRuntime.jsxs(core.Tag, Object.assign({}, _props, { baseClass: "alert", sxr: Object.assign({ justifyContent: "flex-start", position: "relative", radius: 1, px: isRow ? (_icon ? .5 : 2) : 3, py: isRow ? .5 : 3, flexDirection: "column", display: 'flex' }, _props === null || _props === void 0 ? void 0 : _props.sx) }, template.primary, { children: [onClose && jsxRuntime.jsx(index, { color: color, variant: variant === 'fill' ? "fill" : "text", size: 25, sx: {
+    return (jsxs(Tag, Object.assign({}, _props, { baseClass: "alert", sxr: Object.assign({ justifyContent: "flex-start", position: "relative", radius: 1, px: isRow ? (_icon ? .5 : 2) : 3, py: isRow ? .5 : 3, flexDirection: "column", display: 'flex' }, _props === null || _props === void 0 ? void 0 : _props.sx) }, template.primary, { children: [onClose && jsx(IconButton, { color: color, variant: variant === 'fill' ? "fill" : "text", size: 25, sx: {
                     position: "absolute",
                     top: 5,
                     right: 5
-                }, onClick: onClose, className: "alert-close-button", children: jsxRuntime.jsx(Close, { fontSize: 18 }) }), jsxRuntime.jsxs(core.Tag, { sx: {
+                }, onClick: onClose, className: "alert-close-button", children: jsx(Close, { fontSize: 18 }) }), jsxs(Tag, { sx: {
                     display: "flex",
                     gap: 1,
                     flexDirection: direction,
                     alignItems: isRow ? "flex-start" : "center"
-                }, baseClass: "alert-container", children: [_icon && jsxRuntime.jsx(core.Tag, { baseClass: "alert-icon", sxr: {
+                }, baseClass: "alert-container", children: [_icon && jsx(Tag, { baseClass: "alert-icon", sxr: {
                             display: "flex",
                             alignItems: "center",
                             justifyContent: "center",
@@ -68,7 +66,7 @@ const Alert = (_a) => {
                             "& svg": {
                                 color: template.primary.color
                             }
-                        }, children: _icon }), jsxRuntime.jsxs(core.Tag, { baseClass: "alert-content", sxr: {
+                        }, children: _icon }), jsxs(Tag, { baseClass: "alert-content", sxr: {
                             display: "flex",
                             flexDirection: "column",
                             flex: 1,
@@ -76,19 +74,19 @@ const Alert = (_a) => {
                             py: 1,
                             textAlign: isRow ? "left" : "center",
                             gap: isRow ? 0 : 1
-                        }, children: [title && jsxRuntime.jsx(jsxRuntime.Fragment, { children: React.isValidElement(title) ? jsxRuntime.jsx(core.Tag, { className: "alert-title", children: title }) : jsxRuntime.jsx(index$1, { className: "alert-title", variant: "text", sx: {
+                        }, children: [title && jsx(Fragment, { children: isValidElement(title) ? jsx(Tag, { className: "alert-title", children: title }) : jsx(Text, { className: "alert-title", variant: "text", sx: {
                                         font: "text",
                                         fontWeight: "bold!important",
                                         color: template.primary.color
-                                    }, children: title }) }), jsxRuntime.jsx(core.Tag, { sxr: {
+                                    }, children: title }) }), jsx(Tag, { sxr: {
                                     font: "button",
                                 }, children: children })] })] })] })));
 };
 const ActionAlert = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const ref = React.useRef(null);
-    const alert = index$2(Object.assign(Object.assign({}, props), { slotProps: Object.assign(Object.assign({}, props.slotProps), { modal: Object.assign(Object.assign({}, (_a = props.slotProps) === null || _a === void 0 ? void 0 : _a.modal), { slotProps: Object.assign(Object.assign({}, (_c = (_b = props.slotProps) === null || _b === void 0 ? void 0 : _b.modal) === null || _c === void 0 ? void 0 : _c.slotProps), { layer: Object.assign(Object.assign({}, (_f = (_e = (_d = props.slotProps) === null || _d === void 0 ? void 0 : _d.modal) === null || _e === void 0 ? void 0 : _e.slotProps) === null || _f === void 0 ? void 0 : _f.layer), { portal: Object.assign(Object.assign({}, (_k = (_j = (_h = (_g = props.slotProps) === null || _g === void 0 ? void 0 : _g.modal) === null || _h === void 0 ? void 0 : _h.slotProps) === null || _j === void 0 ? void 0 : _j.layer) === null || _k === void 0 ? void 0 : _k.portal), { container: ref.current || undefined }) }) }) }) }) }));
-    React.useEffect(() => {
+    const ref = useRef(null);
+    const alert = useAlert(Object.assign(Object.assign({}, props), { slotProps: Object.assign(Object.assign({}, props.slotProps), { modal: Object.assign(Object.assign({}, (_a = props.slotProps) === null || _a === void 0 ? void 0 : _a.modal), { slotProps: Object.assign(Object.assign({}, (_c = (_b = props.slotProps) === null || _b === void 0 ? void 0 : _b.modal) === null || _c === void 0 ? void 0 : _c.slotProps), { layer: Object.assign(Object.assign({}, (_f = (_e = (_d = props.slotProps) === null || _d === void 0 ? void 0 : _d.modal) === null || _e === void 0 ? void 0 : _e.slotProps) === null || _f === void 0 ? void 0 : _f.layer), { portal: Object.assign(Object.assign({}, (_k = (_j = (_h = (_g = props.slotProps) === null || _g === void 0 ? void 0 : _g.modal) === null || _h === void 0 ? void 0 : _h.slotProps) === null || _j === void 0 ? void 0 : _j.layer) === null || _k === void 0 ? void 0 : _k.portal), { container: ref.current || undefined }) }) }) }) }) }));
+    useEffect(() => {
         if (props.open) {
             alert.open();
         }
@@ -96,11 +94,11 @@ const ActionAlert = (props) => {
             alert.close();
         }
     }, [props.open]);
-    return jsxRuntime.jsx(core.Tag, { ref: ref });
+    return jsx(Tag, { ref: ref });
 };
 Alert.confirm = (props) => {
     var _a;
-    const a = core.Renderar.render(ActionAlert, Object.assign(Object.assign({ open: true }, props), { slotProps: Object.assign(Object.assign({}, props.slotProps), { modal: Object.assign(Object.assign({}, (_a = props.slotProps) === null || _a === void 0 ? void 0 : _a.modal), { onClosed: () => {
+    const a = Renderar.render(ActionAlert, Object.assign(Object.assign({ open: true }, props), { slotProps: Object.assign(Object.assign({}, props.slotProps), { modal: Object.assign(Object.assign({}, (_a = props.slotProps) === null || _a === void 0 ? void 0 : _a.modal), { onClosed: () => {
                     var _a, _b, _c, _d;
                     a.unrender();
                     if ((_b = (_a = props === null || props === void 0 ? void 0 : props.slotProps) === null || _a === void 0 ? void 0 : _a.modal) === null || _b === void 0 ? void 0 : _b.onClosed) {
@@ -117,5 +115,5 @@ Alert.confirm = (props) => {
     };
 };
 
-module.exports = Alert;
+export { Alert as default };
 //# sourceMappingURL=index.js.map

package/Alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor } from \"@xanui/core\"\r\nimport React, { isValidElement, ReactElement, useEffect, useRef } from \"react\"\r\nimport Text from \"../Text\"\r\nimport InfoIcon from '@xanui/icons/Info';\r\nimport WarningIcon from '@xanui/icons/Warning';\r\nimport SuccessIcon from '@xanui/icons/CheckCircle';\r\nimport ErrorIcon from '@xanui/icons/Cancel';\r\nimport IconClose from '@xanui/icons/Close';\r\nimport IconButton from \"../IconButton\";\r\nimport useAlert, { UseAlerProps } from \"../useAlert\";\r\n\r\n\r\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\r\n    title?: useBreakpointPropsType<string | ReactElement>;\r\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\r\n    onClose?: React.DOMAttributes<\"button\">['onClick'];\r\n}\r\n\r\nexport type AlertMesssageType = string | ReactElement | AlertProps\r\n\r\nconst Alert = ({ children, ...rest }: AlertProps) => {\r\n    let [{\r\n        title,\r\n        variant,\r\n        icon,\r\n        color,\r\n        direction,\r\n        slotProps,\r\n        onClose,\r\n        ..._props\r\n    }] = useInterface<any>(\"Alert\", rest, {\r\n        variant: \"fill\"\r\n    })\r\n    color ??= \"default\"\r\n    direction ??= \"row\"\r\n\r\n    const _p: any = {}\r\n    if (title) _p.title = title\r\n    if (variant) _p.variant = variant\r\n    if (icon) _p.icon = icon\r\n    if (color) _p.color = color\r\n    if (direction) _p.direction = direction\r\n\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    title = p.title\r\n    variant = p.variant\r\n    icon = p.icon\r\n    color = p.color\r\n    direction = p.direction\r\n\r\n    let isRow = direction === 'row'\r\n\r\n\r\n    const template = useColorTemplate(color, variant)\r\n\r\n    let iconsx = {\r\n        fontSize: isRow ? 22 : 40,\r\n        color: color === 'default' ? \"text.primary\" : template.primary.color\r\n    }\r\n\r\n    const icons: any = {\r\n        \"info\": <InfoIcon sx={iconsx} />,\r\n        \"warning\": <WarningIcon sx={iconsx} />,\r\n        \"success\": <SuccessIcon sx={iconsx} />,\r\n        \"danger\": <ErrorIcon sx={iconsx} />\r\n    }\r\n\r\n    let _icon = icons[icon] || icons[color]\r\n\r\n    return (\r\n        <Tag\r\n            {..._props}\r\n            baseClass=\"alert\"\r\n            sxr={{\r\n                justifyContent: \"flex-start\",\r\n                position: \"relative\",\r\n                radius: 1,\r\n                px: isRow ? (_icon ? .5 : 2) : 3,\r\n                py: isRow ? .5 : 3,\r\n                flexDirection: \"column\",\r\n                display: 'flex',\r\n                ..._props?.sx\r\n            }}\r\n            {...template.primary}\r\n        >\r\n            {\r\n                onClose && <IconButton\r\n                    color={color}\r\n                    variant={variant === 'fill' ? \"fill\" : \"text\"}\r\n                    size={25}\r\n                    sx={{\r\n                        position: \"absolute\",\r\n                        top: 5,\r\n                        right: 5\r\n                    }}\r\n                    onClick={onClose}\r\n                    className=\"alert-close-button\"\r\n                >\r\n                    <IconClose fontSize={18} />\r\n                </IconButton>\r\n            }\r\n            <Tag\r\n                sx={{\r\n                    display: \"flex\",\r\n                    gap: 1,\r\n                    flexDirection: direction,\r\n                    alignItems: isRow ? \"flex-start\" : \"center\"\r\n                }}\r\n                baseClass=\"alert-container\"\r\n            >\r\n                {\r\n                    _icon && <Tag\r\n                        baseClass=\"alert-icon\"\r\n                        sxr={{\r\n                            display: \"flex\",\r\n                            alignItems: \"center\",\r\n                            justifyContent: \"center\",\r\n                            p: isRow ? 1 : 0,\r\n                            \"& svg\": {\r\n                                color: template.primary.color\r\n                            }\r\n                        }}\r\n                    >\r\n                        {_icon}\r\n                    </Tag>\r\n                }\r\n                <Tag\r\n                    baseClass=\"alert-content\"\r\n                    sxr={{\r\n                        display: \"flex\",\r\n                        flexDirection: \"column\",\r\n                        flex: 1,\r\n                        color: template.primary.color,\r\n                        py: 1,\r\n                        textAlign: isRow ? \"left\" : \"center\",\r\n                        gap: isRow ? 0 : 1\r\n                    }}\r\n                >\r\n                    {title && <>\r\n                        {\r\n                            isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\r\n                                className=\"alert-title\"\r\n                                variant=\"text\"\r\n                                sx={{\r\n                                    font: \"text\",\r\n                                    fontWeight: \"bold!important\",\r\n                                    color: template.primary.color\r\n                                }}\r\n                            >{title}</Text>\r\n                        }\r\n                    </>}\r\n                    <Tag\r\n                        sxr={{\r\n                            font: \"button\",\r\n                        }}\r\n                    >\r\n                        {children}\r\n                    </Tag>\r\n                </Tag>\r\n            </Tag>\r\n        </Tag>\r\n    )\r\n}\r\n\r\nconst ActionAlert = (props: UseAlerProps) => {\r\n    const ref = useRef<HTMLDivElement>(null);\r\n    const alert = useAlert({\r\n        ...props,\r\n        slotProps: {\r\n            ...props.slotProps,\r\n            modal: {\r\n                ...props.slotProps?.modal,\r\n                slotProps: {\r\n                    ...props.slotProps?.modal?.slotProps,\r\n                    layer: {\r\n                        ...props.slotProps?.modal?.slotProps?.layer,\r\n                        portal: {\r\n                            ...props.slotProps?.modal?.slotProps?.layer?.portal,\r\n                            container: ref.current || undefined\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    })\r\n\r\n    useEffect(() => {\r\n        if (props.open) {\r\n            alert.open()\r\n        } else {\r\n            alert.close()\r\n        }\r\n    }, [props.open])\r\n    return <Tag ref={ref}></Tag>\r\n}\r\n\r\nAlert.confirm = (props: UseAlerProps) => {\r\n    const a = Renderar.render(ActionAlert as any, {\r\n        open: true,\r\n        ...props,\r\n        slotProps: {\r\n            ...props.slotProps,\r\n            modal: {\r\n                ...props.slotProps?.modal,\r\n                onClosed: () => {\r\n                    a.unrender()\r\n                    if (props?.slotProps?.modal?.onClosed) {\r\n                        props.slotProps?.modal?.onClosed()\r\n                    }\r\n                },\r\n            }\r\n        },\r\n    })\r\n\r\n    return {\r\n        open: () => {\r\n            a.updateProps({ open: true })\r\n        },\r\n        close: () => {\r\n            a.updateProps({ open: false })\r\n        },\r\n    }\r\n}\r\n\r\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;AACA;;;AAGH;AAQe;AACA;AACA;;AAOR;AACH;AAQzB;AAEA;;AACI;AACA;;AAqBI;;;;;;AAKJ;AACA;AACJ;AAEA;;AACI;;;AASgB;;;AAGJ;;;;;;;;;AAahB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Alert/index.tsx"],"sourcesContent":["'use client'\r\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor } from \"@xanui/core\"\r\nimport React, { isValidElement, ReactElement, useEffect, useRef } from \"react\"\r\nimport Text from \"../Text\"\r\nimport InfoIcon from '@xanui/icons/Info';\r\nimport WarningIcon from '@xanui/icons/Warning';\r\nimport SuccessIcon from '@xanui/icons/CheckCircle';\r\nimport ErrorIcon from '@xanui/icons/Cancel';\r\nimport IconClose from '@xanui/icons/Close';\r\nimport IconButton from \"../IconButton\";\r\nimport useAlert, { UseAlerProps } from \"../useAlert\";\r\n\r\n\r\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\r\n    title?: useBreakpointPropsType<string | ReactElement>;\r\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\r\n    onClose?: React.DOMAttributes<\"button\">['onClick'];\r\n}\r\n\r\nexport type AlertMesssageType = string | ReactElement | AlertProps\r\n\r\nconst Alert = ({ children, ...rest }: AlertProps) => {\r\n    let [{\r\n        title,\r\n        variant,\r\n        icon,\r\n        color,\r\n        direction,\r\n        slotProps,\r\n        onClose,\r\n        ..._props\r\n    }] = useInterface<any>(\"Alert\", rest, {\r\n        variant: \"fill\"\r\n    })\r\n    color ??= \"default\"\r\n    direction ??= \"row\"\r\n\r\n    const _p: any = {}\r\n    if (title) _p.title = title\r\n    if (variant) _p.variant = variant\r\n    if (icon) _p.icon = icon\r\n    if (color) _p.color = color\r\n    if (direction) _p.direction = direction\r\n\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    title = p.title\r\n    variant = p.variant\r\n    icon = p.icon\r\n    color = p.color\r\n    direction = p.direction\r\n\r\n    let isRow = direction === 'row'\r\n\r\n\r\n    const template = useColorTemplate(color, variant)\r\n\r\n    let iconsx = {\r\n        fontSize: isRow ? 22 : 40,\r\n        color: color === 'default' ? \"text.primary\" : template.primary.color\r\n    }\r\n\r\n    const icons: any = {\r\n        \"info\": <InfoIcon sx={iconsx} />,\r\n        \"warning\": <WarningIcon sx={iconsx} />,\r\n        \"success\": <SuccessIcon sx={iconsx} />,\r\n        \"danger\": <ErrorIcon sx={iconsx} />\r\n    }\r\n\r\n    let _icon = icons[icon] || icons[color]\r\n\r\n    return (\r\n        <Tag\r\n            {..._props}\r\n            baseClass=\"alert\"\r\n            sxr={{\r\n                justifyContent: \"flex-start\",\r\n                position: \"relative\",\r\n                radius: 1,\r\n                px: isRow ? (_icon ? .5 : 2) : 3,\r\n                py: isRow ? .5 : 3,\r\n                flexDirection: \"column\",\r\n                display: 'flex',\r\n                ..._props?.sx\r\n            }}\r\n            {...template.primary}\r\n        >\r\n            {\r\n                onClose && <IconButton\r\n                    color={color}\r\n                    variant={variant === 'fill' ? \"fill\" : \"text\"}\r\n                    size={25}\r\n                    sx={{\r\n                        position: \"absolute\",\r\n                        top: 5,\r\n                        right: 5\r\n                    }}\r\n                    onClick={onClose}\r\n                    className=\"alert-close-button\"\r\n                >\r\n                    <IconClose fontSize={18} />\r\n                </IconButton>\r\n            }\r\n            <Tag\r\n                sx={{\r\n                    display: \"flex\",\r\n                    gap: 1,\r\n                    flexDirection: direction,\r\n                    alignItems: isRow ? \"flex-start\" : \"center\"\r\n                }}\r\n                baseClass=\"alert-container\"\r\n            >\r\n                {\r\n                    _icon && <Tag\r\n                        baseClass=\"alert-icon\"\r\n                        sxr={{\r\n                            display: \"flex\",\r\n                            alignItems: \"center\",\r\n                            justifyContent: \"center\",\r\n                            p: isRow ? 1 : 0,\r\n                            \"& svg\": {\r\n                                color: template.primary.color\r\n                            }\r\n                        }}\r\n                    >\r\n                        {_icon}\r\n                    </Tag>\r\n                }\r\n                <Tag\r\n                    baseClass=\"alert-content\"\r\n                    sxr={{\r\n                        display: \"flex\",\r\n                        flexDirection: \"column\",\r\n                        flex: 1,\r\n                        color: template.primary.color,\r\n                        py: 1,\r\n                        textAlign: isRow ? \"left\" : \"center\",\r\n                        gap: isRow ? 0 : 1\r\n                    }}\r\n                >\r\n                    {title && <>\r\n                        {\r\n                            isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\r\n                                className=\"alert-title\"\r\n                                variant=\"text\"\r\n                                sx={{\r\n                                    font: \"text\",\r\n                                    fontWeight: \"bold!important\",\r\n                                    color: template.primary.color\r\n                                }}\r\n                            >{title}</Text>\r\n                        }\r\n                    </>}\r\n                    <Tag\r\n                        sxr={{\r\n                            font: \"button\",\r\n                        }}\r\n                    >\r\n                        {children}\r\n                    </Tag>\r\n                </Tag>\r\n            </Tag>\r\n        </Tag>\r\n    )\r\n}\r\n\r\nconst ActionAlert = (props: UseAlerProps) => {\r\n    const ref = useRef<HTMLDivElement>(null);\r\n    const alert = useAlert({\r\n        ...props,\r\n        slotProps: {\r\n            ...props.slotProps,\r\n            modal: {\r\n                ...props.slotProps?.modal,\r\n                slotProps: {\r\n                    ...props.slotProps?.modal?.slotProps,\r\n                    layer: {\r\n                        ...props.slotProps?.modal?.slotProps?.layer,\r\n                        portal: {\r\n                            ...props.slotProps?.modal?.slotProps?.layer?.portal,\r\n                            container: ref.current || undefined\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    })\r\n\r\n    useEffect(() => {\r\n        if (props.open) {\r\n            alert.open()\r\n        } else {\r\n            alert.close()\r\n        }\r\n    }, [props.open])\r\n    return <Tag ref={ref}></Tag>\r\n}\r\n\r\nAlert.confirm = (props: UseAlerProps) => {\r\n    const a = Renderar.render(ActionAlert as any, {\r\n        open: true,\r\n        ...props,\r\n        slotProps: {\r\n            ...props.slotProps,\r\n            modal: {\r\n                ...props.slotProps?.modal,\r\n                onClosed: () => {\r\n                    a.unrender()\r\n                    if (props?.slotProps?.modal?.onClosed) {\r\n                        props.slotProps?.modal?.onClosed()\r\n                    }\r\n                },\r\n            }\r\n        },\r\n    })\r\n\r\n    return {\r\n        open: () => {\r\n            a.updateProps({ open: true })\r\n        },\r\n        close: () => {\r\n            a.updateProps({ open: false })\r\n        },\r\n    }\r\n}\r\n\r\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;AACA;;;AAGH;AAQe;AACA;AACA;;AAOR;AACH;AAQzB;AAEA;;AACI;AACA;;AAqBI;;;;;;AAKJ;AACA;AACJ;AAEA;;AACI;;;AASgB;;;AAGJ;;;;;;;;;AAahB;;"}