@xanui/ui 1.0.0

package/Accordion/index.d.ts

@@ -0,0 +1,32 @@
+import React, { ReactElement } from 'react';
+import { TagComponentType, TagProps, useBreakpointPropsType, ColorTemplateColors, ColorTemplateType } from '@xanui/core';
+import { CollapsProps } from '../Collaps/index.js';
+import { ListProps } from '../List/index.js';
+import { ListItemProps } from '../ListItem/index.js';
+
+type AccordionProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, "color"> & {
+    expand?: boolean;
+    onClick?: () => void;
+    title: useBreakpointPropsType<ReactElement | string>;
+    subtitle?: useBreakpointPropsType<ReactElement | string>;
+    startIcon?: useBreakpointPropsType<ReactElement>;
+    endIcon?: useBreakpointPropsType<ReactElement>;
+    expandIcon?: useBreakpointPropsType<ReactElement>;
+    expandIconPlacement?: useBreakpointPropsType<"start" | "end">;
+    expandAction?: useBreakpointPropsType<"header" | "icon">;
+    color?: useBreakpointPropsType<ColorTemplateColors>;
+    variant?: useBreakpointPropsType<ColorTemplateType>;
+    hoverColor?: useBreakpointPropsType<ColorTemplateColors>;
+    hoverVariant?: useBreakpointPropsType<ColorTemplateType>;
+    slotProps?: {
+        header?: Omit<ListProps, "children" | "color" | "variant" | "hoverColor" | "hoverVariant" | "className">;
+        headerContent?: Omit<ListItemProps, "children" | "subtitle" | "selected" | "startIcon" | "endIcon" | "onClick" | "className">;
+        collaps?: Omit<CollapsProps, "children" | "in">;
+        content?: Omit<TagProps, "children">;
+        expandIconContainer?: Omit<TagProps<"div">, 'children' | 'className'>;
+    };
+};
+declare const Accordion: React.ForwardRefExoticComponent<Omit<AccordionProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+
+export { Accordion as default };
+export type { AccordionProps };

package/Accordion/index.js

@@ -0,0 +1,82 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core'),ExpandIcon=require('@xanui/icons/ExpandMore'),index$2=require('../Collaps/index.js'),index=require('../List/index.js'),index$1=require('../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, {
+        onClick: () => setExpand(!_expand),
+        color: "brand",
+        variant: "alpha"
+    }), { 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, Object.assign({ className: 'start-icon-container', sxr: {
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: 1
+                } }, { children: [expandIcon, startIcon] })),
+            endIcon
+        };
+    }
+    else {
+        itemsx = {
+            endIcon: jsxRuntime.jsxs(core.Tag, Object.assign({ 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: {
+            fontFamily: "default",
+            bgcolor: "background.primary"
+        }, baseClass: 'accordion', classNames: [{ "accordion-expanded": expand }, ...(classNames || [])], ref: ref }, { children: jsxRuntime.jsxs(index.default, 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.default, 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.default, 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 })) }))] })) })));
+});exports.default=Accordion;//# sourceMappingURL=index.js.map

package/Accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/Accordion/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, useInterface, ColorTemplateColors, ColorTemplateType, TagComponentType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport ExpandIcon from \"@xanui/icons/ExpandMore\";\nimport Collaps, { CollapsProps } from '../Collaps';\nimport List, { ListProps } from '../List';\nimport ListItem, { ListItemProps } from '../ListItem';\n\nexport type AccordionProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    expand?: boolean;\n    onClick?: () => void;\n    title: useBreakpointPropsType<ReactElement | string>;\n    subtitle?: useBreakpointPropsType<ReactElement | string>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    expandIcon?: useBreakpointPropsType<ReactElement>;\n    expandIconPlacement?: useBreakpointPropsType<\"start\" | \"end\">;\n    expandAction?: useBreakpointPropsType<\"header\" | \"icon\">;\n    color?: useBreakpointPropsType<ColorTemplateColors>;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\n    hoverColor?: useBreakpointPropsType<ColorTemplateColors>;\n    hoverVariant?: useBreakpointPropsType<ColorTemplateType>;\n\n    slotProps?: {\n        header?: Omit<ListProps, \"children\" | \"color\" | \"variant\" | \"hoverColor\" | \"hoverVariant\" | \"className\">;\n        headerContent?: Omit<ListItemProps, \"children\" | \"subtitle\" | \"selected\" | \"startIcon\" | \"endIcon\" | \"onClick\" | \"className\">\n        collaps?: Omit<CollapsProps, \"children\" | \"in\">;\n        content?: Omit<TagProps, \"children\">;\n        expandIconContainer?: Omit<TagProps<\"div\">, 'children' | 'className'>;\n    }\n}\n\nconst Accordion = React.forwardRef(<T extends TagComponentType = \"div\">({ children, title, subtitle, ...rest }: AccordionProps<T>, ref: React.Ref<any>) => {\n    const [_expand, setExpand] = useState(false)\n    let [{\n        expand,\n        onClick,\n        color,\n        variant,\n        hoverColor,\n        hoverVariant,\n        expandIcon,\n        expandIconPlacement,\n        startIcon,\n        endIcon,\n        expandAction,\n        classNames,\n        slotProps,\n        ...rootProps\n    }] = useInterface<any>(\"Accordion\", rest, {\n        onClick: () => setExpand(!_expand) as any,\n        color: \"brand\",\n        variant: \"alpha\"\n    })\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (subtitle) _p.subtitle = subtitle\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (expandIcon) _p.expandIcon = expandIcon\n    if (expandIconPlacement) _p.expandIconPlacement = expandIconPlacement\n    if (expandAction) _p.expandAction = expandAction\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (hoverColor) _p.hoverColor = hoverColor\n    if (hoverVariant) _p.hoverVariant = hoverVariant\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    expandIcon = p.expandIcon\n    expandIconPlacement = p.expandIconPlacement\n    expandAction = p.expandAction\n    color = p.color\n    variant = p.variant\n    hoverColor = p.hoverColor\n    hoverVariant = p.hoverVariant\n\n    expand = expand === undefined ? _expand : expand\n    expandIcon = expandIcon ? <Tag\n        cursor=\"pointer\"\n        {...slotProps?.expandIconContainer}\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n        className='expand-icon-container'\n    >\n        {expandIcon}\n    </Tag> : <Tag\n        transform={`rotate(${expand ? 0 : -180}deg)`}\n        transition=\"transform .4s\"\n        cursor=\"pointer\"\n        {...slotProps?.expandIconContainer}\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n        className='expand-icon-container'\n    >\n        <ExpandIcon />\n    </Tag>\n\n    let itemsx: any = {}\n\n    if (expandIconPlacement === 'start') {\n        itemsx = {\n            startIcon: <Tag\n                className='start-icon-container'\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    gap: 1\n                }}\n            >\n                {expandIcon}\n                {startIcon}\n            </Tag>,\n            endIcon\n        }\n\n    } else {\n        itemsx = {\n            endIcon: <Tag\n                className='end-icon-container'\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    gap: 1\n                }}\n            >\n                {endIcon}\n                {expandIcon}\n            </Tag>,\n            startIcon\n        }\n    }\n\n    if (expandAction === 'icon') {\n        itemsx.onClick = () => { }\n        itemsx.cursor = \"initial!important\"\n    }\n\n    return (\n        <Tag\n            {...rootProps}\n            sxr={{\n                fontFamily: \"default\",\n                bgcolor: \"background.primary\"\n            }}\n            baseClass='accordion'\n            classNames={[{ \"accordion-expanded\": expand }, ...(classNames || [])]}\n            ref={ref}\n        >\n            <List\n                component='div'\n                {...slotProps?.header}\n                color={color}\n                variant={variant}\n                hoverColor={hoverColor}\n                hoverVariant={hoverVariant}\n                className='accoutdion-header'\n            >\n                <ListItem\n                    minHeight={55}\n                    radius={0}\n                    component='div'\n                    {...slotProps?.headerContent}\n                    {...itemsx}\n                    subtitle={subtitle}\n                    selected={expand}\n                    onClick={() => onClick && onClick()}\n                    className=\"accordion-header-content\"\n                >{title}</ListItem>\n                <Collaps\n                    {...slotProps?.collaps}\n                    open={expand}\n                    className=\"accordion-collaps\"\n                >\n                    <Tag\n                        {...slotProps?.content}\n                        sxr={{\n                            color: \"text.primary\",\n                            p: 2,\n                            py: 1,\n                            bgcolor: \"background.primary\"\n                        }}\n                        baseClass='accordion-content'\n                    >\n                        {children}\n                    </Tag>\n                </Collaps>\n            </List>\n        </Tag>\n    )\n})\nexport default Accordion\n\n\n"],"names":["__rest","useState","useInterface","useBreakpointProps","_jsx","Tag","_jsxs","List","ListItem","Collaps"],"mappings":"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"}

package/Accordion/index.mjs

@@ -0,0 +1,82 @@
+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.mjs';import List from'../List/index.mjs';import ListItem from'../ListItem/index.mjs';const Accordion = React.forwardRef((_a, ref) => {
+    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: "alpha"
+    }), { 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;
+    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 = 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 ? 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: jsxs(Tag, Object.assign({ className: 'start-icon-container', sxr: {
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: 1
+                } }, { children: [expandIcon, startIcon] })),
+            endIcon
+        };
+    }
+    else {
+        itemsx = {
+            endIcon: jsxs(Tag, Object.assign({ 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 (jsx(Tag, Object.assign({}, rootProps, { sxr: {
+            fontFamily: "default",
+            bgcolor: "background.primary"
+        }, 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,
+                            bgcolor: "background.primary"
+                        }, baseClass: 'accordion-content' }, { children: children })) }))] })) })));
+});export{Accordion as default};//# sourceMappingURL=index.mjs.map

package/Accordion/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/Accordion/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, useInterface, ColorTemplateColors, ColorTemplateType, TagComponentType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport ExpandIcon from \"@xanui/icons/ExpandMore\";\nimport Collaps, { CollapsProps } from '../Collaps';\nimport List, { ListProps } from '../List';\nimport ListItem, { ListItemProps } from '../ListItem';\n\nexport type AccordionProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    expand?: boolean;\n    onClick?: () => void;\n    title: useBreakpointPropsType<ReactElement | string>;\n    subtitle?: useBreakpointPropsType<ReactElement | string>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    expandIcon?: useBreakpointPropsType<ReactElement>;\n    expandIconPlacement?: useBreakpointPropsType<\"start\" | \"end\">;\n    expandAction?: useBreakpointPropsType<\"header\" | \"icon\">;\n    color?: useBreakpointPropsType<ColorTemplateColors>;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\n    hoverColor?: useBreakpointPropsType<ColorTemplateColors>;\n    hoverVariant?: useBreakpointPropsType<ColorTemplateType>;\n\n    slotProps?: {\n        header?: Omit<ListProps, \"children\" | \"color\" | \"variant\" | \"hoverColor\" | \"hoverVariant\" | \"className\">;\n        headerContent?: Omit<ListItemProps, \"children\" | \"subtitle\" | \"selected\" | \"startIcon\" | \"endIcon\" | \"onClick\" | \"className\">\n        collaps?: Omit<CollapsProps, \"children\" | \"in\">;\n        content?: Omit<TagProps, \"children\">;\n        expandIconContainer?: Omit<TagProps<\"div\">, 'children' | 'className'>;\n    }\n}\n\nconst Accordion = React.forwardRef(<T extends TagComponentType = \"div\">({ children, title, subtitle, ...rest }: AccordionProps<T>, ref: React.Ref<any>) => {\n    const [_expand, setExpand] = useState(false)\n    let [{\n        expand,\n        onClick,\n        color,\n        variant,\n        hoverColor,\n        hoverVariant,\n        expandIcon,\n        expandIconPlacement,\n        startIcon,\n        endIcon,\n        expandAction,\n        classNames,\n        slotProps,\n        ...rootProps\n    }] = useInterface<any>(\"Accordion\", rest, {\n        onClick: () => setExpand(!_expand) as any,\n        color: \"brand\",\n        variant: \"alpha\"\n    })\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (subtitle) _p.subtitle = subtitle\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (expandIcon) _p.expandIcon = expandIcon\n    if (expandIconPlacement) _p.expandIconPlacement = expandIconPlacement\n    if (expandAction) _p.expandAction = expandAction\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (hoverColor) _p.hoverColor = hoverColor\n    if (hoverVariant) _p.hoverVariant = hoverVariant\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    expandIcon = p.expandIcon\n    expandIconPlacement = p.expandIconPlacement\n    expandAction = p.expandAction\n    color = p.color\n    variant = p.variant\n    hoverColor = p.hoverColor\n    hoverVariant = p.hoverVariant\n\n    expand = expand === undefined ? _expand : expand\n    expandIcon = expandIcon ? <Tag\n        cursor=\"pointer\"\n        {...slotProps?.expandIconContainer}\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n        className='expand-icon-container'\n    >\n        {expandIcon}\n    </Tag> : <Tag\n        transform={`rotate(${expand ? 0 : -180}deg)`}\n        transition=\"transform .4s\"\n        cursor=\"pointer\"\n        {...slotProps?.expandIconContainer}\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n        className='expand-icon-container'\n    >\n        <ExpandIcon />\n    </Tag>\n\n    let itemsx: any = {}\n\n    if (expandIconPlacement === 'start') {\n        itemsx = {\n            startIcon: <Tag\n                className='start-icon-container'\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    gap: 1\n                }}\n            >\n                {expandIcon}\n                {startIcon}\n            </Tag>,\n            endIcon\n        }\n\n    } else {\n        itemsx = {\n            endIcon: <Tag\n                className='end-icon-container'\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    gap: 1\n                }}\n            >\n                {endIcon}\n                {expandIcon}\n            </Tag>,\n            startIcon\n        }\n    }\n\n    if (expandAction === 'icon') {\n        itemsx.onClick = () => { }\n        itemsx.cursor = \"initial!important\"\n    }\n\n    return (\n        <Tag\n            {...rootProps}\n            sxr={{\n                fontFamily: \"default\",\n                bgcolor: \"background.primary\"\n            }}\n            baseClass='accordion'\n            classNames={[{ \"accordion-expanded\": expand }, ...(classNames || [])]}\n            ref={ref}\n        >\n            <List\n                component='div'\n                {...slotProps?.header}\n                color={color}\n                variant={variant}\n                hoverColor={hoverColor}\n                hoverVariant={hoverVariant}\n                className='accoutdion-header'\n            >\n                <ListItem\n                    minHeight={55}\n                    radius={0}\n                    component='div'\n                    {...slotProps?.headerContent}\n                    {...itemsx}\n                    subtitle={subtitle}\n                    selected={expand}\n                    onClick={() => onClick && onClick()}\n                    className=\"accordion-header-content\"\n                >{title}</ListItem>\n                <Collaps\n                    {...slotProps?.collaps}\n                    open={expand}\n                    className=\"accordion-collaps\"\n                >\n                    <Tag\n                        {...slotProps?.content}\n                        sxr={{\n                            color: \"text.primary\",\n                            p: 2,\n                            py: 1,\n                            bgcolor: \"background.primary\"\n                        }}\n                        baseClass='accordion-content'\n                    >\n                        {children}\n                    </Tag>\n                </Collaps>\n            </List>\n        </Tag>\n    )\n})\nexport default Accordion\n\n\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/Alert/index.d.ts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TagProps, useBreakpointPropsType, ColorTemplateType, ColorTemplateColors, TransitionVariantTypes } from '@xanui/core';
+import React, { ReactElement, ReactNode } from 'react';
+import { ModalProps } from '../Modal/index.js';
+import { ButtonProps } from '../Button/index.js';
+
+type AlertProps = Omit<TagProps<"div">, "content" | "title" | "direction"> & {
+    title?: useBreakpointPropsType<string | ReactElement>;
+    direction?: useBreakpointPropsType<"row" | "column">;
+    variant?: useBreakpointPropsType<ColorTemplateType>;
+    color?: useBreakpointPropsType<ColorTemplateColors>;
+    icon?: useBreakpointPropsType<"info" | "warning" | "success" | "error" | false | ReactElement>;
+    onClose?: React.DOMAttributes<"button">['onClick'];
+};
+declare const Alert: {
+    ({ children, ...rest }: AlertProps): react_jsx_runtime.JSX.Element;
+    confirm(props: AlertConfirmProps): void;
+};
+type AlertConfirmProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | "size"> & {
+    content?: ReactNode;
+    size?: "small" | "medium" | "large" | number;
+    closeButton?: boolean;
+    clickOutsideToClose?: boolean;
+    okButtonText?: string;
+    closeButtonText?: string;
+    hideOkButton?: boolean;
+    hideCloseButton?: boolean;
+    buttonPlacement?: "start" | "end" | "between" | "full";
+    variant?: "text" | "fill";
+    onConfirm?: (ok: boolean) => void;
+    transition?: TransitionVariantTypes;
+    blurMode?: ModalProps['blurMode'];
+    slotProps?: {
+        modal?: Omit<ModalProps, "childred" | "transition" | "blurMode">;
+        okButton?: Omit<ButtonProps, "children">;
+        closeButton?: Omit<ButtonProps, "children">;
+    };
+};
+
+export { Alert as default };
+export type { AlertConfirmProps, AlertProps };

package/Alert/index.js

@@ -0,0 +1,137 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),core=require('@xanui/core'),React=require('react'),index$1=require('../Text/index.js'),InfoIcon=require('@xanui/icons/Info'),WarningIcon=require('@xanui/icons/Warning'),SuccessIcon=require('@xanui/icons/CheckCircle'),ErrorIcon=require('@xanui/icons/Cancel'),IconClose=require('@xanui/icons/Close'),index=require('../IconButton/index.js'),index$2=require('../Modal/index.js'),index$3=require('../Button/index.js');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);
+    delete template.hover;
+    let iconsx = {
+        fontSize: isRow ? 22 : 40,
+        color: color === 'default' ? "text.primary" : template.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', fontFamily: "default" }, _props === null || _props === void 0 ? void 0 : _props.sx) }, template, { children: [onClose && jsxRuntime.jsx(index.default, Object.assign({ 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(IconClose, { fontSize: 18 }) })), jsxRuntime.jsxs(core.Tag, Object.assign({ sx: {
+                    display: "flex",
+                    gap: 1,
+                    flexDirection: direction,
+                    alignItems: isRow ? "flex-start" : "center"
+                }, baseClass: "alert-container" }, { children: [_icon && jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: "alert-icon", sxr: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            p: isRow ? 1 : 0,
+                            "& svg": {
+                                color: template.color
+                            }
+                        } }, { children: _icon })), jsxRuntime.jsxs(core.Tag, Object.assign({ baseClass: "alert-content", sxr: {
+                            display: "flex",
+                            flexDirection: "column",
+                            flex: 1,
+                            color: template.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, Object.assign({ className: "alert-title" }, { children: title })) : jsxRuntime.jsx(index$1.default, Object.assign({ className: "alert-title", variant: "text", sx: {
+                                        font: "text",
+                                        fontWeight: "bold!important",
+                                        color: template.color
+                                    } }, { children: title })) }), jsxRuntime.jsx(core.Tag, Object.assign({ sxr: {
+                                    font: "button",
+                                } }, { children: children }))] }))] }))] })));
+};
+Alert.confirm = (props) => {
+    const id = "_" + Math.random().toString(16);
+    let { content, size, color, direction, variant, closeButton, clickOutsideToClose, okButtonText, closeButtonText, hideOkButton, hideCloseButton, buttonPlacement, onConfirm, transition, blurMode, slotProps } = props, rest = tslib.__rest(props, ["content", "size", "color", "direction", "variant", "closeButton", "clickOutsideToClose", "okButtonText", "closeButtonText", "hideOkButton", "hideCloseButton", "buttonPlacement", "onConfirm", "transition", "blurMode", "slotProps"]);
+    hideOkButton !== null && hideOkButton !== void 0 ? hideOkButton : (hideOkButton = false);
+    hideCloseButton !== null && hideCloseButton !== void 0 ? hideCloseButton : (hideCloseButton = false);
+    size !== null && size !== void 0 ? size : (size = "small");
+    color !== null && color !== void 0 ? color : (color = 'default');
+    variant !== null && variant !== void 0 ? variant : (variant = "text");
+    direction !== null && direction !== void 0 ? direction : (direction = "row");
+    buttonPlacement !== null && buttonPlacement !== void 0 ? buttonPlacement : (buttonPlacement = "end");
+    let sx = {};
+    switch (buttonPlacement) {
+        case "start":
+            sx.justifyContent = 'flex-start';
+            break;
+        case "end":
+            sx.justifyContent = 'flex-end';
+            break;
+        case "between":
+            sx.justifyContent = 'space-between';
+            break;
+        case "full":
+            sx = {
+                "& button": {
+                    flex: 1
+                }
+            };
+            break;
+    }
+    let sizes = {
+        small: 320,
+        medium: 400,
+        large: 600
+    };
+    const close = () => index$2.default.close(id);
+    let okcolor = color;
+    let closecolor = color;
+    if (color === 'default') {
+        okcolor = 'brand';
+        closecolor = 'default';
+        variant = 'text';
+    }
+    else {
+        if (variant === 'fill') {
+            okcolor = 'default';
+            closecolor = 'default';
+        }
+        else {
+            okcolor = color;
+            closecolor = 'default';
+        }
+    }
+    return index$2.default.open(id, jsxRuntime.jsxs(Alert, Object.assign({ direction: direction, sx: {
+            px: 2,
+            py: 1,
+            pt: direction === 'row' ? 1 : 2
+        }, color: color, variant: variant, onClose: closeButton ? close : undefined }, rest, { children: [content, jsxRuntime.jsxs(core.Tag, Object.assign({ sxr: Object.assign({ display: "flex", gap: 1, pt: 4, flexDirection: "row" }, sx) }, { children: [!hideCloseButton && jsxRuntime.jsx(index$3.default, Object.assign({ color: closecolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.closeButton, { onClick: () => {
+                            close();
+                            onConfirm && onConfirm(false);
+                        } }, { children: closeButtonText || "Close" })), !hideOkButton && jsxRuntime.jsx(index$3.default, Object.assign({ color: okcolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.okButton, { onClick: () => {
+                            index$2.default.close(id);
+                            onConfirm && onConfirm(true);
+                        } }, { children: okButtonText || "OK" }))] }))] })), Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.modal), { size: sizes[size] || size, blur: 40, blurMode: blurMode || "transparent", transition: transition || "zoom", onClickOutside: () => {
+            clickOutsideToClose && close();
+        } }));
+};exports.default=Alert;//# sourceMappingURL=index.js.map

package/Alert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","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":["__rest","useInterface","useBreakpointProps","useColorTemplate","_jsx","_jsxs","Tag","IconButton","_Fragment","isValidElement","Text","Modal","Button"],"mappings":"siBAyBA,MAAM,KAAK,GAAG,CAAC,EAAiC,KAAI;AAArC,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAuB,EAAlB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AAC9B,IAAA,IAAI,OASCC,iBAAY,CAAM,OAAO,EAAE,IAAI,EAAE;AAClC,QAAA,OAAO,EAAE;KACZ,CAAC,EAXG,EACD,KAAK,EACL,OAAO,EACP,IAAI,EACJ,KAAK,EACL,SAAS,EACT,SAAS,EACT,OAAO,EAAA,GAAA,EAEV,EADM,MAAM,GAAAD,YAAA,CAAA,EAAA,EARR,CAAA,OAAA,EAAA,SAAA,EAAA,MAAA,EAAA,OAAA,EAAA,WAAA,EAAA,WAAA,EAAA,SAAA,CASJ,CAEC;IACF,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAL,KAAK,IAAL,KAAK,GAAK,SAAS,CAAA;IACnB,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAT,SAAS,IAAT,SAAS,GAAK,KAAK,CAAA;IAEnB,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AAEvC,IAAA,MAAM,CAAC,GAAQE,uBAAkB,CAAC,EAAE,CAAC;AAErC,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AACf,IAAA,OAAO,GAAG,CAAC,CAAC,OAAO;AACnB,IAAA,IAAI,GAAG,CAAC,CAAC,IAAI;AACb,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AACf,IAAA,SAAS,GAAG,CAAC,CAAC,SAAS;AAEvB,IAAA,IAAI,KAAK,GAAG,SAAS,KAAK,KAAK;IAG/B,MAAM,QAAQ,GAAGC,qBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC;IACjD,OAAO,QAAQ,CAAC,KAAK;AAErB,IAAA,IAAI,MAAM,GAAG;QACT,QAAQ,EAAE,KAAK,GAAG,EAAE,GAAG,EAAE;AACzB,QAAA,KAAK,EAAE,KAAK,KAAK,SAAS,GAAG,cAAc,GAAG,QAAQ,CAAC;KAC1D;AAED,IAAA,MAAM,KAAK,GAAQ;AACf,QAAA,MAAM,EAAEC,cAAA,CAAC,QAAQ,IAAC,EAAE,EAAE,MAAM,EAAA,CAAI;AAChC,QAAA,SAAS,EAAEA,cAAA,CAAC,WAAW,IAAC,EAAE,EAAE,MAAM,EAAA,CAAI;AACtC,QAAA,SAAS,EAAEA,cAAA,CAAC,WAAW,IAAC,EAAE,EAAE,MAAM,EAAA,CAAI;AACtC,QAAA,QAAQ,EAAEA,cAAA,CAAC,SAAS,IAAC,EAAE,EAAE,MAAM,EAAA;KAClC;IAED,IAAI,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC;IAEvC,QACIC,eAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,MAAM,IACV,SAAS,EAAC,OAAO,EACjB,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACC,cAAc,EAAE,YAAY,EAC5B,QAAQ,EAAE,UAAU,EACpB,MAAM,EAAE,CAAC,EACT,EAAE,EAAE,KAAK,IAAI,KAAK,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,EAChC,EAAE,EAAE,KAAK,GAAG,EAAE,GAAG,CAAC,EAClB,aAAa,EAAE,QAAQ,EACvB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,SAAS,EAAA,EAClB,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,MAAA,GAAA,MAAA,GAAN,MAAM,CAAE,EAAE,CAAA,EAAA,EAEb,QAAQ,EAAA,EAAA,QAAA,EAAA,CAGR,OAAO,IAAIF,eAACG,aAAU,EAAA,MAAA,CAAA,MAAA,CAAA,EAClB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,KAAK,MAAM,GAAG,MAAM,GAAG,MAAM,EAC7C,IAAI,EAAE,EAAE,EACR,EAAE,EAAE;AACA,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,GAAG,EAAE,CAAC;AACN,oBAAA,KAAK,EAAE;iBACV,EACD,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,oBAAoB,gBAE9BH,cAAA,CAAC,SAAS,IAAC,QAAQ,EAAE,EAAE,EAAA,CAAI,EAAA,CAAA,CAClB,EAEjBC,eAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,EAAE,EAAE;AACA,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,GAAG,EAAE,CAAC;AACN,oBAAA,aAAa,EAAE,SAAS;oBACxB,UAAU,EAAE,KAAK,GAAG,YAAY,GAAG;AACtC,iBAAA,EACD,SAAS,EAAC,iBAAiB,EAAA,EAAA,EAAA,QAAA,EAAA,CAGvB,KAAK,IAAIF,cAAA,CAACE,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACT,SAAS,EAAC,YAAY,EACtB,GAAG,EAAE;AACD,4BAAA,OAAO,EAAE,MAAM;AACf,4BAAA,UAAU,EAAE,QAAQ;AACpB,4BAAA,cAAc,EAAE,QAAQ;4BACxB,CAAC,EAAE,KAAK,GAAG,CAAC,GAAG,CAAC;AAChB,4BAAA,OAAO,EAAE;gCACL,KAAK,EAAE,QAAQ,CAAC;AACnB;yBACJ,EAAA,EAAA,EAAA,QAAA,EAEA,KAAK,EAAA,CAAA,CACJ,EAEVD,eAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,eAAe,EACzB,GAAG,EAAE;AACD,4BAAA,OAAO,EAAE,MAAM;AACf,4BAAA,aAAa,EAAE,QAAQ;AACvB,4BAAA,IAAI,EAAE,CAAC;4BACP,KAAK,EAAE,QAAQ,CAAC,KAAK;AACrB,4BAAA,EAAE,EAAE,CAAC;4BACL,SAAS,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ;4BACpC,GAAG,EAAE,KAAK,GAAG,CAAC,GAAG;AACpB,yBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAEA,KAAK,IAAIF,cAAA,CAAAI,mBAAA,EAAA,EAAA,QAAA,EAEFC,oBAAc,CAAC,KAAK,CAAC,GAAGL,cAAA,CAACE,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,SAAS,EAAC,aAAa,EAAA,EAAA,EAAA,QAAA,EAAE,KAAK,EAAA,CAAA,CAAO,GAAGF,cAAA,CAACM,eAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EACtE,SAAS,EAAC,aAAa,EACvB,OAAO,EAAC,MAAM,EACd,EAAE,EAAE;AACA,wCAAA,IAAI,EAAE,MAAM;AACZ,wCAAA,UAAU,EAAE,gBAAgB;wCAC5B,KAAK,EAAE,QAAQ,CAAC;qCACnB,EAAA,EAAA,EAAA,QAAA,EACH,KAAK,IAAQ,EAAA,CAEpB,EACHN,eAACE,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,GAAG,EAAE;AACD,oCAAA,IAAI,EAAE,QAAQ;AACjB,iCAAA,EAAA,EAAA,EAAA,QAAA,EAEA,QAAQ,EAAA,CAAA,CACP,CAAA,EAAA,CAAA,CACJ,CAAA,EAAA,CAAA,CACJ,CAAA,EAAA,CAAA,CACJ;AAEd;AAuBA,KAAK,CAAC,OAAO,GAAG,CAAC,KAAwB,KAAI;AACzC,IAAA,MAAM,EAAE,GAAG,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC;AAC3C,IAAA,IAAI,EACA,OAAO,EACP,IAAI,EACJ,KAAK,EACL,SAAS,EACT,OAAO,EACP,WAAW,EACX,mBAAmB,EACnB,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,eAAe,EACf,eAAe,EACf,SAAS,EACT,UAAU,EACV,QAAQ,EACR,SAAS,EAAA,GAET,KAAK,EADF,IAAI,GAAAN,YAAA,CACP,KAAK,EAlBL,CAAA,SAAA,EAAA,MAAA,EAAA,OAAA,EAAA,WAAA,EAAA,SAAA,EAAA,aAAA,EAAA,qBAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,YAAA,EAAA,UAAA,EAAA,WAAA,CAkBH,CAAQ;IAET,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAZ,YAAY,IAAZ,YAAY,GAAK,KAAK,CAAA;IACtB,eAAe,KAAA,IAAA,IAAf,eAAe,KAAA,MAAA,GAAf,eAAe,IAAf,eAAe,GAAK,KAAK,CAAA;IAEzB,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAJ,IAAI,IAAJ,IAAI,GAAK,OAAO,CAAA;IAChB,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAL,KAAK,IAAL,KAAK,GAAK,SAAS,CAAA;IACnB,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAP,OAAO,IAAP,OAAO,GAAK,MAAM,CAAA;IAClB,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAT,SAAS,IAAT,SAAS,GAAK,KAAK,CAAA;IACnB,eAAe,KAAA,IAAA,IAAf,eAAe,KAAA,MAAA,GAAf,eAAe,IAAf,eAAe,GAAK,KAAK,CAAA;IACzB,IAAI,EAAE,GAAQ,EAAE;AAEhB,IAAA,QAAQ,eAAe;AACnB,QAAA,KAAK,OAAO;AACR,YAAA,EAAE,CAAC,cAAc,GAAG,YAAY;YAChC;AACJ,QAAA,KAAK,KAAK;AACN,YAAA,EAAE,CAAC,cAAc,GAAG,UAAU;YAC9B;AACJ,QAAA,KAAK,SAAS;AACV,YAAA,EAAE,CAAC,cAAc,GAAG,eAAe;YACnC;AACJ,QAAA,KAAK,MAAM;AACP,YAAA,EAAE,GAAG;AACD,gBAAA,UAAU,EAAE;AACR,oBAAA,IAAI,EAAE;AACT;aACJ;YACD;AACP;AAED,IAAA,IAAI,KAAK,GAAQ;AACb,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,MAAM,EAAE,GAAG;AACX,QAAA,KAAK,EAAE;KACV;IAED,MAAM,KAAK,GAAG,MAAMW,eAAK,CAAC,KAAK,CAAC,EAAE,CAAC;IACnC,IAAI,OAAO,GAAG,KAAK;IACnB,IAAI,UAAU,GAAG,KAAK;IACtB,IAAI,KAAK,KAAK,SAAS,EAAE;QACrB,OAAO,GAAG,OAAO;QACjB,UAAU,GAAG,SAAS;QACtB,OAAO,GAAG,MAAM;AACnB,IAAA;AAAM,SAAA;QACH,IAAI,OAAO,KAAK,MAAM,EAAE;YACpB,OAAO,GAAG,SAAS;YACnB,UAAU,GAAG,SAAS;AACzB,QAAA;AAAM,aAAA;YACH,OAAO,GAAG,KAAK;YACf,UAAU,GAAG,SAAS;AACzB,QAAA;AACJ,IAAA;AAED,IAAA,OAAOA,eAAK,CAAC,IAAI,CAAC,EAAE,EAAEN,eAAA,CAAC,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACxB,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE;AACA,YAAA,EAAE,EAAE,CAAC;AACL,YAAA,EAAE,EAAE,CAAC;YACL,EAAE,EAAE,SAAS,KAAK,KAAK,GAAG,CAAC,GAAG;AACjC,SAAA,EACD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,WAAW,GAAG,KAAK,GAAG,SAAS,EAAA,EACpC,IAAI,EAAA,EAAA,QAAA,EAAA,CAEP,OAAO,EACRA,eAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,GAAG,kBACC,OAAO,EAAE,MAAM,EACf,GAAG,EAAE,CAAC,EACN,EAAE,EAAE,CAAC,EACL,aAAa,EAAE,KAAK,EAAA,EACjB,EAAE,CAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAGR,CAAC,eAAe,IAAIF,cAAA,CAACQ,eAAM,kBACxB,KAAK,EAAE,UAAU,EACjB,OAAO,EAAC,MAAM,EAAA,EACV,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,WAAW,EAAA,EAC1B,OAAO,EAAE,MAAK;AACV,4BAAA,KAAK,EAAE;AACP,4BAAA,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC;AACjC,wBAAA,CAAC,EAAA,EAAA,EAAA,QAAA,EACH,eAAe,IAAI,OAAO,EAAA,CAAA,CAAU,EACrC,CAAC,YAAY,IAAIR,cAAA,CAACQ,eAAM,EAAA,MAAA,CAAA,MAAA,CAAA,EACrB,KAAK,EAAE,OAAO,EACd,OAAO,EAAC,MAAM,EAAA,EACV,SAAS,aAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,QAAQ,EAAA,EAEvB,OAAO,EAAE,MAAK;AACV,4BAAAD,eAAK,CAAC,KAAK,CAAC,EAAE,CAAC;AACf,4BAAA,SAAS,IAAI,SAAS,CAAC,IAAI,CAAC;wBAChC,CAAC,EAAA,EAAA,EAAA,QAAA,EACH,YAAY,IAAI,IAAI,IAAU,CAAA,EAAA,CAAA,CAC9B,CAAA,EAAA,CAAA,CACF,kCACD,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,KAAK,CAAA,EAAA,EACnB,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,IAAI,EACzB,IAAI,EAAE,EAAE,EACR,QAAQ,EAAE,QAAQ,IAAI,aAAa,EACnC,UAAU,EAAE,UAAU,IAAI,MAAM,EAChC,cAAc,EAAE,MAAK;YACjB,mBAAmB,IAAI,KAAK,EAAE;AAClC,QAAA,CAAC,IACH;AACN,CAAC"}

package/Alert/index.mjs

@@ -0,0 +1,137 @@
+import {__rest}from'tslib';import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useInterface,useBreakpointProps,useColorTemplate,Tag}from'@xanui/core';import {isValidElement}from'react';import Text from'../Text/index.mjs';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 IconClose from'@xanui/icons/Close';import IconButton from'../IconButton/index.mjs';import Modal from'../Modal/index.mjs';import Button from'../Button/index.mjs';const Alert = (_a) => {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    let [_b] = useInterface("Alert", rest, {
+        variant: "fill"
+    }), { 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 = {};
+    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 = useBreakpointProps(_p);
+    title = p.title;
+    variant = p.variant;
+    icon = p.icon;
+    color = p.color;
+    direction = p.direction;
+    let isRow = direction === 'row';
+    const template = useColorTemplate(color, variant);
+    delete template.hover;
+    let iconsx = {
+        fontSize: isRow ? 22 : 40,
+        color: color === 'default' ? "text.primary" : template.color
+    };
+    const icons = {
+        "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 (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', fontFamily: "default" }, _props === null || _props === void 0 ? void 0 : _props.sx) }, template, { children: [onClose && jsx(IconButton, Object.assign({ color: color, variant: variant === 'fill' ? "fill" : "text", size: 25, sx: {
+                    position: "absolute",
+                    top: 5,
+                    right: 5
+                }, onClick: onClose, className: "alert-close-button" }, { children: jsx(IconClose, { fontSize: 18 }) })), jsxs(Tag, Object.assign({ sx: {
+                    display: "flex",
+                    gap: 1,
+                    flexDirection: direction,
+                    alignItems: isRow ? "flex-start" : "center"
+                }, baseClass: "alert-container" }, { children: [_icon && jsx(Tag, Object.assign({ baseClass: "alert-icon", sxr: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            p: isRow ? 1 : 0,
+                            "& svg": {
+                                color: template.color
+                            }
+                        } }, { children: _icon })), jsxs(Tag, Object.assign({ baseClass: "alert-content", sxr: {
+                            display: "flex",
+                            flexDirection: "column",
+                            flex: 1,
+                            color: template.color,
+                            py: 1,
+                            textAlign: isRow ? "left" : "center",
+                            gap: isRow ? 0 : 1
+                        } }, { children: [title && jsx(Fragment, { children: isValidElement(title) ? jsx(Tag, Object.assign({ className: "alert-title" }, { children: title })) : jsx(Text, Object.assign({ className: "alert-title", variant: "text", sx: {
+                                        font: "text",
+                                        fontWeight: "bold!important",
+                                        color: template.color
+                                    } }, { children: title })) }), jsx(Tag, Object.assign({ sxr: {
+                                    font: "button",
+                                } }, { children: children }))] }))] }))] })));
+};
+Alert.confirm = (props) => {
+    const id = "_" + Math.random().toString(16);
+    let { content, size, color, direction, variant, closeButton, clickOutsideToClose, okButtonText, closeButtonText, hideOkButton, hideCloseButton, buttonPlacement, onConfirm, transition, blurMode, slotProps } = props, rest = __rest(props, ["content", "size", "color", "direction", "variant", "closeButton", "clickOutsideToClose", "okButtonText", "closeButtonText", "hideOkButton", "hideCloseButton", "buttonPlacement", "onConfirm", "transition", "blurMode", "slotProps"]);
+    hideOkButton !== null && hideOkButton !== void 0 ? hideOkButton : (hideOkButton = false);
+    hideCloseButton !== null && hideCloseButton !== void 0 ? hideCloseButton : (hideCloseButton = false);
+    size !== null && size !== void 0 ? size : (size = "small");
+    color !== null && color !== void 0 ? color : (color = 'default');
+    variant !== null && variant !== void 0 ? variant : (variant = "text");
+    direction !== null && direction !== void 0 ? direction : (direction = "row");
+    buttonPlacement !== null && buttonPlacement !== void 0 ? buttonPlacement : (buttonPlacement = "end");
+    let sx = {};
+    switch (buttonPlacement) {
+        case "start":
+            sx.justifyContent = 'flex-start';
+            break;
+        case "end":
+            sx.justifyContent = 'flex-end';
+            break;
+        case "between":
+            sx.justifyContent = 'space-between';
+            break;
+        case "full":
+            sx = {
+                "& button": {
+                    flex: 1
+                }
+            };
+            break;
+    }
+    let sizes = {
+        small: 320,
+        medium: 400,
+        large: 600
+    };
+    const close = () => Modal.close(id);
+    let okcolor = color;
+    let closecolor = color;
+    if (color === 'default') {
+        okcolor = 'brand';
+        closecolor = 'default';
+        variant = 'text';
+    }
+    else {
+        if (variant === 'fill') {
+            okcolor = 'default';
+            closecolor = 'default';
+        }
+        else {
+            okcolor = color;
+            closecolor = 'default';
+        }
+    }
+    return Modal.open(id, jsxs(Alert, Object.assign({ direction: direction, sx: {
+            px: 2,
+            py: 1,
+            pt: direction === 'row' ? 1 : 2
+        }, color: color, variant: variant, onClose: closeButton ? close : undefined }, rest, { children: [content, jsxs(Tag, Object.assign({ sxr: Object.assign({ display: "flex", gap: 1, pt: 4, flexDirection: "row" }, sx) }, { children: [!hideCloseButton && jsx(Button, Object.assign({ color: closecolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.closeButton, { onClick: () => {
+                            close();
+                            onConfirm && onConfirm(false);
+                        } }, { children: closeButtonText || "Close" })), !hideOkButton && jsx(Button, Object.assign({ color: okcolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.okButton, { onClick: () => {
+                            Modal.close(id);
+                            onConfirm && onConfirm(true);
+                        } }, { children: okButtonText || "OK" }))] }))] })), Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.modal), { size: sizes[size] || size, blur: 40, blurMode: blurMode || "transparent", transition: transition || "zoom", onClickOutside: () => {
+            clickOutsideToClose && close();
+        } }));
+};export{Alert as default};//# sourceMappingURL=index.mjs.map