@xanui/ui 1.0.0

package/Input/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["\nimport React, { MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, ColorTemplateColors, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Text from '../Text';\n\n\nexport type InputProps<T extends TagComponentType = \"input\"> = Omit<TagProps<T>, \"size\" | \"color\"> & {\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n    focused?: boolean;\n    color?: useBreakpointPropsType<Omit<ColorTemplateColors, \"default\">>;\n    containerRef?: MutableRefObject<HTMLDivElement | undefined>;\n    variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n    error?: boolean;\n    helperText?: useBreakpointPropsType<string>;\n    multiline?: boolean;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    rows?: useBreakpointPropsType<number>;\n    minRows?: useBreakpointPropsType<number>;\n    maxRows?: useBreakpointPropsType<number>;\n    slotProps?: {\n        container?: Omit<TagProps<\"div\">, \"children\">\n    }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"input\">({ value, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n    let [{\n        startIcon,\n        endIcon,\n        iconPlacement,\n        onFocus,\n        color,\n        onBlur,\n        focused,\n        containerRef,\n        disabled,\n        variant,\n        error,\n        helperText,\n        multiline,\n        size,\n        rows,\n        minRows,\n        maxRows,\n        slotProps,\n        ...rest\n    }] = useInterface<any>(\"Input\", props, {})\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (iconPlacement) _p.iconPlacement = iconPlacement\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (helperText) _p.helperText = helperText\n    if (size) _p.size = size\n    if (rows) _p.rows = rows\n    if (minRows) _p.minRows = minRows\n    if (maxRows) _p.maxRows = maxRows\n    const p: any = useBreakpointProps(_p)\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    iconPlacement = p.iconPlacement\n    color = p.color ?? \"brand\"\n    variant = p.variant ?? \"fill\"\n    helperText = p.helperText\n    size = p.size ?? 'medium'\n    rows = p.rows\n    minRows = p.minRows\n    maxRows = p.maxRows\n\n    ref ??= useRef(null);\n    iconPlacement ??= multiline ? \"end\" : \"center\"\n    if (!value) iconPlacement = 'center'\n\n    const [_focused, setFocused] = useState(false)\n    const conRef: any = useRef(null)\n    let _focus = focused || _focused\n\n    useEffect(() => {\n        if (containerRef) {\n            (containerRef as any).current = conRef?.current\n        }\n    }, [containerRef])\n\n    let _rows = useMemo(() => {\n        if (rows) return rows\n        if (value && multiline) {\n            let lines = (value as string).split(`\\n`).length\n            if (minRows && minRows > lines) {\n                return minRows\n            } else if (maxRows && maxRows < lines) {\n                return maxRows\n            } else {\n                return lines\n            }\n        }\n    }, [value]) || 1\n\n    const sizes: any = {\n        small: {\n            height: 38,\n            gap: .5,\n            fontSize: 14,\n        },\n        medium: {\n            height: 44,\n            gap: 1,\n            fontSize: 16\n        },\n        large: {\n            height: 52,\n            gap: 1,\n            fontSize: 18\n        }\n    }\n\n    const _size = sizes[size]\n    let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\n    borderColor = error ? \"danger.primary\" : borderColor\n    let multiprops: any = {}\n    if (multiline) {\n        multiprops = {\n            rows: _rows,\n            sx: {\n                resize: \"none\"\n            }\n        }\n    }\n\n    useEffect(() => {\n        if ((ref as any).current) {\n            (ref as any).current.style.height = \"auto\";\n            (ref as any).current.style.height = `${(ref as any).current.scrollHeight}px`;\n        }\n    }, [value]);\n\n    return (\n        <Tag\n            baseClass={`input${_focus ? \" input-focused\" : \"\"}`}\n        >\n            <Tag\n                {...slotProps?.container}\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n                    flexWrap: \"nowrap\",\n                    minWidth: 150,\n                    transitionProperty: \"border, box-shadow, background\",\n                    bgcolor: error ? \"danger.alpha\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\n                    border: variant === \"text\" ? 0 : 1,\n                    borderColor: borderColor,\n                    borderRadius: 1,\n                    px: 1,\n                    py: .5,\n                }}\n                baseClass='input-container'\n                disabled={disabled || false}\n                ref={conRef}\n                {..._size}\n                height={multiline ? \"auto\" : _size.height}\n                minHeight={_size.height}\n            >\n                {startIcon && <Tag\n                    sxr={{\n                        height: \"100%\",\n                        alignItems: 'center',\n                        justifyContent: \"center\",\n                        display: \"flex\",\n                        color: error ? \"danger.primary\" : \"text.secondary\",\n                    }}\n                    baseClass=\"input-start-icon\"\n                >{startIcon}</Tag>}\n                <Tag\n                    sxr={{\n                        display: \"flex\",\n                        alignItems: \"center\",\n                        flex: 1,\n                        minHeight: _size.height,\n                        \"& textarea\": {\n                            resize: \"none\"\n                        }\n                    }}\n                >\n                    <Tag\n                        component={multiline ? 'textarea' : 'input'}\n                        {...multiprops}\n                        {...rest}\n                        sxr={{\n                            border: 0,\n                            outline: 0,\n                            bgcolor: \"transparent\",\n                            color: error ? \"danger.primary\" : \"text.primary\",\n                            fontSize: _size.fontSize,\n                            height: multiline ? \"auto\" : _size.height + \"px!important\",\n                            width: \"100%\",\n                            maxHeight: 200,\n\n                        }}\n                        value={value}\n                        baseClass='input-box'\n                        ref={ref}\n                        onFocus={(e: any) => {\n                            focused ?? setFocused(true)\n                            onFocus && onFocus(e)\n                        }}\n                        onBlur={(e: any) => {\n                            focused ?? setFocused(false)\n                            onBlur && onBlur(e)\n                        }}\n                    />\n                </Tag>\n                {endIcon && <Tag\n                    sxr={{\n                        height: \"100%\",\n                        alignItems: 'center',\n                        justifyContent: \"center\",\n                        display: 'flex',\n                        color: error ? \"danger.primary\" : \"text.secondary\",\n                    }}\n                    baseClass=\"input-end-icon\"\n                >{endIcon}</Tag>}\n            </Tag>\n            {helperText && <Text\n                pl={.5}\n                height={_size.height}\n                className=\"input-helper-text\"\n                fontSize=\"small\"\n                color={error ? \"danger.primary\" : \"text.primary\"}\n            >{helperText}</Text>}\n        </Tag>\n    )\n})\n\nexport default Input\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/Label/index.d.ts

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

package/Label/index.js

@@ -0,0 +1,10 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core');const Label = React.forwardRef((_a, ref) => {
+    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
+    return jsxRuntime.jsx(core.Tag, Object.assign({ component: 'label' }, rest, { sxr: {
+            display: "inline-flex",
+            alignItems: "center",
+            verticalAlign: "middle",
+            fontSize: "button",
+            gap: .4,
+        }, baseClass: 'label', ref: ref }, { children: children }));
+});exports.default=Label;//# sourceMappingURL=index.js.map

package/Label/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/Label/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\n\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\n    return <Tag\n        component='label'\n        {...rest}\n        sxr={{\n            display: \"inline-flex\",\n            alignItems: \"center\",\n            verticalAlign: \"middle\",\n            fontSize: \"button\",\n            gap: .4,\n        }}\n        baseClass='label'\n        ref={ref}\n    >{children}</Tag>\n})\n\nexport default Label"],"names":["__rest","_jsx","Tag"],"mappings":"4LAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAAoC,EAAE,GAAmB,KAAI;AAA7D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACrF,OAAOC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,SAAS,EAAC,OAAO,EAAA,EACb,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,GAAG,EAAE,EAAE;SACV,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,EAAA,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AACrB,CAAC"}

package/Label/index.mjs

@@ -0,0 +1,10 @@
+import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from'react';import {Tag}from'@xanui/core';const Label = React.forwardRef((_a, ref) => {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    return jsx(Tag, Object.assign({ component: 'label' }, rest, { sxr: {
+            display: "inline-flex",
+            alignItems: "center",
+            verticalAlign: "middle",
+            fontSize: "button",
+            gap: .4,
+        }, baseClass: 'label', ref: ref }, { children: children }));
+});export{Label as default};//# sourceMappingURL=index.mjs.map

package/Label/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/Label/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\n\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\n    return <Tag\n        component='label'\n        {...rest}\n        sxr={{\n            display: \"inline-flex\",\n            alignItems: \"center\",\n            verticalAlign: \"middle\",\n            fontSize: \"button\",\n            gap: .4,\n        }}\n        baseClass='label'\n        ref={ref}\n    >{children}</Tag>\n})\n\nexport default Label"],"names":["_jsx"],"mappings":"sHAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAAoC,EAAE,GAAmB,KAAI;AAA7D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACrF,OAAOA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,SAAS,EAAC,OAAO,EAAA,EACb,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,GAAG,EAAE,EAAE;SACV,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,EAAA,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AACrB,CAAC"}

package/Layer/index.d.ts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { TransitionProps, useBreakpointPropsType, TagProps } from '@xanui/core';
+import { PortalProps } from '../Portal/index.js';
+
+type LayerProps = {
+    open: boolean;
+    children: ReactNode;
+    id?: string;
+    transition?: TransitionProps['variant'];
+    zIndex?: number;
+    blur?: useBreakpointPropsType<number>;
+    blurMode?: useBreakpointPropsType<"blur" | "transparent">;
+    onClickOutside?: () => void;
+    onOpen?: Function;
+    onOpened?: Function;
+    onClose?: Function;
+    onClosed?: Function;
+    slotProps?: {
+        root?: Omit<TagProps<"div">, "children">;
+        transition?: Omit<TransitionProps, "open" | "variant" | "onClose" | "onClosed" | "onOpen" | "onOpened">;
+        portal?: Omit<PortalProps, "children">;
+        content?: Omit<TagProps<"div">, "children">;
+    };
+};
+declare const Layer: {
+    ({ children, open, id, ...props }: LayerProps): react_jsx_runtime.JSX.Element;
+    open(id: string, content: ReactNode, props?: LayerHandlerProps): void;
+    close(id: string): void;
+};
+type LayerHandlerProps = Omit<LayerProps, "open" | "children">;
+
+export { Layer as default };
+export type { LayerHandlerProps, LayerProps };

package/Layer/index.js

@@ -0,0 +1,73 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core'),index=require('../Portal/index.js'),RenderRoot=require('../ThemeProvider/RenderRoot.js');let _d;
+const useBlurCss = (blur, mode) => {
+    return React.useMemo(() => {
+        let transparent = { bgcolor: core.alpha("#000000", blur / 100) };
+        if (typeof window === 'undefined' || mode === 'transparent') {
+            return transparent;
+        }
+        const d = _d || (_d = window.document.createElement("div").style);
+        return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent;
+    }, [blur]);
+};
+const Layer = (_a) => {
+    var _b, _c, _e;
+    var { children, open, id } = _a, props = tslib.__rest(_a, ["children", "open", "id"]);
+    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 ? useBlurCss(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;
+    return (jsxRuntime.jsx(index.default, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.portal, { children: jsxRuntime.jsx(core.Transition, Object.assign({ duration: duration, delay: delay, easing: "easeOut", variant: "fade", open: open }, { children: jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: "layer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { id: id, sxr: Object.assign(Object.assign(Object.assign({}, (_e = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _e === void 0 ? void 0 : _e.sx), { position: "fixed", zIndex: 1500 + (zIndex || 0), top: 0, left: 0, bottom: 0, right: 0 }), blurCss), onClick: (e) => {
+                    var _a;
+                    if (!((_a = e.currentTarget.firstChild) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                        if (onClickOutside) {
+                            onClickOutside();
+                        }
+                    }
+                } }, { children: jsxRuntime.jsx(core.Transition, Object.assign({ duration: duration, delay: delay, easing: "easeOut", 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 })) })) })) })));
+};
+const layers = new Map();
+const LayerHandler = () => {
+    return Array.from(layers.values()).map((l, key) => {
+        return (jsxRuntime.jsx(Layer, Object.assign({ open: l.open, id: l.id }, l.props, { zIndex: layers.size, onClosed: () => {
+                var _a, _b;
+                setTimeout(() => {
+                    layers.delete(l.id);
+                }, 100);
+                ((_a = l === null || l === void 0 ? void 0 : l.props) === null || _a === void 0 ? void 0 : _a.onClosed) && ((_b = l === null || l === void 0 ? void 0 : l.props) === null || _b === void 0 ? void 0 : _b.onClosed());
+            } }, { children: l.content }), "layer-" + key));
+    });
+};
+RenderRoot.default.create("LAYERS_RENDER", LayerHandler);
+Layer.open = (id, content, props) => {
+    if (layers.has(id))
+        return;
+    layers.set(id, { id, props, content, open: true });
+    RenderRoot.default.dispatch();
+};
+Layer.close = (id) => {
+    const get = layers.get(id);
+    if (get) {
+        layers.set(id, Object.assign(Object.assign({}, get), { open: false }));
+        RenderRoot.default.dispatch();
+    }
+};exports.LayerHandler=LayerHandler;exports.default=Layer;//# sourceMappingURL=index.js.map

package/Layer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/Layer/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport Portal, { PortalProps } from \"../Portal\";\nimport { useMemo } from \"react\"\nimport { alpha } from \"@xanui/core\";\nimport Renderar from '../ThemeProvider/RenderRoot';\n\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode: LayerProps[\"blurMode\"]) => {\n    return useMemo(() => {\n        let transparent = { bgcolor: alpha(\"#000000\", blur / 100) }\n        if (typeof window === 'undefined' || mode === 'transparent') {\n            return transparent\n        }\n        const d = _d || (_d = window.document.createElement(\"div\").style)\n        return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\n    }, [blur])\n}\n\n\nexport type LayerProps = {\n    open: boolean;\n    children: ReactNode;\n    id?: string;\n    transition?: TransitionProps['variant'];\n    zIndex?: number;\n    blur?: useBreakpointPropsType<number>\n    blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n    onClickOutside?: () => void;\n    onOpen?: Function;\n    onOpened?: Function;\n    onClose?: Function;\n    onClosed?: Function;\n    slotProps?: {\n        root?: Omit<TagProps<\"div\">, \"children\">;\n        transition?: Omit<TransitionProps, \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n        portal?: Omit<PortalProps, \"children\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n    }\n}\n\nconst Layer = ({ children, open, id, ...props }: LayerProps) => {\n    let [{\n        onClickOutside,\n        placement,\n        transition,\n        zIndex,\n        blur,\n        blurMode,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        slotProps\n    }] = useInterface<any>(\"Layer\", props, {})\n    const _p: any = {}\n    if (blur) _p.blur = blur\n    if (blurMode) _p.blurMode = blurMode\n    const p: any = useBreakpointProps(_p)\n\n    blur = p.blur\n    blurMode = p.blurMode\n\n    const [closed, setClosed] = useState(!open)\n    placement = placement || \"bottom-left\"\n    const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n    useEffect(() => {\n        if (closed && open) {\n            setClosed(false)\n        }\n    }, [open])\n\n    if (closed) return <></>\n    let duration = slotProps?.transition?.duration || 300\n    let delay = slotProps?.transition?.delay || 0\n\n    return (\n        <Portal {...slotProps?.portal}>\n            <Transition\n                duration={duration}\n                delay={delay}\n                easing=\"easeOut\"\n                variant={\"fade\"}\n                open={open}\n            >\n                <Tag\n                    baseClass=\"layer\"\n                    {...slotProps?.root}\n                    id={id}\n                    sxr={{\n                        ...slotProps?.root?.sx,\n                        position: \"fixed\",\n                        zIndex: 1500 + (zIndex || 0),\n                        top: 0,\n                        left: 0,\n                        bottom: 0,\n                        right: 0,\n                        ...blurCss\n                    }}\n                    onClick={(e: any) => {\n                        if (!e.currentTarget.firstChild?.contains(e.target)) {\n                            if (onClickOutside) {\n                                onClickOutside()\n                            }\n                        }\n                    }}\n                >\n                    <Transition\n                        duration={duration}\n                        delay={delay}\n                        easing=\"easeOut\"\n                        variant={transition || \"zoomOver\"}\n                        {...slotProps?.transition}\n                        open={open}\n                        onOpen={onOpen}\n                        onOpened={onOpened}\n                        onClose={onClose}\n                        onClosed={() => {\n                            setClosed(true)\n                            onClosed && onClosed()\n                        }}\n                    >\n                        {children}\n                    </Transition>\n                </Tag>\n            </Transition>\n        </Portal>\n    )\n}\n\nexport type LayerHandlerProps = Omit<LayerProps, \"open\" | \"children\">\nconst layers = new Map<string, { id: string, open: boolean; props?: LayerHandlerProps, content: ReactNode }>()\n\nexport const LayerHandler = () => {\n    return Array.from(layers.values()).map((l, key) => {\n        return (\n            <Layer\n                open={l.open}\n                key={\"layer-\" + key}\n                id={l.id}\n                {...l.props}\n                zIndex={layers.size}\n                onClosed={() => {\n                    setTimeout(() => {\n                        layers.delete(l.id)\n                    }, 100);\n                    l?.props?.onClosed && l?.props?.onClosed()\n                }}\n            >{l.content}</Layer>\n        )\n    })\n}\n\n\nRenderar.create(\"LAYERS_RENDER\", LayerHandler)\n\nLayer.open = (id: string, content: ReactNode, props?: LayerHandlerProps) => {\n    if (layers.has(id)) return\n    layers.set(id, { id, props, content, open: true })\n    Renderar.dispatch()\n}\n\nLayer.close = (id: string) => {\n    const get = layers.get(id)\n    if (get) {\n        layers.set(id, { ...get, open: false })\n        Renderar.dispatch()\n    }\n}\n\nexport default Layer"],"names":["useMemo","alpha","__rest","useInterface","useBreakpointProps","useState","useEffect","_jsx","Portal","Transition","Tag","Renderar"],"mappings":"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"}

package/Layer/index.mjs

@@ -0,0 +1,73 @@
+import {__rest}from'tslib';import {jsx,Fragment}from'react/jsx-runtime';import {useState,useEffect,useMemo}from'react';import {useInterface,useBreakpointProps,Transition,Tag,alpha}from'@xanui/core';import Portal from'../Portal/index.mjs';import Renderar from'../ThemeProvider/RenderRoot.mjs';let _d;
+const useBlurCss = (blur, mode) => {
+    return useMemo(() => {
+        let transparent = { bgcolor: alpha("#000000", blur / 100) };
+        if (typeof window === 'undefined' || mode === 'transparent') {
+            return transparent;
+        }
+        const d = _d || (_d = window.document.createElement("div").style);
+        return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent;
+    }, [blur]);
+};
+const Layer = (_a) => {
+    var _b, _c, _e;
+    var { children, open, id } = _a, props = __rest(_a, ["children", "open", "id"]);
+    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 = useBreakpointProps(_p);
+    blur = p.blur;
+    blurMode = p.blurMode;
+    const [closed, setClosed] = useState(!open);
+    placement = placement || "bottom-left";
+    const blurCss = blur ? useBlurCss(blur, blurMode) : {};
+    useEffect(() => {
+        if (closed && open) {
+            setClosed(false);
+        }
+    }, [open]);
+    if (closed)
+        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;
+    return (jsx(Portal, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.portal, { children: jsx(Transition, Object.assign({ duration: duration, delay: delay, easing: "easeOut", variant: "fade", open: open }, { children: jsx(Tag, Object.assign({ baseClass: "layer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { id: id, sxr: Object.assign(Object.assign(Object.assign({}, (_e = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _e === void 0 ? void 0 : _e.sx), { position: "fixed", zIndex: 1500 + (zIndex || 0), top: 0, left: 0, bottom: 0, right: 0 }), blurCss), onClick: (e) => {
+                    var _a;
+                    if (!((_a = e.currentTarget.firstChild) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                        if (onClickOutside) {
+                            onClickOutside();
+                        }
+                    }
+                } }, { children: jsx(Transition, Object.assign({ duration: duration, delay: delay, easing: "easeOut", 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 })) })) })) })));
+};
+const layers = new Map();
+const LayerHandler = () => {
+    return Array.from(layers.values()).map((l, key) => {
+        return (jsx(Layer, Object.assign({ open: l.open, id: l.id }, l.props, { zIndex: layers.size, onClosed: () => {
+                var _a, _b;
+                setTimeout(() => {
+                    layers.delete(l.id);
+                }, 100);
+                ((_a = l === null || l === void 0 ? void 0 : l.props) === null || _a === void 0 ? void 0 : _a.onClosed) && ((_b = l === null || l === void 0 ? void 0 : l.props) === null || _b === void 0 ? void 0 : _b.onClosed());
+            } }, { children: l.content }), "layer-" + key));
+    });
+};
+Renderar.create("LAYERS_RENDER", LayerHandler);
+Layer.open = (id, content, props) => {
+    if (layers.has(id))
+        return;
+    layers.set(id, { id, props, content, open: true });
+    Renderar.dispatch();
+};
+Layer.close = (id) => {
+    const get = layers.get(id);
+    if (get) {
+        layers.set(id, Object.assign(Object.assign({}, get), { open: false }));
+        Renderar.dispatch();
+    }
+};export{LayerHandler,Layer as default};//# sourceMappingURL=index.mjs.map

package/Layer/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/Layer/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport Portal, { PortalProps } from \"../Portal\";\nimport { useMemo } from \"react\"\nimport { alpha } from \"@xanui/core\";\nimport Renderar from '../ThemeProvider/RenderRoot';\n\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode: LayerProps[\"blurMode\"]) => {\n    return useMemo(() => {\n        let transparent = { bgcolor: alpha(\"#000000\", blur / 100) }\n        if (typeof window === 'undefined' || mode === 'transparent') {\n            return transparent\n        }\n        const d = _d || (_d = window.document.createElement(\"div\").style)\n        return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\n    }, [blur])\n}\n\n\nexport type LayerProps = {\n    open: boolean;\n    children: ReactNode;\n    id?: string;\n    transition?: TransitionProps['variant'];\n    zIndex?: number;\n    blur?: useBreakpointPropsType<number>\n    blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n    onClickOutside?: () => void;\n    onOpen?: Function;\n    onOpened?: Function;\n    onClose?: Function;\n    onClosed?: Function;\n    slotProps?: {\n        root?: Omit<TagProps<\"div\">, \"children\">;\n        transition?: Omit<TransitionProps, \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n        portal?: Omit<PortalProps, \"children\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n    }\n}\n\nconst Layer = ({ children, open, id, ...props }: LayerProps) => {\n    let [{\n        onClickOutside,\n        placement,\n        transition,\n        zIndex,\n        blur,\n        blurMode,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        slotProps\n    }] = useInterface<any>(\"Layer\", props, {})\n    const _p: any = {}\n    if (blur) _p.blur = blur\n    if (blurMode) _p.blurMode = blurMode\n    const p: any = useBreakpointProps(_p)\n\n    blur = p.blur\n    blurMode = p.blurMode\n\n    const [closed, setClosed] = useState(!open)\n    placement = placement || \"bottom-left\"\n    const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n    useEffect(() => {\n        if (closed && open) {\n            setClosed(false)\n        }\n    }, [open])\n\n    if (closed) return <></>\n    let duration = slotProps?.transition?.duration || 300\n    let delay = slotProps?.transition?.delay || 0\n\n    return (\n        <Portal {...slotProps?.portal}>\n            <Transition\n                duration={duration}\n                delay={delay}\n                easing=\"easeOut\"\n                variant={\"fade\"}\n                open={open}\n            >\n                <Tag\n                    baseClass=\"layer\"\n                    {...slotProps?.root}\n                    id={id}\n                    sxr={{\n                        ...slotProps?.root?.sx,\n                        position: \"fixed\",\n                        zIndex: 1500 + (zIndex || 0),\n                        top: 0,\n                        left: 0,\n                        bottom: 0,\n                        right: 0,\n                        ...blurCss\n                    }}\n                    onClick={(e: any) => {\n                        if (!e.currentTarget.firstChild?.contains(e.target)) {\n                            if (onClickOutside) {\n                                onClickOutside()\n                            }\n                        }\n                    }}\n                >\n                    <Transition\n                        duration={duration}\n                        delay={delay}\n                        easing=\"easeOut\"\n                        variant={transition || \"zoomOver\"}\n                        {...slotProps?.transition}\n                        open={open}\n                        onOpen={onOpen}\n                        onOpened={onOpened}\n                        onClose={onClose}\n                        onClosed={() => {\n                            setClosed(true)\n                            onClosed && onClosed()\n                        }}\n                    >\n                        {children}\n                    </Transition>\n                </Tag>\n            </Transition>\n        </Portal>\n    )\n}\n\nexport type LayerHandlerProps = Omit<LayerProps, \"open\" | \"children\">\nconst layers = new Map<string, { id: string, open: boolean; props?: LayerHandlerProps, content: ReactNode }>()\n\nexport const LayerHandler = () => {\n    return Array.from(layers.values()).map((l, key) => {\n        return (\n            <Layer\n                open={l.open}\n                key={\"layer-\" + key}\n                id={l.id}\n                {...l.props}\n                zIndex={layers.size}\n                onClosed={() => {\n                    setTimeout(() => {\n                        layers.delete(l.id)\n                    }, 100);\n                    l?.props?.onClosed && l?.props?.onClosed()\n                }}\n            >{l.content}</Layer>\n        )\n    })\n}\n\n\nRenderar.create(\"LAYERS_RENDER\", LayerHandler)\n\nLayer.open = (id: string, content: ReactNode, props?: LayerHandlerProps) => {\n    if (layers.has(id)) return\n    layers.set(id, { id, props, content, open: true })\n    Renderar.dispatch()\n}\n\nLayer.close = (id: string) => {\n    const get = layers.get(id)\n    if (get) {\n        layers.set(id, { ...get, open: false })\n        Renderar.dispatch()\n    }\n}\n\nexport default Layer"],"names":["_jsx"],"mappings":"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"}

package/LineProgress/index.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactElement } from 'react';
+import { useBreakpointPropsType, ColorTemplateColors } from '@xanui/core';
+
+type LineProgressProps = {
+    children?: ReactElement;
+    thumbSize?: useBreakpointPropsType<number>;
+    color?: useBreakpointPropsType<ColorTemplateColors>;
+    value?: useBreakpointPropsType<number>;
+    hideTrack?: useBreakpointPropsType<boolean>;
+    speed?: useBreakpointPropsType<number>;
+};
+declare const LineProgress: React.ForwardRefExoticComponent<LineProgressProps & React.RefAttributes<any>>;
+
+export { LineProgress as default };
+export type { LineProgressProps };

package/LineProgress/index.js

@@ -0,0 +1,48 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core');const 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, Object.assign({ baseClass: 'line-progress', sxr: {
+            display: "flex",
+            alignItems: "center",
+            width: '100%',
+            height: thumbSize,
+            position: "relative",
+            overflow: "hidden",
+            bgcolor: hideTrack ? "transparent" : (color === 'default' ? `background.secondary` : `${color}.alpha`),
+            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%" }
+                }
+            } }) })));
+});exports.default=LineProgress;//# sourceMappingURL=index.js.map

package/LineProgress/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, useBreakpointProps, ColorTemplateColors, useInterface, useBreakpointPropsType } from '@xanui/core';\n\nexport type LineProgressProps = {\n    children?: ReactElement;\n    thumbSize?: useBreakpointPropsType<number>;\n    color?: useBreakpointPropsType<ColorTemplateColors>;\n    value?: useBreakpointPropsType<number>;\n    hideTrack?: useBreakpointPropsType<boolean>;\n    speed?: useBreakpointPropsType<number>;\n}\n\n\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\n    const uid = \"line-progress\" + useId().replace(\":\", \"\")\n    let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\n    const _p: any = {}\n    if (thumbSize) _p.thumbSize = thumbSize\n    if (color) _p.color = color\n    if (value) _p.value = value\n    if (hideTrack) _p.hideTrack = hideTrack\n    if (speed) _p.speed = speed\n    const p: any = useBreakpointProps(_p)\n\n    thumbSize = p.thumbSize ?? 4\n    color = p.color ?? \"brand\"\n    value = p.value\n    hideTrack = p.hideTrack\n    speed = p.speed\n\n    let isVal = typeof value === 'number'\n    if (isVal && (value as number) > 100) value = 100\n\n    return (\n        <Tag\n            baseClass='line-progress'\n            sxr={{\n                display: \"flex\",\n                alignItems: \"center\",\n                width: '100%',\n                height: thumbSize,\n                position: \"relative\",\n                overflow: \"hidden\",\n                bgcolor: hideTrack ? \"transparent\" : (color === 'default' ? `background.secondary` : `${color}.alpha`),\n                radius: 2,\n            }}\n            ref={ref}\n        >\n            <Tag\n                component=\"span\"\n                baseClass=\"line-progress-thumb\"\n                sxr={{\n                    bgcolor: color === 'default' ? `divider` : `${color}`,\n                    width: isVal ? `${value}%` : \"50%\",\n                    height: thumbSize,\n                    position: \"absolute\",\n                    left: 0,\n                    animation: isVal ? \"none\" : `${uid} ${speed ?? 1}s linear infinite`,\n                    [`@keyframes ${uid}`]: {\n                        \"0%\": { left: \"-40%\" },\n                        \"50%\": { left: \"20%\", width: \"80%\" },\n                        \"100%\": { left: \"100%\", width: \"100%\" }\n                    }\n                }}\n            />\n        </Tag >\n    )\n})\n\nexport default LineProgress\n\n"],"names":["__rest","useId","useInterface","useBreakpointProps","_jsx","Tag"],"mappings":"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"}

package/LineProgress/index.mjs

@@ -0,0 +1,48 @@
+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 = __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;
+    if (color)
+        _p.color = color;
+    if (value)
+        _p.value = value;
+    if (hideTrack)
+        _p.hideTrack = hideTrack;
+    if (speed)
+        _p.speed = speed;
+    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;
+    hideTrack = p.hideTrack;
+    speed = p.speed;
+    let isVal = typeof value === 'number';
+    if (isVal && value > 100)
+        value = 100;
+    return (jsx(Tag, Object.assign({ baseClass: 'line-progress', sxr: {
+            display: "flex",
+            alignItems: "center",
+            width: '100%',
+            height: thumbSize,
+            position: "relative",
+            overflow: "hidden",
+            bgcolor: hideTrack ? "transparent" : (color === 'default' ? `background.secondary` : `${color}.alpha`),
+            radius: 2,
+        }, ref: ref }, { children: jsx(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%" }
+                }
+            } }) })));
+});export{LineProgress as default};//# sourceMappingURL=index.mjs.map

package/LineProgress/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, useBreakpointProps, ColorTemplateColors, useInterface, useBreakpointPropsType } from '@xanui/core';\n\nexport type LineProgressProps = {\n    children?: ReactElement;\n    thumbSize?: useBreakpointPropsType<number>;\n    color?: useBreakpointPropsType<ColorTemplateColors>;\n    value?: useBreakpointPropsType<number>;\n    hideTrack?: useBreakpointPropsType<boolean>;\n    speed?: useBreakpointPropsType<number>;\n}\n\n\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\n    const uid = \"line-progress\" + useId().replace(\":\", \"\")\n    let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\n    const _p: any = {}\n    if (thumbSize) _p.thumbSize = thumbSize\n    if (color) _p.color = color\n    if (value) _p.value = value\n    if (hideTrack) _p.hideTrack = hideTrack\n    if (speed) _p.speed = speed\n    const p: any = useBreakpointProps(_p)\n\n    thumbSize = p.thumbSize ?? 4\n    color = p.color ?? \"brand\"\n    value = p.value\n    hideTrack = p.hideTrack\n    speed = p.speed\n\n    let isVal = typeof value === 'number'\n    if (isVal && (value as number) > 100) value = 100\n\n    return (\n        <Tag\n            baseClass='line-progress'\n            sxr={{\n                display: \"flex\",\n                alignItems: \"center\",\n                width: '100%',\n                height: thumbSize,\n                position: \"relative\",\n                overflow: \"hidden\",\n                bgcolor: hideTrack ? \"transparent\" : (color === 'default' ? `background.secondary` : `${color}.alpha`),\n                radius: 2,\n            }}\n            ref={ref}\n        >\n            <Tag\n                component=\"span\"\n                baseClass=\"line-progress-thumb\"\n                sxr={{\n                    bgcolor: color === 'default' ? `divider` : `${color}`,\n                    width: isVal ? `${value}%` : \"50%\",\n                    height: thumbSize,\n                    position: \"absolute\",\n                    left: 0,\n                    animation: isVal ? \"none\" : `${uid} ${speed ?? 1}s linear infinite`,\n                    [`@keyframes ${uid}`]: {\n                        \"0%\": { left: \"-40%\" },\n                        \"50%\": { left: \"20%\", width: \"80%\" },\n                        \"100%\": { left: \"100%\", width: \"100%\" }\n                    }\n                }}\n            />\n        </Tag >\n    )\n})\n\nexport default LineProgress\n\n"],"names":["_jsx"],"mappings":"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"}

package/List/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TagComponentType, TagProps, useBreakpointPropsType, ColorTemplateColors, ColorTemplateType } from '@xanui/core';
+
+type ListProps<T extends TagComponentType = "ul"> = Omit<TagProps<T>, 'color'> & {
+    color?: useBreakpointPropsType<ColorTemplateColors>;
+    variant?: useBreakpointPropsType<ColorTemplateType>;
+    hoverColor?: useBreakpointPropsType<ColorTemplateColors>;
+    hoverVariant?: useBreakpointPropsType<ColorTemplateType>;
+};
+declare const List: React.ForwardRefExoticComponent<Omit<ListProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+
+export { List as default };
+export type { ListProps };

package/List/index.js

@@ -0,0 +1,51 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core');const List = React.forwardRef((_a, ref) => {
+    var _b, _c, _d, _e;
+    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
+    let [_f] = core.useInterface("List", rest, {}), { sx, color, variant, hoverColor, hoverVariant } = _f, props = tslib.__rest(_f, ["sx", "color", "variant", "hoverColor", "hoverVariant"]);
+    const _p = {};
+    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);
+    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 : "alpha";
+    const template = Object.assign({}, core.useColorTemplate(color, variant));
+    const hoverTemplate = Object.assign({}, core.useColorTemplate(hoverColor, hoverVariant));
+    delete template.hover;
+    delete hoverTemplate.hover;
+    let sxOutline = {};
+    if (hoverVariant == 'outline' || variant === 'outline') {
+        sxOutline = {
+            "& .list-item": {
+                border: 1,
+                borderColor: "transparent"
+            }
+        };
+    }
+    return (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), { "& .list-item-icon": {
+                    color: hoverTemplate.color
+                }, "& .list-item-text": {
+                    color: hoverTemplate.color
+                }, "& .list-item-subtitle": {
+                    color: hoverColor === 'default' ? "text.secondary" : hoverTemplate.color
+                } }), "& .xui-list-item.list-item-selected": Object.assign(Object.assign({}, template), { "& .list-item-icon": {
+                    color: template.color
+                }, "& .list-item-text": {
+                    color: template.color
+                }, "& .list-item-subtitle": {
+                    color: template.color
+                } }) }), (sx || {})), ref: ref }, { children: children })));
+});exports.default=List;//# sourceMappingURL=index.js.map

package/List/index.js.map

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

package/List/index.mjs

@@ -0,0 +1,51 @@
+import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from'react';import {useInterface,useBreakpointProps,useColorTemplate,Tag}from'@xanui/core';const List = React.forwardRef((_a, ref) => {
+    var _b, _c, _d, _e;
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    let [_f] = useInterface("List", rest, {}), { sx, color, variant, hoverColor, hoverVariant } = _f, props = __rest(_f, ["sx", "color", "variant", "hoverColor", "hoverVariant"]);
+    const _p = {};
+    if (color)
+        _p.color = color;
+    if (variant)
+        _p.variant = variant;
+    if (hoverColor)
+        _p.hoverColor = hoverColor;
+    if (hoverVariant)
+        _p.hoverVariant = hoverVariant;
+    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 : "alpha";
+    const template = Object.assign({}, useColorTemplate(color, variant));
+    const hoverTemplate = Object.assign({}, useColorTemplate(hoverColor, hoverVariant));
+    delete template.hover;
+    delete hoverTemplate.hover;
+    let sxOutline = {};
+    if (hoverVariant == 'outline' || variant === 'outline') {
+        sxOutline = {
+            "& .list-item": {
+                border: 1,
+                borderColor: "transparent"
+            }
+        };
+    }
+    return (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"
+            }, "& .list-item-subtitle": {
+                color: "text.secondary"
+            }, "& .xui-list-item:not(.list-item-selected):hover": Object.assign(Object.assign({}, hoverTemplate), { "& .list-item-icon": {
+                    color: hoverTemplate.color
+                }, "& .list-item-text": {
+                    color: hoverTemplate.color
+                }, "& .list-item-subtitle": {
+                    color: hoverColor === 'default' ? "text.secondary" : hoverTemplate.color
+                } }), "& .xui-list-item.list-item-selected": Object.assign(Object.assign({}, template), { "& .list-item-icon": {
+                    color: template.color
+                }, "& .list-item-text": {
+                    color: template.color
+                }, "& .list-item-subtitle": {
+                    color: template.color
+                } }) }), (sx || {})), ref: ref }, { children: children })));
+});export{List as default};//# sourceMappingURL=index.mjs.map