@xanui/ui 1.1.37 → 1.1.40

package/Layer/index.cjs

@@ -0,0 +1,62 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+var index = require('../useBlurCss/index.cjs');
+var index$1 = require('../ClickOutside/index.cjs');
+
+const Layer = (_a) => {
+    var _b, _c, _d;
+    var { children, open } = _a, props = tslib.__rest(_a, ["children", "open"]);
+    let [{ onClickOutside, placement, transition, zIndex, blur, blurMode, onOpen, onOpened, onClose, onClosed, slotProps }] = core.useInterface("Layer", props, {});
+    const _p = {};
+    if (blur)
+        _p.blur = blur;
+    if (blurMode)
+        _p.blurMode = blurMode;
+    const p = core.useBreakpointProps(_p);
+    blur = p.blur;
+    blurMode = p.blurMode;
+    const [closed, setClosed] = React.useState(!open);
+    placement = placement || "bottom-left";
+    const blurCss = blur ? index(blur, blurMode) : {};
+    React.useEffect(() => {
+        if (closed && open) {
+            setClosed(false);
+        }
+    }, [open]);
+    if (closed)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    let duration = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _b === void 0 ? void 0 : _b.duration) || 300;
+    let delay = ((_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _c === void 0 ? void 0 : _c.delay) || 0;
+    let content = jsxRuntime.jsx(core.Transition, Object.assign({ duration: duration, delay: delay, easing: "standard", variant: transition || "zoomOver" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: open, onOpen: onOpen, onOpened: onOpened, onClose: onClose, onClosed: () => {
+            setClosed(true);
+            onClosed && onClosed();
+        }, children: children }));
+    return (jsxRuntime.jsx(core.Transition, { duration: duration, delay: delay, easing: "smooth", variant: "fade", open: open, children: jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: "layer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { sxr: Object.assign(Object.assign(Object.assign({}, (_d = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _d === void 0 ? void 0 : _d.sx), { position: "fixed", zIndex: 1500 + (zIndex || 0), top: 0, left: 0, bottom: 0, right: 0, width: "100%", height: "100%" }), blurCss), children: onClickOutside ? jsxRuntime.jsx(index$1, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutside, { onClickOutside: onClickOutside || (() => { }), children: content })) : content })) }));
+};
+Layer.open = (children, props) => {
+    const l = core.Renderar.render(Layer, Object.assign(Object.assign({ open: true }, props), { children, onClosed: () => {
+            core.Renderar.unrender(Layer);
+            if (props === null || props === void 0 ? void 0 : props.onClosed) {
+                props.onClosed();
+            }
+        } }));
+    return {
+        open: () => {
+            l.updateProps({ open: true });
+        },
+        close: () => {
+            l.updateProps({ open: false });
+        },
+    };
+};
+Layer.close = () => {
+    core.Renderar.unrender(Layer);
+};
+
+module.exports = Layer;
+//# sourceMappingURL=index.cjs.map

package/Layer/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Layer/index.tsx"],"sourcesContent":["'use client'\r\nimport { ReactNode, useEffect, useState } from 'react'\r\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\r\nimport useBlurCss from '../useBlurCss';\r\nimport { Renderar } from \"@xanui/core\";\r\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\r\n\r\nexport type LayerProps = {\r\n    open: boolean;\r\n    children: ReactNode;\r\n    transition?: TransitionProps['variant'];\r\n    zIndex?: number;\r\n    blur?: useBreakpointPropsType<number>\r\n    blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\r\n    onClickOutside?: () => void;\r\n    onOpen?: Function;\r\n    onOpened?: Function;\r\n    onClose?: Function;\r\n    onClosed?: Function;\r\n    slotProps?: {\r\n        root?: Omit<TagProps<\"div\">, \"children\">;\r\n        transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\r\n        content?: Omit<TagProps<\"div\">, \"children\">;\r\n        clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\r\n    }\r\n}\r\n\r\nconst Layer = ({ children, open, ...props }: LayerProps) => {\r\n    let [{\r\n        onClickOutside,\r\n        placement,\r\n        transition,\r\n        zIndex,\r\n        blur,\r\n        blurMode,\r\n        onOpen,\r\n        onOpened,\r\n        onClose,\r\n        onClosed,\r\n        slotProps\r\n    }] = useInterface<any>(\"Layer\", props, {})\r\n\r\n    const _p: any = {}\r\n    if (blur) _p.blur = blur\r\n    if (blurMode) _p.blurMode = blurMode\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    blur = p.blur\r\n    blurMode = p.blurMode\r\n\r\n    const [closed, setClosed] = useState(!open)\r\n    placement = placement || \"bottom-left\"\r\n    const blurCss = blur ? useBlurCss(blur, blurMode) : {}\r\n\r\n    useEffect(() => {\r\n        if (closed && open) {\r\n            setClosed(false)\r\n        }\r\n    }, [open])\r\n\r\n    if (closed) return <></>\r\n    let duration = slotProps?.transition?.duration || 300\r\n    let delay = slotProps?.transition?.delay || 0\r\n\r\n    let content = <Transition\r\n        duration={duration}\r\n        delay={delay}\r\n        easing=\"standard\"\r\n        variant={transition || \"zoomOver\"}\r\n        {...slotProps?.transition}\r\n        open={open}\r\n        onOpen={onOpen}\r\n        onOpened={onOpened}\r\n        onClose={onClose}\r\n        onClosed={() => {\r\n            setClosed(true)\r\n            onClosed && onClosed()\r\n        }}\r\n    >\r\n        {children}\r\n    </Transition>\r\n\r\n    return (\r\n        <Transition\r\n            duration={duration}\r\n            delay={delay}\r\n            easing=\"smooth\"\r\n            variant={\"fade\"}\r\n            open={open}\r\n        >\r\n            <Tag\r\n                baseClass=\"layer\"\r\n                {...slotProps?.root}\r\n                sxr={{\r\n                    ...slotProps?.root?.sx,\r\n                    position: \"fixed\",\r\n                    zIndex: 1500 + (zIndex || 0),\r\n                    top: 0,\r\n                    left: 0,\r\n                    bottom: 0,\r\n                    right: 0,\r\n                    width: \"100%\",\r\n                    height: \"100%\",\r\n                    ...blurCss\r\n                }}\r\n            >\r\n                {\r\n                    onClickOutside ? <ClickOutside\r\n                        {...slotProps?.clickOutside}\r\n                        onClickOutside={onClickOutside || (() => { })}\r\n                    >\r\n                        {content}\r\n                    </ClickOutside> : content\r\n                }\r\n            </Tag>\r\n        </Transition>\r\n    )\r\n}\r\n\r\n\r\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\r\n    const l = Renderar.render(Layer as any, {\r\n        open: true,\r\n        ...props,\r\n        children,\r\n        onClosed: () => {\r\n            Renderar.unrender(Layer as any)\r\n            if (props?.onClosed) {\r\n                props.onClosed()\r\n            }\r\n        }\r\n    })\r\n    return {\r\n        open: () => {\r\n            l.updateProps({ open: true })\r\n        },\r\n        close: () => {\r\n            l.updateProps({ open: false })\r\n        },\r\n    }\r\n}\r\nLayer.close = () => {\r\n    Renderar.unrender(Layer as any)\r\n}\r\nexport default Layer"],"names":[],"mappings":";;;;;;;;;;AA2BA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAGA;AACI;AAKQ;;;;AAIJ;;;;;;;;;AAUR;AACA;AACI;AACJ;;"}

package/Layer/index.js

@@ -1,46 +1,44 @@
 "use client";
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@xanui/core');
-var index = require('../useBlurCss/index.js');
-var index$1 = require('../ClickOutside/index.js');
+import { __rest } from 'tslib';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { useInterface, useBreakpointProps, Transition, Tag, Renderar } from '@xanui/core';
+import useBlurCss from '../useBlurCss/index.js';
+import ClickOutside from '../ClickOutside/index.js';
 
 const Layer = (_a) => {
     var _b, _c, _d;
-    var { children, open } = _a, props = tslib.__rest(_a, ["children", "open"]);
-    let [{ onClickOutside, placement, transition, zIndex, blur, blurMode, onOpen, onOpened, onClose, onClosed, slotProps }] = core.useInterface("Layer", props, {});
+    var { children, open } = _a, props = __rest(_a, ["children", "open"]);
+    let [{ onClickOutside, placement, transition, zIndex, blur, blurMode, onOpen, onOpened, onClose, onClosed, slotProps }] = useInterface("Layer", props, {});
     const _p = {};
     if (blur)
         _p.blur = blur;
     if (blurMode)
         _p.blurMode = blurMode;
-    const p = core.useBreakpointProps(_p);
+    const p = useBreakpointProps(_p);
     blur = p.blur;
     blurMode = p.blurMode;
-    const [closed, setClosed] = React.useState(!open);
+    const [closed, setClosed] = useState(!open);
     placement = placement || "bottom-left";
-    const blurCss = blur ? index(blur, blurMode) : {};
-    React.useEffect(() => {
+    const blurCss = blur ? useBlurCss(blur, blurMode) : {};
+    useEffect(() => {
         if (closed && open) {
             setClosed(false);
         }
     }, [open]);
     if (closed)
-        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+        return jsx(Fragment, {});
     let duration = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _b === void 0 ? void 0 : _b.duration) || 300;
     let delay = ((_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _c === void 0 ? void 0 : _c.delay) || 0;
-    let content = jsxRuntime.jsx(core.Transition, Object.assign({ duration: duration, delay: delay, easing: "standard", variant: transition || "zoomOver" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: open, onOpen: onOpen, onOpened: onOpened, onClose: onClose, onClosed: () => {
+    let content = jsx(Transition, Object.assign({ duration: duration, delay: delay, easing: "standard", variant: transition || "zoomOver" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: open, onOpen: onOpen, onOpened: onOpened, onClose: onClose, onClosed: () => {
             setClosed(true);
             onClosed && onClosed();
         }, children: children }));
-    return (jsxRuntime.jsx(core.Transition, { duration: duration, delay: delay, easing: "smooth", variant: "fade", open: open, children: jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: "layer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { sxr: Object.assign(Object.assign(Object.assign({}, (_d = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _d === void 0 ? void 0 : _d.sx), { position: "fixed", zIndex: 1500 + (zIndex || 0), top: 0, left: 0, bottom: 0, right: 0, width: "100%", height: "100%" }), blurCss), children: onClickOutside ? jsxRuntime.jsx(index$1, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutside, { onClickOutside: onClickOutside || (() => { }), children: content })) : content })) }));
+    return (jsx(Transition, { duration: duration, delay: delay, easing: "smooth", variant: "fade", open: open, children: jsx(Tag, Object.assign({ baseClass: "layer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { sxr: Object.assign(Object.assign(Object.assign({}, (_d = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _d === void 0 ? void 0 : _d.sx), { position: "fixed", zIndex: 1500 + (zIndex || 0), top: 0, left: 0, bottom: 0, right: 0, width: "100%", height: "100%" }), blurCss), children: onClickOutside ? jsx(ClickOutside, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutside, { onClickOutside: onClickOutside || (() => { }), children: content })) : content })) }));
 };
 Layer.open = (children, props) => {
-    const l = core.Renderar.render(Layer, Object.assign(Object.assign({ open: true }, props), { children, onClosed: () => {
-            core.Renderar.unrender(Layer);
+    const l = Renderar.render(Layer, Object.assign(Object.assign({ open: true }, props), { children, onClosed: () => {
+            Renderar.unrender(Layer);
             if (props === null || props === void 0 ? void 0 : props.onClosed) {
                 props.onClosed();
             }
@@ -55,8 +53,8 @@ Layer.open = (children, props) => {
     };
 };
 Layer.close = () => {
-    core.Renderar.unrender(Layer);
+    Renderar.unrender(Layer);
 };
 
-module.exports = Layer;
+export { Layer as default };
 //# sourceMappingURL=index.js.map

package/Layer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Layer/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { ReactNode, useEffect, useState } from 'react'\r\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\r\nimport useBlurCss from '../useBlurCss';\r\nimport { Renderar } from \"@xanui/core\";\r\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\r\n\r\nexport type LayerProps = {\r\n    open: boolean;\r\n    children: ReactNode;\r\n    transition?: TransitionProps['variant'];\r\n    zIndex?: number;\r\n    blur?: useBreakpointPropsType<number>\r\n    blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\r\n    onClickOutside?: () => void;\r\n    onOpen?: Function;\r\n    onOpened?: Function;\r\n    onClose?: Function;\r\n    onClosed?: Function;\r\n    slotProps?: {\r\n        root?: Omit<TagProps<\"div\">, \"children\">;\r\n        transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\r\n        content?: Omit<TagProps<\"div\">, \"children\">;\r\n        clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\r\n    }\r\n}\r\n\r\nconst Layer = ({ children, open, ...props }: LayerProps) => {\r\n    let [{\r\n        onClickOutside,\r\n        placement,\r\n        transition,\r\n        zIndex,\r\n        blur,\r\n        blurMode,\r\n        onOpen,\r\n        onOpened,\r\n        onClose,\r\n        onClosed,\r\n        slotProps\r\n    }] = useInterface<any>(\"Layer\", props, {})\r\n\r\n    const _p: any = {}\r\n    if (blur) _p.blur = blur\r\n    if (blurMode) _p.blurMode = blurMode\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    blur = p.blur\r\n    blurMode = p.blurMode\r\n\r\n    const [closed, setClosed] = useState(!open)\r\n    placement = placement || \"bottom-left\"\r\n    const blurCss = blur ? useBlurCss(blur, blurMode) : {}\r\n\r\n    useEffect(() => {\r\n        if (closed && open) {\r\n            setClosed(false)\r\n        }\r\n    }, [open])\r\n\r\n    if (closed) return <></>\r\n    let duration = slotProps?.transition?.duration || 300\r\n    let delay = slotProps?.transition?.delay || 0\r\n\r\n    let content = <Transition\r\n        duration={duration}\r\n        delay={delay}\r\n        easing=\"standard\"\r\n        variant={transition || \"zoomOver\"}\r\n        {...slotProps?.transition}\r\n        open={open}\r\n        onOpen={onOpen}\r\n        onOpened={onOpened}\r\n        onClose={onClose}\r\n        onClosed={() => {\r\n            setClosed(true)\r\n            onClosed && onClosed()\r\n        }}\r\n    >\r\n        {children}\r\n    </Transition>\r\n\r\n    return (\r\n        <Transition\r\n            duration={duration}\r\n            delay={delay}\r\n            easing=\"smooth\"\r\n            variant={\"fade\"}\r\n            open={open}\r\n        >\r\n            <Tag\r\n                baseClass=\"layer\"\r\n                {...slotProps?.root}\r\n                sxr={{\r\n                    ...slotProps?.root?.sx,\r\n                    position: \"fixed\",\r\n                    zIndex: 1500 + (zIndex || 0),\r\n                    top: 0,\r\n                    left: 0,\r\n                    bottom: 0,\r\n                    right: 0,\r\n                    width: \"100%\",\r\n                    height: \"100%\",\r\n                    ...blurCss\r\n                }}\r\n            >\r\n                {\r\n                    onClickOutside ? <ClickOutside\r\n                        {...slotProps?.clickOutside}\r\n                        onClickOutside={onClickOutside || (() => { })}\r\n                    >\r\n                        {content}\r\n                    </ClickOutside> : content\r\n                }\r\n            </Tag>\r\n        </Transition>\r\n    )\r\n}\r\n\r\n\r\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\r\n    const l = Renderar.render(Layer as any, {\r\n        open: true,\r\n        ...props,\r\n        children,\r\n        onClosed: () => {\r\n            Renderar.unrender(Layer as any)\r\n            if (props?.onClosed) {\r\n                props.onClosed()\r\n            }\r\n        }\r\n    })\r\n    return {\r\n        open: () => {\r\n            l.updateProps({ open: true })\r\n        },\r\n        close: () => {\r\n            l.updateProps({ open: false })\r\n        },\r\n    }\r\n}\r\nLayer.close = () => {\r\n    Renderar.unrender(Layer as any)\r\n}\r\nexport default Layer"],"names":[],"mappings":";;;;;;;;;;AA2BA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAGA;AACI;AAKQ;;;;AAIJ;;;;;;;;;AAUR;AACA;AACI;AACJ;;"}
+{"version":3,"file":"index.js","sources":["../../src/Layer/index.tsx"],"sourcesContent":["'use client'\r\nimport { ReactNode, useEffect, useState } from 'react'\r\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\r\nimport useBlurCss from '../useBlurCss';\r\nimport { Renderar } from \"@xanui/core\";\r\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\r\n\r\nexport type LayerProps = {\r\n    open: boolean;\r\n    children: ReactNode;\r\n    transition?: TransitionProps['variant'];\r\n    zIndex?: number;\r\n    blur?: useBreakpointPropsType<number>\r\n    blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\r\n    onClickOutside?: () => void;\r\n    onOpen?: Function;\r\n    onOpened?: Function;\r\n    onClose?: Function;\r\n    onClosed?: Function;\r\n    slotProps?: {\r\n        root?: Omit<TagProps<\"div\">, \"children\">;\r\n        transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\r\n        content?: Omit<TagProps<\"div\">, \"children\">;\r\n        clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\r\n    }\r\n}\r\n\r\nconst Layer = ({ children, open, ...props }: LayerProps) => {\r\n    let [{\r\n        onClickOutside,\r\n        placement,\r\n        transition,\r\n        zIndex,\r\n        blur,\r\n        blurMode,\r\n        onOpen,\r\n        onOpened,\r\n        onClose,\r\n        onClosed,\r\n        slotProps\r\n    }] = useInterface<any>(\"Layer\", props, {})\r\n\r\n    const _p: any = {}\r\n    if (blur) _p.blur = blur\r\n    if (blurMode) _p.blurMode = blurMode\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    blur = p.blur\r\n    blurMode = p.blurMode\r\n\r\n    const [closed, setClosed] = useState(!open)\r\n    placement = placement || \"bottom-left\"\r\n    const blurCss = blur ? useBlurCss(blur, blurMode) : {}\r\n\r\n    useEffect(() => {\r\n        if (closed && open) {\r\n            setClosed(false)\r\n        }\r\n    }, [open])\r\n\r\n    if (closed) return <></>\r\n    let duration = slotProps?.transition?.duration || 300\r\n    let delay = slotProps?.transition?.delay || 0\r\n\r\n    let content = <Transition\r\n        duration={duration}\r\n        delay={delay}\r\n        easing=\"standard\"\r\n        variant={transition || \"zoomOver\"}\r\n        {...slotProps?.transition}\r\n        open={open}\r\n        onOpen={onOpen}\r\n        onOpened={onOpened}\r\n        onClose={onClose}\r\n        onClosed={() => {\r\n            setClosed(true)\r\n            onClosed && onClosed()\r\n        }}\r\n    >\r\n        {children}\r\n    </Transition>\r\n\r\n    return (\r\n        <Transition\r\n            duration={duration}\r\n            delay={delay}\r\n            easing=\"smooth\"\r\n            variant={\"fade\"}\r\n            open={open}\r\n        >\r\n            <Tag\r\n                baseClass=\"layer\"\r\n                {...slotProps?.root}\r\n                sxr={{\r\n                    ...slotProps?.root?.sx,\r\n                    position: \"fixed\",\r\n                    zIndex: 1500 + (zIndex || 0),\r\n                    top: 0,\r\n                    left: 0,\r\n                    bottom: 0,\r\n                    right: 0,\r\n                    width: \"100%\",\r\n                    height: \"100%\",\r\n                    ...blurCss\r\n                }}\r\n            >\r\n                {\r\n                    onClickOutside ? <ClickOutside\r\n                        {...slotProps?.clickOutside}\r\n                        onClickOutside={onClickOutside || (() => { })}\r\n                    >\r\n                        {content}\r\n                    </ClickOutside> : content\r\n                }\r\n            </Tag>\r\n        </Transition>\r\n    )\r\n}\r\n\r\n\r\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\r\n    const l = Renderar.render(Layer as any, {\r\n        open: true,\r\n        ...props,\r\n        children,\r\n        onClosed: () => {\r\n            Renderar.unrender(Layer as any)\r\n            if (props?.onClosed) {\r\n                props.onClosed()\r\n            }\r\n        }\r\n    })\r\n    return {\r\n        open: () => {\r\n            l.updateProps({ open: true })\r\n        },\r\n        close: () => {\r\n            l.updateProps({ open: false })\r\n        },\r\n    }\r\n}\r\nLayer.close = () => {\r\n    Renderar.unrender(Layer as any)\r\n}\r\nexport default Layer"],"names":[],"mappings":";;;;;;;;AA2BA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAGA;AACI;AAKQ;;;;AAIJ;;;;;;;;;AAUR;AACA;AACI;AACJ;;"}

package/LineProgress/index.cjs

@@ -0,0 +1,59 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+
+const LineProgress = React.forwardRef((_a, ref) => {
+    var _b, _c;
+    var { children } = _a, props = tslib.__rest(_a, ["children"]);
+    const uid = "line-progress" + React.useId().replace(":", "");
+    let [{ color, value, thumbSize, hideTrack, speed }] = core.useInterface("LineProgress", props, {});
+    const _p = {};
+    if (thumbSize)
+        _p.thumbSize = thumbSize;
+    if (color)
+        _p.color = color;
+    if (value)
+        _p.value = value;
+    if (hideTrack)
+        _p.hideTrack = hideTrack;
+    if (speed)
+        _p.speed = speed;
+    const p = core.useBreakpointProps(_p);
+    thumbSize = (_b = p.thumbSize) !== null && _b !== void 0 ? _b : 4;
+    color = (_c = p.color) !== null && _c !== void 0 ? _c : "brand";
+    value = p.value;
+    hideTrack = p.hideTrack;
+    speed = p.speed;
+    let isVal = typeof value === 'number';
+    if (isVal && value > 100)
+        value = 100;
+    return (jsxRuntime.jsx(core.Tag, { baseClass: 'line-progress', sxr: {
+            display: "flex",
+            alignItems: "center",
+            width: '100%',
+            height: thumbSize,
+            position: "relative",
+            overflow: "hidden",
+            bgcolor: hideTrack ? "transparent" : (color === 'default' ? `text.primary` : `${color}.soft.primary`),
+            radius: 2,
+        }, ref: ref, children: jsxRuntime.jsx(core.Tag, { component: "span", baseClass: "line-progress-thumb", sxr: {
+                bgcolor: color === 'default' ? `divider` : `${color}`,
+                width: isVal ? `${value}%` : "50%",
+                height: thumbSize,
+                position: "absolute",
+                left: 0,
+                animation: isVal ? "none" : `${uid} ${speed !== null && speed !== void 0 ? speed : 1}s linear infinite`,
+                [`@keyframes ${uid}`]: {
+                    "0%": { left: "-40%" },
+                    "50%": { left: "20%", width: "80%" },
+                    "100%": { left: "100%", width: "100%" }
+                }
+            } }) }));
+});
+
+module.exports = LineProgress;
+//# sourceMappingURL=index.cjs.map

package/LineProgress/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { ReactElement, useId } from \"react\"\r\nimport { Tag, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\r\n\r\nexport type LineProgressProps = {\r\n    children?: ReactElement;\r\n    thumbSize?: useBreakpointPropsType<number>;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    value?: useBreakpointPropsType<number>;\r\n    hideTrack?: useBreakpointPropsType<boolean>;\r\n    speed?: useBreakpointPropsType<number>;\r\n}\r\n\r\n\r\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\r\n    const uid = \"line-progress\" + useId().replace(\":\", \"\")\r\n    let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\r\n    const _p: any = {}\r\n    if (thumbSize) _p.thumbSize = thumbSize\r\n    if (color) _p.color = color\r\n    if (value) _p.value = value\r\n    if (hideTrack) _p.hideTrack = hideTrack\r\n    if (speed) _p.speed = speed\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    thumbSize = p.thumbSize ?? 4\r\n    color = p.color ?? \"brand\"\r\n    value = p.value\r\n    hideTrack = p.hideTrack\r\n    speed = p.speed\r\n\r\n    let isVal = typeof value === 'number'\r\n    if (isVal && (value as number) > 100) value = 100\r\n\r\n    return (\r\n        <Tag\r\n            baseClass='line-progress'\r\n            sxr={{\r\n                display: \"flex\",\r\n                alignItems: \"center\",\r\n                width: '100%',\r\n                height: thumbSize,\r\n                position: \"relative\",\r\n                overflow: \"hidden\",\r\n                bgcolor: hideTrack ? \"transparent\" : (color === 'default' ? `text.primary` : `${color}.soft.primary`),\r\n                radius: 2,\r\n            }}\r\n            ref={ref}\r\n        >\r\n            <Tag\r\n                component=\"span\"\r\n                baseClass=\"line-progress-thumb\"\r\n                sxr={{\r\n                    bgcolor: color === 'default' ? `divider` : `${color}`,\r\n                    width: isVal ? `${value}%` : \"50%\",\r\n                    height: thumbSize,\r\n                    position: \"absolute\",\r\n                    left: 0,\r\n                    animation: isVal ? \"none\" : `${uid} ${speed ?? 1}s linear infinite`,\r\n                    [`@keyframes ${uid}`]: {\r\n                        \"0%\": { left: \"-40%\" },\r\n                        \"50%\": { left: \"20%\", width: \"80%\" },\r\n                        \"100%\": { left: \"100%\", width: \"100%\" }\r\n                    }\r\n                }}\r\n            />\r\n        </Tag >\r\n    )\r\n})\r\n\r\nexport default LineProgress\r\n\r\n"],"names":[],"mappings":";;;;;;;;AAcA;;AAAuC;AACnC;;;AAGA;AAAe;AACf;AAAW;AACX;AAAW;AACX;AAAe;AACf;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAMY;AACA;AACA;AACA;AACA;AACA;;AAEA;AACH;AAOO;;AAEA;AACA;AACA;AACA;AACA;AACI;;;AAGH;;AAKrB;;"}

package/LineProgress/index.js

@@ -1,16 +1,14 @@
 "use client";
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@xanui/core');
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import React, { useId } from 'react';
+import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
 
 const LineProgress = React.forwardRef((_a, ref) => {
     var _b, _c;
-    var { children } = _a, props = tslib.__rest(_a, ["children"]);
-    const uid = "line-progress" + React.useId().replace(":", "");
-    let [{ color, value, thumbSize, hideTrack, speed }] = core.useInterface("LineProgress", props, {});
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const uid = "line-progress" + useId().replace(":", "");
+    let [{ color, value, thumbSize, hideTrack, speed }] = useInterface("LineProgress", props, {});
     const _p = {};
     if (thumbSize)
         _p.thumbSize = thumbSize;
@@ -22,7 +20,7 @@ const LineProgress = React.forwardRef((_a, ref) => {
         _p.hideTrack = hideTrack;
     if (speed)
         _p.speed = speed;
-    const p = core.useBreakpointProps(_p);
+    const p = useBreakpointProps(_p);
     thumbSize = (_b = p.thumbSize) !== null && _b !== void 0 ? _b : 4;
     color = (_c = p.color) !== null && _c !== void 0 ? _c : "brand";
     value = p.value;
@@ -31,7 +29,7 @@ const LineProgress = React.forwardRef((_a, ref) => {
     let isVal = typeof value === 'number';
     if (isVal && value > 100)
         value = 100;
-    return (jsxRuntime.jsx(core.Tag, { baseClass: 'line-progress', sxr: {
+    return (jsx(Tag, { baseClass: 'line-progress', sxr: {
             display: "flex",
             alignItems: "center",
             width: '100%',
@@ -40,7 +38,7 @@ const LineProgress = React.forwardRef((_a, ref) => {
             overflow: "hidden",
             bgcolor: hideTrack ? "transparent" : (color === 'default' ? `text.primary` : `${color}.soft.primary`),
             radius: 2,
-        }, ref: ref, children: jsxRuntime.jsx(core.Tag, { component: "span", baseClass: "line-progress-thumb", sxr: {
+        }, ref: ref, children: jsx(Tag, { component: "span", baseClass: "line-progress-thumb", sxr: {
                 bgcolor: color === 'default' ? `divider` : `${color}`,
                 width: isVal ? `${value}%` : "50%",
                 height: thumbSize,
@@ -55,5 +53,5 @@ const LineProgress = React.forwardRef((_a, ref) => {
             } }) }));
 });
 
-module.exports = LineProgress;
+export { LineProgress as default };
 //# sourceMappingURL=index.js.map

package/LineProgress/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { ReactElement, useId } from \"react\"\r\nimport { Tag, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\r\n\r\nexport type LineProgressProps = {\r\n    children?: ReactElement;\r\n    thumbSize?: useBreakpointPropsType<number>;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    value?: useBreakpointPropsType<number>;\r\n    hideTrack?: useBreakpointPropsType<boolean>;\r\n    speed?: useBreakpointPropsType<number>;\r\n}\r\n\r\n\r\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\r\n    const uid = \"line-progress\" + useId().replace(\":\", \"\")\r\n    let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\r\n    const _p: any = {}\r\n    if (thumbSize) _p.thumbSize = thumbSize\r\n    if (color) _p.color = color\r\n    if (value) _p.value = value\r\n    if (hideTrack) _p.hideTrack = hideTrack\r\n    if (speed) _p.speed = speed\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    thumbSize = p.thumbSize ?? 4\r\n    color = p.color ?? \"brand\"\r\n    value = p.value\r\n    hideTrack = p.hideTrack\r\n    speed = p.speed\r\n\r\n    let isVal = typeof value === 'number'\r\n    if (isVal && (value as number) > 100) value = 100\r\n\r\n    return (\r\n        <Tag\r\n            baseClass='line-progress'\r\n            sxr={{\r\n                display: \"flex\",\r\n                alignItems: \"center\",\r\n                width: '100%',\r\n                height: thumbSize,\r\n                position: \"relative\",\r\n                overflow: \"hidden\",\r\n                bgcolor: hideTrack ? \"transparent\" : (color === 'default' ? `text.primary` : `${color}.soft.primary`),\r\n                radius: 2,\r\n            }}\r\n            ref={ref}\r\n        >\r\n            <Tag\r\n                component=\"span\"\r\n                baseClass=\"line-progress-thumb\"\r\n                sxr={{\r\n                    bgcolor: color === 'default' ? `divider` : `${color}`,\r\n                    width: isVal ? `${value}%` : \"50%\",\r\n                    height: thumbSize,\r\n                    position: \"absolute\",\r\n                    left: 0,\r\n                    animation: isVal ? \"none\" : `${uid} ${speed ?? 1}s linear infinite`,\r\n                    [`@keyframes ${uid}`]: {\r\n                        \"0%\": { left: \"-40%\" },\r\n                        \"50%\": { left: \"20%\", width: \"80%\" },\r\n                        \"100%\": { left: \"100%\", width: \"100%\" }\r\n                    }\r\n                }}\r\n            />\r\n        </Tag >\r\n    )\r\n})\r\n\r\nexport default LineProgress\r\n\r\n"],"names":[],"mappings":";;;;;;;;AAcA;;AAAuC;AACnC;;;AAGA;AAAe;AACf;AAAW;AACX;AAAW;AACX;AAAe;AACf;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAMY;AACA;AACA;AACA;AACA;AACA;;AAEA;AACH;AAOO;;AAEA;AACA;AACA;AACA;AACA;AACI;;;AAGH;;AAKrB;;"}
+{"version":3,"file":"index.js","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { ReactElement, useId } from \"react\"\r\nimport { Tag, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\r\n\r\nexport type LineProgressProps = {\r\n    children?: ReactElement;\r\n    thumbSize?: useBreakpointPropsType<number>;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    value?: useBreakpointPropsType<number>;\r\n    hideTrack?: useBreakpointPropsType<boolean>;\r\n    speed?: useBreakpointPropsType<number>;\r\n}\r\n\r\n\r\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\r\n    const uid = \"line-progress\" + useId().replace(\":\", \"\")\r\n    let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\r\n    const _p: any = {}\r\n    if (thumbSize) _p.thumbSize = thumbSize\r\n    if (color) _p.color = color\r\n    if (value) _p.value = value\r\n    if (hideTrack) _p.hideTrack = hideTrack\r\n    if (speed) _p.speed = speed\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    thumbSize = p.thumbSize ?? 4\r\n    color = p.color ?? \"brand\"\r\n    value = p.value\r\n    hideTrack = p.hideTrack\r\n    speed = p.speed\r\n\r\n    let isVal = typeof value === 'number'\r\n    if (isVal && (value as number) > 100) value = 100\r\n\r\n    return (\r\n        <Tag\r\n            baseClass='line-progress'\r\n            sxr={{\r\n                display: \"flex\",\r\n                alignItems: \"center\",\r\n                width: '100%',\r\n                height: thumbSize,\r\n                position: \"relative\",\r\n                overflow: \"hidden\",\r\n                bgcolor: hideTrack ? \"transparent\" : (color === 'default' ? `text.primary` : `${color}.soft.primary`),\r\n                radius: 2,\r\n            }}\r\n            ref={ref}\r\n        >\r\n            <Tag\r\n                component=\"span\"\r\n                baseClass=\"line-progress-thumb\"\r\n                sxr={{\r\n                    bgcolor: color === 'default' ? `divider` : `${color}`,\r\n                    width: isVal ? `${value}%` : \"50%\",\r\n                    height: thumbSize,\r\n                    position: \"absolute\",\r\n                    left: 0,\r\n                    animation: isVal ? \"none\" : `${uid} ${speed ?? 1}s linear infinite`,\r\n                    [`@keyframes ${uid}`]: {\r\n                        \"0%\": { left: \"-40%\" },\r\n                        \"50%\": { left: \"20%\", width: \"80%\" },\r\n                        \"100%\": { left: \"100%\", width: \"100%\" }\r\n                    }\r\n                }}\r\n            />\r\n        </Tag >\r\n    )\r\n})\r\n\r\nexport default LineProgress\r\n\r\n"],"names":[],"mappings":";;;;;;AAcA;;AAAuC;AACnC;;;AAGA;AAAe;AACf;AAAW;AACX;AAAW;AACX;AAAe;AACf;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAMY;AACA;AACA;AACA;AACA;AACA;;AAEA;AACH;AAOO;;AAEA;AACA;AACA;AACA;AACA;AACI;;;AAGH;;AAKrB;;"}

package/List/ListContext.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+
+// ListContext.ts
+const ListContext = React.createContext(null);
+const useListContext = () => React.useContext(ListContext);
+
+exports.ListContext = ListContext;
+exports.useListContext = useListContext;
+//# sourceMappingURL=ListContext.cjs.map

package/List/ListContext.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListContext.cjs","sources":["../../src/List/ListContext.ts"],"sourcesContent":["// ListContext.ts\r\nimport React from \"react\"\r\n\r\nexport type ListSize = \"small\" | \"medium\" | \"large\"\r\n\r\nexport interface ListContextValue {\r\n   size: ListSize\r\n}\r\n\r\nexport const ListContext = React.createContext<ListContextValue | null>(null)\r\n\r\nexport const useListContext = () => React.useContext(ListContext)\r\n"],"names":[],"mappings":";;;;AAAA;AASO,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAA0B,IAAI;AAErE,MAAM,cAAc,GAAG,MAAM,KAAK,CAAC,UAAU,CAAC,WAAW;;;;;"}

package/List/ListContext.js

@@ -1,11 +1,8 @@
-'use strict';
-
-var React = require('react');
+import React from 'react';
 
 // ListContext.ts
 const ListContext = React.createContext(null);
 const useListContext = () => React.useContext(ListContext);
 
-exports.ListContext = ListContext;
-exports.useListContext = useListContext;
+export { ListContext, useListContext };
 //# sourceMappingURL=ListContext.js.map

package/List/ListContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListContext.js","sources":["../../src/List/ListContext.ts"],"sourcesContent":["// ListContext.ts\r\nimport React from \"react\"\r\n\r\nexport type ListSize = \"small\" | \"medium\" | \"large\"\r\n\r\nexport interface ListContextValue {\r\n   size: ListSize\r\n}\r\n\r\nexport const ListContext = React.createContext<ListContextValue | null>(null)\r\n\r\nexport const useListContext = () => React.useContext(ListContext)\r\n"],"names":[],"mappings":";;;;AAAA;AASO,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAA0B,IAAI;AAErE,MAAM,cAAc,GAAG,MAAM,KAAK,CAAC,UAAU,CAAC,WAAW;;;;;"}
+{"version":3,"file":"ListContext.js","sources":["../../src/List/ListContext.ts"],"sourcesContent":["// ListContext.ts\r\nimport React from \"react\"\r\n\r\nexport type ListSize = \"small\" | \"medium\" | \"large\"\r\n\r\nexport interface ListContextValue {\r\n   size: ListSize\r\n}\r\n\r\nexport const ListContext = React.createContext<ListContextValue | null>(null)\r\n\r\nexport const useListContext = () => React.useContext(ListContext)\r\n"],"names":[],"mappings":";;AAAA;AASO,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAA0B,IAAI;AAErE,MAAM,cAAc,GAAG,MAAM,KAAK,CAAC,UAAU,CAAC,WAAW;;;;"}

package/List/index.cjs

@@ -0,0 +1,63 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+var ListContext = require('./ListContext.cjs');
+
+const List = React.forwardRef((_a, ref) => {
+    var _b, _c, _d, _e, _f;
+    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
+    let [_g] = core.useInterface("List", rest, {}), { sx, color, variant, hoverColor, hoverVariant, size } = _g, props = tslib.__rest(_g, ["sx", "color", "variant", "hoverColor", "hoverVariant", "size"]);
+    const _p = {};
+    if (color)
+        _p.color = color;
+    if (variant)
+        _p.variant = variant;
+    if (hoverColor)
+        _p.hoverColor = hoverColor;
+    if (hoverVariant)
+        _p.hoverVariant = hoverVariant;
+    if (size)
+        _p.size = size;
+    const p = core.useBreakpointProps(_p);
+    color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
+    variant = (_c = p.variant) !== null && _c !== void 0 ? _c : "fill";
+    hoverColor = (_d = p.hoverColor) !== null && _d !== void 0 ? _d : "default";
+    hoverVariant = (_e = p.hoverVariant) !== null && _e !== void 0 ? _e : "soft";
+    size = (_f = p.size) !== null && _f !== void 0 ? _f : "medium";
+    const template = core.useColorTemplate(color, variant);
+    const hoverTemplate = core.useColorTemplate(hoverColor, hoverVariant);
+    let sxOutline = {};
+    if (hoverVariant == 'outline' || variant === 'outline') {
+        sxOutline = {
+            "& .list-item": {
+                border: "1px solid",
+                borderColor: "transparent"
+            }
+        };
+    }
+    return (jsxRuntime.jsx(ListContext.ListContext.Provider, { value: { size }, children: jsxRuntime.jsx(core.Tag, Object.assign({ component: 'ul' }, props, { baseClass: 'list', sxr: Object.assign(Object.assign(Object.assign({ listStyle: "none", p: 0, m: 0 }, sxOutline), { "& .list-item-icon": {
+                    color: "text.secondary"
+                }, "& .list-item-text": {
+                    color: "text.primary"
+                }, "& .list-item-subtitle": {
+                    color: "text.secondary"
+                }, "& .xui-list-item:not(.list-item-selected):hover": Object.assign(Object.assign({}, hoverTemplate.primary), { "& .list-item-icon": {
+                        color: hoverTemplate.primary.color
+                    }, "& .list-item-text": {
+                        color: hoverTemplate.primary.color
+                    }, "& .list-item-subtitle": {
+                        color: hoverColor === 'default' ? "text.secondary" : hoverTemplate.primary.color
+                    } }), "& .xui-list-item.list-item-selected": Object.assign(Object.assign({}, template.primary), { "& .list-item-icon": {
+                        color: template.primary.color
+                    }, "& .list-item-text": {
+                        color: template.primary.color
+                    }, "& .list-item-subtitle": {
+                        color: template.primary.color
+                    } }) }), (sx || {})), ref: ref, children: children })) }));
+});
+
+module.exports = List;
+//# sourceMappingURL=index.cjs.map

package/List/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/List/index.tsx"],"sourcesContent":["\r\nimport React from 'react'\r\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\r\nimport { ListContext } from './ListContext';\r\n\r\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color' | \"size\"> & {\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n}\r\n\r\n\r\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\r\n    let [{ sx, color, variant, hoverColor, hoverVariant, size, ...props }] = useInterface<any>(\"List\", rest, {})\r\n    const _p: any = {}\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    if (size) _p.size = size\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    color = p.color ?? \"brand\"\r\n    variant = p.variant ?? \"fill\"\r\n    hoverColor = p.hoverColor ?? \"default\"\r\n    hoverVariant = p.hoverVariant ?? \"soft\"\r\n    size = p.size ?? \"medium\"\r\n\r\n    const template = useColorTemplate(color, variant)\r\n    const hoverTemplate = useColorTemplate(hoverColor, hoverVariant)\r\n\r\n    let sxOutline: any = {}\r\n    if (hoverVariant == 'outline' || variant === 'outline') {\r\n        sxOutline = {\r\n            \"& .list-item\": {\r\n                border: \"1px solid\",\r\n                borderColor: \"transparent\"\r\n            }\r\n        }\r\n    }\r\n\r\n    return (\r\n        <ListContext.Provider value={{ size }}>\r\n            <Tag\r\n                component='ul'\r\n                {...props}\r\n                baseClass='list'\r\n                sxr={{\r\n                    listStyle: \"none\",\r\n                    p: 0,\r\n                    m: 0,\r\n                    ...sxOutline,\r\n                    \"& .list-item-icon\": {\r\n                        color: \"text.secondary\"\r\n                    },\r\n                    \"& .list-item-text\": {\r\n                        color: \"text.primary\"\r\n                    },\r\n                    \"& .list-item-subtitle\": {\r\n                        color: \"text.secondary\"\r\n                    },\r\n                    \"& .xui-list-item:not(.list-item-selected):hover\": {\r\n                        ...hoverTemplate.primary,\r\n                        \"& .list-item-icon\": {\r\n                            color: hoverTemplate.primary.color\r\n                        },\r\n                        \"& .list-item-text\": {\r\n                            color: hoverTemplate.primary.color\r\n                        },\r\n                        \"& .list-item-subtitle\": {\r\n                            color: hoverColor === 'default' ? \"text.secondary\" : hoverTemplate.primary.color\r\n                        },\r\n                    },\r\n                    \"& .xui-list-item.list-item-selected\": {\r\n                        ...template.primary,\r\n                        \"& .list-item-icon\": {\r\n                            color: template.primary.color\r\n                        },\r\n                        \"& .list-item-text\": {\r\n                            color: template.primary.color\r\n                        },\r\n                        \"& .list-item-subtitle\": {\r\n                            color: template.primary.color\r\n                        },\r\n                    },\r\n                    ...(sx || {} as any)\r\n                }}\r\n                ref={ref}\r\n            >\r\n                {children}\r\n            </Tag>\r\n        </ListContext.Provider>\r\n    )\r\n})\r\n\r\nexport default List"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","_jsx","ListContext","Tag"],"mappings":"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"}

package/List/index.js

@@ -1,15 +1,13 @@
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@xanui/core');
-var ListContext = require('./ListContext.js');
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { useInterface, useBreakpointProps, useColorTemplate, Tag } from '@xanui/core';
+import { ListContext } from './ListContext.js';
 
 const List = React.forwardRef((_a, ref) => {
     var _b, _c, _d, _e, _f;
-    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
-    let [_g] = core.useInterface("List", rest, {}), { sx, color, variant, hoverColor, hoverVariant, size } = _g, props = tslib.__rest(_g, ["sx", "color", "variant", "hoverColor", "hoverVariant", "size"]);
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    let [_g] = useInterface("List", rest, {}), { sx, color, variant, hoverColor, hoverVariant, size } = _g, props = __rest(_g, ["sx", "color", "variant", "hoverColor", "hoverVariant", "size"]);
     const _p = {};
     if (color)
         _p.color = color;
@@ -21,14 +19,14 @@ const List = React.forwardRef((_a, ref) => {
         _p.hoverVariant = hoverVariant;
     if (size)
         _p.size = size;
-    const p = core.useBreakpointProps(_p);
+    const p = useBreakpointProps(_p);
     color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
     variant = (_c = p.variant) !== null && _c !== void 0 ? _c : "fill";
     hoverColor = (_d = p.hoverColor) !== null && _d !== void 0 ? _d : "default";
     hoverVariant = (_e = p.hoverVariant) !== null && _e !== void 0 ? _e : "soft";
     size = (_f = p.size) !== null && _f !== void 0 ? _f : "medium";
-    const template = core.useColorTemplate(color, variant);
-    const hoverTemplate = core.useColorTemplate(hoverColor, hoverVariant);
+    const template = useColorTemplate(color, variant);
+    const hoverTemplate = useColorTemplate(hoverColor, hoverVariant);
     let sxOutline = {};
     if (hoverVariant == 'outline' || variant === 'outline') {
         sxOutline = {
@@ -38,7 +36,7 @@ const List = React.forwardRef((_a, ref) => {
             }
         };
     }
-    return (jsxRuntime.jsx(ListContext.ListContext.Provider, { value: { size }, children: jsxRuntime.jsx(core.Tag, Object.assign({ component: 'ul' }, props, { baseClass: 'list', sxr: Object.assign(Object.assign(Object.assign({ listStyle: "none", p: 0, m: 0 }, sxOutline), { "& .list-item-icon": {
+    return (jsx(ListContext.Provider, { value: { size }, children: jsx(Tag, Object.assign({ component: 'ul' }, props, { baseClass: 'list', sxr: Object.assign(Object.assign(Object.assign({ listStyle: "none", p: 0, m: 0 }, sxOutline), { "& .list-item-icon": {
                     color: "text.secondary"
                 }, "& .list-item-text": {
                     color: "text.primary"
@@ -59,5 +57,5 @@ const List = React.forwardRef((_a, ref) => {
                     } }) }), (sx || {})), ref: ref, children: children })) }));
 });
 
-module.exports = List;
+export { List as default };
 //# sourceMappingURL=index.js.map

package/List/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/List/index.tsx"],"sourcesContent":["\r\nimport React from 'react'\r\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\r\nimport { ListContext } from './ListContext';\r\n\r\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color' | \"size\"> & {\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n}\r\n\r\n\r\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\r\n    let [{ sx, color, variant, hoverColor, hoverVariant, size, ...props }] = useInterface<any>(\"List\", rest, {})\r\n    const _p: any = {}\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    if (size) _p.size = size\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    color = p.color ?? \"brand\"\r\n    variant = p.variant ?? \"fill\"\r\n    hoverColor = p.hoverColor ?? \"default\"\r\n    hoverVariant = p.hoverVariant ?? \"soft\"\r\n    size = p.size ?? \"medium\"\r\n\r\n    const template = useColorTemplate(color, variant)\r\n    const hoverTemplate = useColorTemplate(hoverColor, hoverVariant)\r\n\r\n    let sxOutline: any = {}\r\n    if (hoverVariant == 'outline' || variant === 'outline') {\r\n        sxOutline = {\r\n            \"& .list-item\": {\r\n                border: \"1px solid\",\r\n                borderColor: \"transparent\"\r\n            }\r\n        }\r\n    }\r\n\r\n    return (\r\n        <ListContext.Provider value={{ size }}>\r\n            <Tag\r\n                component='ul'\r\n                {...props}\r\n                baseClass='list'\r\n                sxr={{\r\n                    listStyle: \"none\",\r\n                    p: 0,\r\n                    m: 0,\r\n                    ...sxOutline,\r\n                    \"& .list-item-icon\": {\r\n                        color: \"text.secondary\"\r\n                    },\r\n                    \"& .list-item-text\": {\r\n                        color: \"text.primary\"\r\n                    },\r\n                    \"& .list-item-subtitle\": {\r\n                        color: \"text.secondary\"\r\n                    },\r\n                    \"& .xui-list-item:not(.list-item-selected):hover\": {\r\n                        ...hoverTemplate.primary,\r\n                        \"& .list-item-icon\": {\r\n                            color: hoverTemplate.primary.color\r\n                        },\r\n                        \"& .list-item-text\": {\r\n                            color: hoverTemplate.primary.color\r\n                        },\r\n                        \"& .list-item-subtitle\": {\r\n                            color: hoverColor === 'default' ? \"text.secondary\" : hoverTemplate.primary.color\r\n                        },\r\n                    },\r\n                    \"& .xui-list-item.list-item-selected\": {\r\n                        ...template.primary,\r\n                        \"& .list-item-icon\": {\r\n                            color: template.primary.color\r\n                        },\r\n                        \"& .list-item-text\": {\r\n                            color: template.primary.color\r\n                        },\r\n                        \"& .list-item-subtitle\": {\r\n                            color: template.primary.color\r\n                        },\r\n                    },\r\n                    ...(sx || {} as any)\r\n                }}\r\n                ref={ref}\r\n            >\r\n                {children}\r\n            </Tag>\r\n        </ListContext.Provider>\r\n    )\r\n})\r\n\r\nexport default List"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","_jsx","ListContext","Tag"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/List/index.tsx"],"sourcesContent":["\r\nimport React from 'react'\r\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\r\nimport { ListContext } from './ListContext';\r\n\r\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color' | \"size\"> & {\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n}\r\n\r\n\r\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\r\n    let [{ sx, color, variant, hoverColor, hoverVariant, size, ...props }] = useInterface<any>(\"List\", rest, {})\r\n    const _p: any = {}\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    if (size) _p.size = size\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    color = p.color ?? \"brand\"\r\n    variant = p.variant ?? \"fill\"\r\n    hoverColor = p.hoverColor ?? \"default\"\r\n    hoverVariant = p.hoverVariant ?? \"soft\"\r\n    size = p.size ?? \"medium\"\r\n\r\n    const template = useColorTemplate(color, variant)\r\n    const hoverTemplate = useColorTemplate(hoverColor, hoverVariant)\r\n\r\n    let sxOutline: any = {}\r\n    if (hoverVariant == 'outline' || variant === 'outline') {\r\n        sxOutline = {\r\n            \"& .list-item\": {\r\n                border: \"1px solid\",\r\n                borderColor: \"transparent\"\r\n            }\r\n        }\r\n    }\r\n\r\n    return (\r\n        <ListContext.Provider value={{ size }}>\r\n            <Tag\r\n                component='ul'\r\n                {...props}\r\n                baseClass='list'\r\n                sxr={{\r\n                    listStyle: \"none\",\r\n                    p: 0,\r\n                    m: 0,\r\n                    ...sxOutline,\r\n                    \"& .list-item-icon\": {\r\n                        color: \"text.secondary\"\r\n                    },\r\n                    \"& .list-item-text\": {\r\n                        color: \"text.primary\"\r\n                    },\r\n                    \"& .list-item-subtitle\": {\r\n                        color: \"text.secondary\"\r\n                    },\r\n                    \"& .xui-list-item:not(.list-item-selected):hover\": {\r\n                        ...hoverTemplate.primary,\r\n                        \"& .list-item-icon\": {\r\n                            color: hoverTemplate.primary.color\r\n                        },\r\n                        \"& .list-item-text\": {\r\n                            color: hoverTemplate.primary.color\r\n                        },\r\n                        \"& .list-item-subtitle\": {\r\n                            color: hoverColor === 'default' ? \"text.secondary\" : hoverTemplate.primary.color\r\n                        },\r\n                    },\r\n                    \"& .xui-list-item.list-item-selected\": {\r\n                        ...template.primary,\r\n                        \"& .list-item-icon\": {\r\n                            color: template.primary.color\r\n                        },\r\n                        \"& .list-item-text\": {\r\n                            color: template.primary.color\r\n                        },\r\n                        \"& .list-item-subtitle\": {\r\n                            color: template.primary.color\r\n                        },\r\n                    },\r\n                    ...(sx || {} as any)\r\n                }}\r\n                ref={ref}\r\n            >\r\n                {children}\r\n            </Tag>\r\n        </ListContext.Provider>\r\n    )\r\n})\r\n\r\nexport default List"],"names":["_jsx"],"mappings":"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"}

package/ListItem/index.cjs

@@ -0,0 +1,54 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+var index = require('../Text/index.cjs');
+var ListContext = require('../List/ListContext.cjs');
+
+const ListItem = React.forwardRef((_a, ref) => {
+    var _b, _c;
+    var { children, startIcon, endIcon, subtitle, size } = _a, rest = tslib.__rest(_a, ["children", "startIcon", "endIcon", "subtitle", "size"]);
+    let [_d] = core.useInterface("ListItem", rest, {}), { selected } = _d, props = tslib.__rest(_d, ["selected"]);
+    const _p = {};
+    if (subtitle)
+        _p.subtitle = subtitle;
+    if (startIcon)
+        _p.startIcon = startIcon;
+    if (endIcon)
+        _p.endIcon = endIcon;
+    if (size)
+        _p.size = size;
+    const p = core.useBreakpointProps(_p);
+    const ctx = ListContext.useListContext();
+    subtitle = p.subtitle;
+    startIcon = p.startIcon;
+    endIcon = p.endIcon;
+    size = (_c = (_b = p.size) !== null && _b !== void 0 ? _b : ctx === null || ctx === void 0 ? void 0 : ctx.size) !== null && _c !== void 0 ? _c : "medium";
+    let sizes = {
+        small: {
+            fontSize: "button",
+            py: 0.5,
+            px: 1,
+            minHeight: 32,
+        },
+        medium: {
+            fontSize: "text",
+            py: 1,
+            px: 1.5,
+            minHeight: 40,
+        },
+        large: {
+            fontSize: "h6",
+            py: 1.5,
+            px: 2,
+            minHeight: 48,
+        }
+    };
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({ component: 'li' }, props, { sxr: Object.assign({ alignItems: "center", display: "flex", flexDirection: "row", userSelect: "none", cursor: "pointer", lineHeight: 1.4, whiteSpace: "nowrap", flexShrink: "0" }, sizes[size]), baseClass: 'list-item', classNames: [{ "list-item-selected": selected }, ...(props.classNames || [])], ref: ref, children: [startIcon && jsxRuntime.jsx(core.Tag, { mr: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: startIcon }), jsxRuntime.jsxs(core.Tag, { flex: 1, children: [jsxRuntime.jsx(index, { variant: "text", className: 'list-item-text', component: typeof children === "string" || typeof children === "number" ? "p" : "div", children: children }), subtitle && jsxRuntime.jsx(index, { variant: "text", fontSize: "button", className: 'list-item-subtitle', component: typeof subtitle === "string" || typeof subtitle === "number" ? "p" : "div", children: subtitle })] }), endIcon && jsxRuntime.jsx(core.Tag, { ml: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: endIcon })] })));
+});
+ListItem.displayName = "ListItem";
+
+module.exports = ListItem;
+//# sourceMappingURL=index.cjs.map