@xanui/ui 1.2.6 → 1.2.8

package/Link/index.d.ts

@@ -0,0 +1,17 @@
+import React__default from 'react';
+import { TagComponentType, TagProps } from '@xanui/core';
+
+type LinkProps<T extends TagComponentType = "a"> = Omit<TagProps<T>, "component"> & {
+    component?: TagComponentType;
+    href?: string;
+    target?: React__default.HTMLAttributeAnchorTarget;
+    rel?: string;
+    underline?: "none" | "hover" | "always";
+    external?: boolean;
+    isActive?: boolean;
+    isDisabled?: boolean;
+};
+declare const Link: React__default.ForwardRefExoticComponent<Omit<LinkProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
+
+export { Link as default };
+export type { LinkProps };

package/Link/index.js

@@ -0,0 +1,39 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import React, { useMemo } from 'react';
+import { Tag } from '@xanui/core';
+
+const Link = React.forwardRef((_a, ref) => {
+    var { children, component, href, target, rel, underline = "hover", external, isActive, isDisabled } = _a, props = __rest(_a, ["children", "component", "href", "target", "rel", "underline", "external", "isActive", "isDisabled"]);
+    const Component = component || "a";
+    const isExternal = useMemo(() => {
+        if (external !== undefined)
+            return external;
+        if (!href)
+            return false;
+        return /^https?:\/\//.test(href);
+    }, [external, href]);
+    const computedRel = useMemo(() => {
+        if (isExternal && target === "_blank") {
+            return rel || "noopener noreferrer";
+        }
+        return rel;
+    }, [isExternal, target, rel]);
+    return (jsx(Tag, Object.assign({}, props, { ref: ref, component: Component, href: href, target: isExternal ? "_blank" : target, rel: computedRel, "aria-disabled": isDisabled || undefined, baseClass: "link", "data-active": isActive || undefined, "data-disabled": isDisabled || undefined, sxr: {
+            textDecoration: underline === "always" ? "underline" : "none",
+            cursor: isDisabled ? "not-allowed" : "pointer",
+            opacity: isDisabled ? 0.6 : 1,
+            "&:hover": {
+                textDecoration: underline === "hover" ? "underline" : undefined,
+            },
+            "&:focus-visible": {
+                outline: "2px solid var(--color-primary)",
+                outlineOffset: "2px",
+            },
+        }, children: children })));
+});
+Link.displayName = "Link";
+
+export { Link as default };
+//# sourceMappingURL=index.js.map

package/Link/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/Link/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useMemo } from \"react\";\nimport { Tag, TagProps, TagComponentType } from \"@xanui/core\";\n\nexport type LinkProps<T extends TagComponentType = \"a\"> = Omit<TagProps<T>, \"component\"> & {\n    component?: TagComponentType;\n\n    href?: string;\n    target?: React.HTMLAttributeAnchorTarget;\n    rel?: string;\n\n    underline?: \"none\" | \"hover\" | \"always\";\n    external?: boolean;\n\n    isActive?: boolean;\n    isDisabled?: boolean;\n};\n\nconst Link = React.forwardRef(<T extends TagComponentType = \"a\">({ children, component, href, target, rel, underline = \"hover\", external, isActive, isDisabled, ...props }: LinkProps<T>, ref: React.Ref<any>) => {\n    const Component = component || \"a\";\n\n    const isExternal = useMemo(() => {\n        if (external !== undefined) return external;\n        if (!href) return false;\n        return /^https?:\\/\\//.test(href);\n    }, [external, href]);\n\n    const computedRel = useMemo(() => {\n        if (isExternal && target === \"_blank\") {\n            return rel || \"noopener noreferrer\";\n        }\n        return rel;\n    }, [isExternal, target, rel]);\n\n    return (\n        <Tag\n            {...props}\n            ref={ref}\n            component={Component}\n            href={href}\n            target={isExternal ? \"_blank\" : target}\n            rel={computedRel}\n            aria-disabled={isDisabled || undefined}\n            baseClass=\"link\"\n            data-active={isActive || undefined}\n            data-disabled={isDisabled || undefined}\n            sxr={{\n                textDecoration: underline === \"always\" ? \"underline\" : \"none\",\n                cursor: isDisabled ? \"not-allowed\" : \"pointer\",\n                opacity: isDisabled ? 0.6 : 1,\n                \"&:hover\": {\n                    textDecoration:\n                        underline === \"hover\" ? \"underline\" : undefined,\n                },\n                \"&:focus-visible\": {\n                    outline: \"2px solid var(--color-primary)\",\n                    outlineOffset: \"2px\",\n                },\n            }}\n        >\n            {children}\n        </Tag>\n    );\n}\n);\n\nLink.displayName = \"Link\";\n\nexport default Link;"],"names":[],"mappings":";;;;;;AAkBA;;AACI;AAEA;;AACgC;AAC5B;AAAW;AACX;AACJ;AAEA;AACI;;;AAGA;;;;;;AAmBQ;;AAGC;AACD;AACI;AACA;AACH;;AAMjB;AAGA;;"}

package/List/index.cjs

@@ -23,7 +23,7 @@ const List = React.forwardRef((_a, ref) => {
     if (size)
         _p.size = size;
     const p = core.useBreakpointProps(_p);
-    color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
+    color = (_b = p.color) !== null && _b !== void 0 ? _b : "primary";
     variant = (_c = p.variant) !== null && _c !== void 0 ? _c : "fill";
     size = (_d = p.size) !== null && _d !== void 0 ? _d : "medium";
     return (jsxRuntime.jsx(ListContext.ListContext.Provider, { value: { color, variant, size, listItem: slotProps === null || slotProps === void 0 ? void 0 : slotProps.listItem }, children: jsxRuntime.jsx(core.Tag, Object.assign({ component: 'ul' }, props, { baseClass: 'list', sxr: Object.assign({ listStyle: "none", p: 0, m: 0 }, (sx || {})), ref: ref, children: children })) }));

package/List/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/List/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport { ListContext } from './ListContext';\nimport { ListItemProps } from '../ListItem';\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color' | \"size\"> & {\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: Omit<useBreakpointPropsType<UseColorTemplateType>, \"outline\">;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    slotProps?: {\n        listItem?: Omit<ListItemProps, \"children\">\n    }\n}\n\n\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, slotProps, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\n    let [{ sx, color, variant, hoverColor, hoverVariant, size, ...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    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    color = p.color ?? \"brand\"\n    variant = p.variant ?? \"fill\"\n    size = p.size ?? \"medium\"\n\n    return (\n        <ListContext.Provider value={{ color, variant, size, listItem: slotProps?.listItem }}>\n            <Tag\n                component='ul'\n                {...props}\n                baseClass='list'\n                sxr={{\n                    listStyle: \"none\",\n                    p: 0,\n                    m: 0,\n                    ...(sx || {} as any)\n                }}\n                ref={ref}\n            >\n                {children}\n            </Tag>\n        </ListContext.Provider>\n    )\n})\n\nexport default List"],"names":[],"mappings":";;;;;;;;;AAgBA;;;AACI;;AAEA;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAkB;AAClB;AAAU;AACV;AAEA;AACA;AACA;AAEA;AAkBJ;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/List/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport { ListContext } from './ListContext';\nimport { ListItemProps } from '../ListItem';\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color' | \"size\"> & {\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: Omit<useBreakpointPropsType<UseColorTemplateType>, \"outline\">;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    slotProps?: {\n        listItem?: Omit<ListItemProps, \"children\">\n    }\n}\n\n\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, slotProps, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\n    let [{ sx, color, variant, hoverColor, hoverVariant, size, ...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    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    color = p.color ?? \"primary\"\n    variant = p.variant ?? \"fill\"\n    size = p.size ?? \"medium\"\n\n    return (\n        <ListContext.Provider value={{ color, variant, size, listItem: slotProps?.listItem }}>\n            <Tag\n                component='ul'\n                {...props}\n                baseClass='list'\n                sxr={{\n                    listStyle: \"none\",\n                    p: 0,\n                    m: 0,\n                    ...(sx || {} as any)\n                }}\n                ref={ref}\n            >\n                {children}\n            </Tag>\n        </ListContext.Provider>\n    )\n})\n\nexport default List"],"names":[],"mappings":";;;;;;;;;AAgBA;;;AACI;;AAEA;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAkB;AAClB;AAAU;AACV;AAEA;AACA;AACA;AAEA;AAkBJ;;"}

package/List/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { TagComponentType, TagProps, useBreakpointPropsType, UseColorTemplateColor, UseColorTemplateType } from '@xanui/core';
 import { ListItemProps } from '../ListItem/index.js';
 
@@ -10,7 +10,7 @@ type ListProps<T extends TagComponentType = "ul"> = Omit<TagProps<T>, 'color' |
         listItem?: Omit<ListItemProps, "children">;
     };
 };
-declare const List: React.ForwardRefExoticComponent<Omit<ListProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+declare const List: React__default.ForwardRefExoticComponent<Omit<ListProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
 
 export { List as default };
 export type { ListProps };

package/List/index.js

@@ -21,7 +21,7 @@ const List = React.forwardRef((_a, ref) => {
     if (size)
         _p.size = size;
     const p = useBreakpointProps(_p);
-    color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
+    color = (_b = p.color) !== null && _b !== void 0 ? _b : "primary";
     variant = (_c = p.variant) !== null && _c !== void 0 ? _c : "fill";
     size = (_d = p.size) !== null && _d !== void 0 ? _d : "medium";
     return (jsx(ListContext.Provider, { value: { color, variant, size, listItem: slotProps === null || slotProps === void 0 ? void 0 : slotProps.listItem }, children: jsx(Tag, Object.assign({ component: 'ul' }, props, { baseClass: 'list', sxr: Object.assign({ listStyle: "none", p: 0, m: 0 }, (sx || {})), ref: ref, children: children })) }));

package/List/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/List/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport { ListContext } from './ListContext';\nimport { ListItemProps } from '../ListItem';\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color' | \"size\"> & {\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: Omit<useBreakpointPropsType<UseColorTemplateType>, \"outline\">;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    slotProps?: {\n        listItem?: Omit<ListItemProps, \"children\">\n    }\n}\n\n\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, slotProps, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\n    let [{ sx, color, variant, hoverColor, hoverVariant, size, ...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    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    color = p.color ?? \"brand\"\n    variant = p.variant ?? \"fill\"\n    size = p.size ?? \"medium\"\n\n    return (\n        <ListContext.Provider value={{ color, variant, size, listItem: slotProps?.listItem }}>\n            <Tag\n                component='ul'\n                {...props}\n                baseClass='list'\n                sxr={{\n                    listStyle: \"none\",\n                    p: 0,\n                    m: 0,\n                    ...(sx || {} as any)\n                }}\n                ref={ref}\n            >\n                {children}\n            </Tag>\n        </ListContext.Provider>\n    )\n})\n\nexport default List"],"names":[],"mappings":";;;;;;;AAgBA;;;AACI;;AAEA;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAkB;AAClB;AAAU;AACV;AAEA;AACA;AACA;AAEA;AAkBJ;;"}
+{"version":3,"file":"index.js","sources":["../../src/List/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport { ListContext } from './ListContext';\nimport { ListItemProps } from '../ListItem';\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color' | \"size\"> & {\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: Omit<useBreakpointPropsType<UseColorTemplateType>, \"outline\">;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    slotProps?: {\n        listItem?: Omit<ListItemProps, \"children\">\n    }\n}\n\n\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, slotProps, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\n    let [{ sx, color, variant, hoverColor, hoverVariant, size, ...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    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    color = p.color ?? \"primary\"\n    variant = p.variant ?? \"fill\"\n    size = p.size ?? \"medium\"\n\n    return (\n        <ListContext.Provider value={{ color, variant, size, listItem: slotProps?.listItem }}>\n            <Tag\n                component='ul'\n                {...props}\n                baseClass='list'\n                sxr={{\n                    listStyle: \"none\",\n                    p: 0,\n                    m: 0,\n                    ...(sx || {} as any)\n                }}\n                ref={ref}\n            >\n                {children}\n            </Tag>\n        </ListContext.Provider>\n    )\n})\n\nexport default List"],"names":[],"mappings":";;;;;;;AAgBA;;;AACI;;AAEA;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAkB;AAClB;AAAU;AACV;AAEA;AACA;AACA;AAEA;AAkBJ;;"}

package/ListItem/index.cjs

@@ -21,8 +21,8 @@ const ListItem = React.forwardRef((_a, ref) => {
     const p = core.useBreakpointProps(_p);
     const listProps = ListContext.useListContext();
     const template = core.useColorTemplate(listProps.color, listProps.variant);
-    const defaultTemplate = core.useColorTemplate("default", "text");
-    const hoverTemplate = core.useColorTemplate('default', "soft");
+    const defaultTemplate = core.useColorTemplate("surface", "text");
+    const hoverTemplate = core.useColorTemplate('surface', "fill");
     subtitle = p.subtitle;
     startIcon = p.startIcon;
     endIcon = p.endIcon;
@@ -47,17 +47,17 @@ const ListItem = React.forwardRef((_a, ref) => {
             minHeight: 48,
         }
     };
-    const hoversx = Object.assign(Object.assign({}, hoverTemplate.primary), { "& .list-item-icon": {
-            color: hoverTemplate.primary.color
+    const hoversx = Object.assign(Object.assign({}, hoverTemplate.main), { "& .list-item-icon": {
+            color: hoverTemplate.main.color
         }, "& .list-item-text": {
-            color: hoverTemplate.primary.color
+            color: hoverTemplate.main.color
         }, "& .list-item-subtitle": {
-            color: hoverTemplate.primary.color
+            color: hoverTemplate.main.color
         } });
     let sx = {
-        item: selected ? template.primary : defaultTemplate.primary,
+        item: selected ? template.main : defaultTemplate.main,
         text: {
-            color: selected ? template.primary.color : defaultTemplate.primary.color
+            color: selected ? template.main.color : defaultTemplate.main.color
         }
     };
     return (jsxRuntime.jsxs(core.Tag, Object.assign({ component: 'li' }, listProps === null || listProps === void 0 ? void 0 : listProps.listItem, props, { sxr: Object.assign(Object.assign(Object.assign({ alignItems: "center", display: "flex", flexDirection: "row", userSelect: "none", cursor: "pointer", lineHeight: 1.4, whiteSpace: "nowrap", flexShrink: "0" }, sx.item), sizes[size]), { border: 0, "&:hover:not(.list-item-selected)": hoversx }), baseClass: 'list-item', classNames: [{ "list-item-selected": selected }, ...(props.classNames || [])], ref: ref, children: [startIcon && jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.startIcon, { component: "span", baseClass: 'list-item-icon', sxr: Object.assign(Object.assign({}, sx.text), { mr: 1, display: "inline-block" }), children: startIcon })), jsxRuntime.jsxs(core.Tag, { flex: 1, children: [jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { variant: "text", className: 'list-item-text', component: typeof children === "string" || typeof children === "number" ? "p" : "div", sx: sx.text, children: children })), subtitle && jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.subtititle, { variant: "text", fontSize: "button", className: 'list-item-subtitle', component: typeof subtitle === "string" || typeof subtitle === "number" ? "p" : "div", sx: sx.text, children: subtitle }))] }), endIcon && jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.endIcon, { component: "span", baseClass: 'list-item-icon', sxr: {

package/ListItem/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType, useColorTemplate } from '@xanui/core'\nimport Text, { TextProps } from '../Text';\nimport { useListContext } from '../List/ListContext';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n    selected?: boolean;\n    subtitle?: useBreakpointPropsType<string | ReactElement>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n    slotProps?: {\n        content: Omit<TextProps, \"children\">;\n        startIcon: Omit<TagProps, \"children\">;\n        endIcon: Omit<TagProps, \"children\">;\n        subtititle: Omit<TextProps, \"children\">;\n    }\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, slotProps, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\n    let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\n    const _p: any = {}\n    if (subtitle) _p.subtitle = subtitle\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    const p: any = useBreakpointProps(_p)\n    const listProps = useListContext()\n    const template = useColorTemplate(listProps.color, listProps.variant)\n    const defaultTemplate = useColorTemplate(\"default\", \"text\")\n    const hoverTemplate = useColorTemplate('default', \"soft\")\n\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    const size = listProps?.size\n\n    let sizes: any = {\n        small: {\n            fontSize: \"button\",\n            py: 0.5,\n            px: 1,\n            minHeight: 32,\n        },\n        medium: {\n            fontSize: \"text\",\n            py: 1,\n            px: 1.5,\n            minHeight: 40,\n        },\n        large: {\n            fontSize: \"h6\",\n            py: 1.5,\n            px: 2,\n            minHeight: 48,\n        }\n    }\n\n    const hoversx = {\n        ...hoverTemplate.primary,\n        \"& .list-item-icon\": {\n            color: hoverTemplate.primary.color\n        },\n        \"& .list-item-text\": {\n            color: hoverTemplate.primary.color\n        },\n        \"& .list-item-subtitle\": {\n            color: hoverTemplate.primary.color\n        }\n    }\n\n    let sx = {\n        item: selected ? template.primary : defaultTemplate.primary,\n        text: {\n            color: selected ? template.primary.color : defaultTemplate.primary.color\n        }\n    }\n\n    return (\n        <Tag\n            component='li'\n            {...listProps?.listItem}\n            {...props}\n            sxr={{\n                alignItems: \"center\",\n                display: \"flex\",\n                flexDirection: \"row\",\n                userSelect: \"none\",\n                cursor: \"pointer\",\n                lineHeight: 1.4,\n                whiteSpace: \"nowrap\",\n                flexShrink: \"0\",\n                ...sx.item,\n                ...sizes[size as any],\n                border: 0,\n                \"&:hover:not(.list-item-selected)\": hoversx\n            }}\n            baseClass='list-item'\n            classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n            ref={ref}\n        >\n            {startIcon && <Tag\n                {...slotProps?.startIcon}\n                component=\"span\"\n                baseClass='list-item-icon'\n                sxr={{\n                    ...sx.text,\n                    mr: 1,\n                    display: \"inline-block\"\n                }}\n            >{startIcon as any}</Tag>}\n            <Tag flex={1}>\n                <Text\n                    {...slotProps?.content}\n                    variant=\"text\"\n                    className='list-item-text'\n                    component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n                    sx={sx.text}\n                >\n                    {children}\n                </Text>\n                {\n                    subtitle && <Text\n                        {...slotProps?.subtititle}\n                        variant=\"text\"\n                        fontSize=\"button\"\n                        className='list-item-subtitle'\n                        component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n                        sx={sx.text}\n                    >{subtitle as any}</Text>\n                }\n            </Tag>\n            {endIcon && <Tag\n                {...slotProps?.endIcon}\n                component=\"span\"\n                baseClass='list-item-icon'\n                sxr={{\n                    ml: 1,\n                    display: \"inline-block\"\n                }}\n            >{endIcon as any}</Tag>}\n        </Tag>\n    )\n})\n\nexport default ListItem"],"names":[],"mappings":";;;;;;;;;;AAsBA;AAAsE;AAClE;;AAEA;AAAc;AACd;AAAe;AACf;AAAa;AACb;AACA;AACA;;;AAIA;AACA;AACA;;AAGA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;AAGL;AAGQ;AACH;AAEG;AACH;AAEG;AACH;AAGL;AACI;AACA;AACI;AACH;;AAGL;AA2DgB;AACA;AACH;AAIjB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType, useColorTemplate } from '@xanui/core'\nimport Text, { TextProps } from '../Text';\nimport { useListContext } from '../List/ListContext';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n    selected?: boolean;\n    subtitle?: useBreakpointPropsType<string | ReactElement>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n    slotProps?: {\n        content: Omit<TextProps, \"children\">;\n        startIcon: Omit<TagProps, \"children\">;\n        endIcon: Omit<TagProps, \"children\">;\n        subtititle: Omit<TextProps, \"children\">;\n    }\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, slotProps, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\n    let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\n    const _p: any = {}\n    if (subtitle) _p.subtitle = subtitle\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    const p: any = useBreakpointProps(_p)\n    const listProps = useListContext()\n    const template = useColorTemplate(listProps.color, listProps.variant)\n    const defaultTemplate = useColorTemplate(\"surface\", \"text\")\n    const hoverTemplate = useColorTemplate('surface', \"fill\")\n\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    const size = listProps?.size\n\n    let sizes: any = {\n        small: {\n            fontSize: \"button\",\n            py: 0.5,\n            px: 1,\n            minHeight: 32,\n        },\n        medium: {\n            fontSize: \"text\",\n            py: 1,\n            px: 1.5,\n            minHeight: 40,\n        },\n        large: {\n            fontSize: \"h6\",\n            py: 1.5,\n            px: 2,\n            minHeight: 48,\n        }\n    }\n\n    const hoversx = {\n        ...hoverTemplate.main,\n        \"& .list-item-icon\": {\n            color: hoverTemplate.main.color\n        },\n        \"& .list-item-text\": {\n            color: hoverTemplate.main.color\n        },\n        \"& .list-item-subtitle\": {\n            color: hoverTemplate.main.color\n        }\n    }\n\n    let sx = {\n        item: selected ? template.main : defaultTemplate.main,\n        text: {\n            color: selected ? template.main.color : defaultTemplate.main.color\n        }\n    }\n\n    return (\n        <Tag\n            component='li'\n            {...listProps?.listItem}\n            {...props}\n            sxr={{\n                alignItems: \"center\",\n                display: \"flex\",\n                flexDirection: \"row\",\n                userSelect: \"none\",\n                cursor: \"pointer\",\n                lineHeight: 1.4,\n                whiteSpace: \"nowrap\",\n                flexShrink: \"0\",\n                ...sx.item,\n                ...sizes[size as any],\n                border: 0,\n                \"&:hover:not(.list-item-selected)\": hoversx\n            }}\n            baseClass='list-item'\n            classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n            ref={ref}\n        >\n            {startIcon && <Tag\n                {...slotProps?.startIcon}\n                component=\"span\"\n                baseClass='list-item-icon'\n                sxr={{\n                    ...sx.text,\n                    mr: 1,\n                    display: \"inline-block\"\n                }}\n            >{startIcon as any}</Tag>}\n            <Tag flex={1}>\n                <Text\n                    {...slotProps?.content}\n                    variant=\"text\"\n                    className='list-item-text'\n                    component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n                    sx={sx.text}\n                >\n                    {children}\n                </Text>\n                {\n                    subtitle && <Text\n                        {...slotProps?.subtititle}\n                        variant=\"text\"\n                        fontSize=\"button\"\n                        className='list-item-subtitle'\n                        component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n                        sx={sx.text}\n                    >{subtitle as any}</Text>\n                }\n            </Tag>\n            {endIcon && <Tag\n                {...slotProps?.endIcon}\n                component=\"span\"\n                baseClass='list-item-icon'\n                sxr={{\n                    ml: 1,\n                    display: \"inline-block\"\n                }}\n            >{endIcon as any}</Tag>}\n        </Tag>\n    )\n})\n\nexport default ListItem"],"names":[],"mappings":";;;;;;;;;;AAsBA;AAAsE;AAClE;;AAEA;AAAc;AACd;AAAe;AACf;AAAa;AACb;AACA;AACA;;;AAIA;AACA;AACA;;AAGA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;AAGL;AAGQ;AACH;AAEG;AACH;AAEG;AACH;AAGL;AACI;AACA;AACI;AACH;;AAGL;AA2DgB;AACA;AACH;AAIjB;;"}

package/ListItem/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React__default, { ReactElement } from 'react';
 import { TagComponentType, TagProps, useBreakpointPropsType } from '@xanui/core';
 import { TextProps } from '../Text/index.js';
 
@@ -15,7 +15,7 @@ type ListItemProps<T extends TagComponentType = "li"> = TagProps<T> & {
         subtititle: Omit<TextProps, "children">;
     };
 };
-declare const ListItem: React.ForwardRefExoticComponent<Omit<ListItemProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+declare const ListItem: React__default.ForwardRefExoticComponent<Omit<ListItemProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
 
 export { ListItem as default };
 export type { ListItemProps };

package/ListItem/index.js

@@ -19,8 +19,8 @@ const ListItem = React.forwardRef((_a, ref) => {
     const p = useBreakpointProps(_p);
     const listProps = useListContext();
     const template = useColorTemplate(listProps.color, listProps.variant);
-    const defaultTemplate = useColorTemplate("default", "text");
-    const hoverTemplate = useColorTemplate('default', "soft");
+    const defaultTemplate = useColorTemplate("surface", "text");
+    const hoverTemplate = useColorTemplate('surface', "fill");
     subtitle = p.subtitle;
     startIcon = p.startIcon;
     endIcon = p.endIcon;
@@ -45,17 +45,17 @@ const ListItem = React.forwardRef((_a, ref) => {
             minHeight: 48,
         }
     };
-    const hoversx = Object.assign(Object.assign({}, hoverTemplate.primary), { "& .list-item-icon": {
-            color: hoverTemplate.primary.color
+    const hoversx = Object.assign(Object.assign({}, hoverTemplate.main), { "& .list-item-icon": {
+            color: hoverTemplate.main.color
         }, "& .list-item-text": {
-            color: hoverTemplate.primary.color
+            color: hoverTemplate.main.color
         }, "& .list-item-subtitle": {
-            color: hoverTemplate.primary.color
+            color: hoverTemplate.main.color
         } });
     let sx = {
-        item: selected ? template.primary : defaultTemplate.primary,
+        item: selected ? template.main : defaultTemplate.main,
         text: {
-            color: selected ? template.primary.color : defaultTemplate.primary.color
+            color: selected ? template.main.color : defaultTemplate.main.color
         }
     };
     return (jsxs(Tag, Object.assign({ component: 'li' }, listProps === null || listProps === void 0 ? void 0 : listProps.listItem, props, { sxr: Object.assign(Object.assign(Object.assign({ alignItems: "center", display: "flex", flexDirection: "row", userSelect: "none", cursor: "pointer", lineHeight: 1.4, whiteSpace: "nowrap", flexShrink: "0" }, sx.item), sizes[size]), { border: 0, "&:hover:not(.list-item-selected)": hoversx }), baseClass: 'list-item', classNames: [{ "list-item-selected": selected }, ...(props.classNames || [])], ref: ref, children: [startIcon && jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.startIcon, { component: "span", baseClass: 'list-item-icon', sxr: Object.assign(Object.assign({}, sx.text), { mr: 1, display: "inline-block" }), children: startIcon })), jsxs(Tag, { flex: 1, children: [jsx(Text, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { variant: "text", className: 'list-item-text', component: typeof children === "string" || typeof children === "number" ? "p" : "div", sx: sx.text, children: children })), subtitle && jsx(Text, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.subtititle, { variant: "text", fontSize: "button", className: 'list-item-subtitle', component: typeof subtitle === "string" || typeof subtitle === "number" ? "p" : "div", sx: sx.text, children: subtitle }))] }), endIcon && jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.endIcon, { component: "span", baseClass: 'list-item-icon', sxr: {

package/ListItem/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType, useColorTemplate } from '@xanui/core'\nimport Text, { TextProps } from '../Text';\nimport { useListContext } from '../List/ListContext';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n    selected?: boolean;\n    subtitle?: useBreakpointPropsType<string | ReactElement>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n    slotProps?: {\n        content: Omit<TextProps, \"children\">;\n        startIcon: Omit<TagProps, \"children\">;\n        endIcon: Omit<TagProps, \"children\">;\n        subtititle: Omit<TextProps, \"children\">;\n    }\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, slotProps, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\n    let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\n    const _p: any = {}\n    if (subtitle) _p.subtitle = subtitle\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    const p: any = useBreakpointProps(_p)\n    const listProps = useListContext()\n    const template = useColorTemplate(listProps.color, listProps.variant)\n    const defaultTemplate = useColorTemplate(\"default\", \"text\")\n    const hoverTemplate = useColorTemplate('default', \"soft\")\n\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    const size = listProps?.size\n\n    let sizes: any = {\n        small: {\n            fontSize: \"button\",\n            py: 0.5,\n            px: 1,\n            minHeight: 32,\n        },\n        medium: {\n            fontSize: \"text\",\n            py: 1,\n            px: 1.5,\n            minHeight: 40,\n        },\n        large: {\n            fontSize: \"h6\",\n            py: 1.5,\n            px: 2,\n            minHeight: 48,\n        }\n    }\n\n    const hoversx = {\n        ...hoverTemplate.primary,\n        \"& .list-item-icon\": {\n            color: hoverTemplate.primary.color\n        },\n        \"& .list-item-text\": {\n            color: hoverTemplate.primary.color\n        },\n        \"& .list-item-subtitle\": {\n            color: hoverTemplate.primary.color\n        }\n    }\n\n    let sx = {\n        item: selected ? template.primary : defaultTemplate.primary,\n        text: {\n            color: selected ? template.primary.color : defaultTemplate.primary.color\n        }\n    }\n\n    return (\n        <Tag\n            component='li'\n            {...listProps?.listItem}\n            {...props}\n            sxr={{\n                alignItems: \"center\",\n                display: \"flex\",\n                flexDirection: \"row\",\n                userSelect: \"none\",\n                cursor: \"pointer\",\n                lineHeight: 1.4,\n                whiteSpace: \"nowrap\",\n                flexShrink: \"0\",\n                ...sx.item,\n                ...sizes[size as any],\n                border: 0,\n                \"&:hover:not(.list-item-selected)\": hoversx\n            }}\n            baseClass='list-item'\n            classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n            ref={ref}\n        >\n            {startIcon && <Tag\n                {...slotProps?.startIcon}\n                component=\"span\"\n                baseClass='list-item-icon'\n                sxr={{\n                    ...sx.text,\n                    mr: 1,\n                    display: \"inline-block\"\n                }}\n            >{startIcon as any}</Tag>}\n            <Tag flex={1}>\n                <Text\n                    {...slotProps?.content}\n                    variant=\"text\"\n                    className='list-item-text'\n                    component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n                    sx={sx.text}\n                >\n                    {children}\n                </Text>\n                {\n                    subtitle && <Text\n                        {...slotProps?.subtititle}\n                        variant=\"text\"\n                        fontSize=\"button\"\n                        className='list-item-subtitle'\n                        component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n                        sx={sx.text}\n                    >{subtitle as any}</Text>\n                }\n            </Tag>\n            {endIcon && <Tag\n                {...slotProps?.endIcon}\n                component=\"span\"\n                baseClass='list-item-icon'\n                sxr={{\n                    ml: 1,\n                    display: \"inline-block\"\n                }}\n            >{endIcon as any}</Tag>}\n        </Tag>\n    )\n})\n\nexport default ListItem"],"names":[],"mappings":";;;;;;;;AAsBA;AAAsE;AAClE;;AAEA;AAAc;AACd;AAAe;AACf;AAAa;AACb;AACA;AACA;;;AAIA;AACA;AACA;;AAGA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;AAGL;AAGQ;AACH;AAEG;AACH;AAEG;AACH;AAGL;AACI;AACA;AACI;AACH;;AAGL;AA2DgB;AACA;AACH;AAIjB;;"}
+{"version":3,"file":"index.js","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType, useColorTemplate } from '@xanui/core'\nimport Text, { TextProps } from '../Text';\nimport { useListContext } from '../List/ListContext';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n    selected?: boolean;\n    subtitle?: useBreakpointPropsType<string | ReactElement>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n    slotProps?: {\n        content: Omit<TextProps, \"children\">;\n        startIcon: Omit<TagProps, \"children\">;\n        endIcon: Omit<TagProps, \"children\">;\n        subtititle: Omit<TextProps, \"children\">;\n    }\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, slotProps, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\n    let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\n    const _p: any = {}\n    if (subtitle) _p.subtitle = subtitle\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    const p: any = useBreakpointProps(_p)\n    const listProps = useListContext()\n    const template = useColorTemplate(listProps.color, listProps.variant)\n    const defaultTemplate = useColorTemplate(\"surface\", \"text\")\n    const hoverTemplate = useColorTemplate('surface', \"fill\")\n\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    const size = listProps?.size\n\n    let sizes: any = {\n        small: {\n            fontSize: \"button\",\n            py: 0.5,\n            px: 1,\n            minHeight: 32,\n        },\n        medium: {\n            fontSize: \"text\",\n            py: 1,\n            px: 1.5,\n            minHeight: 40,\n        },\n        large: {\n            fontSize: \"h6\",\n            py: 1.5,\n            px: 2,\n            minHeight: 48,\n        }\n    }\n\n    const hoversx = {\n        ...hoverTemplate.main,\n        \"& .list-item-icon\": {\n            color: hoverTemplate.main.color\n        },\n        \"& .list-item-text\": {\n            color: hoverTemplate.main.color\n        },\n        \"& .list-item-subtitle\": {\n            color: hoverTemplate.main.color\n        }\n    }\n\n    let sx = {\n        item: selected ? template.main : defaultTemplate.main,\n        text: {\n            color: selected ? template.main.color : defaultTemplate.main.color\n        }\n    }\n\n    return (\n        <Tag\n            component='li'\n            {...listProps?.listItem}\n            {...props}\n            sxr={{\n                alignItems: \"center\",\n                display: \"flex\",\n                flexDirection: \"row\",\n                userSelect: \"none\",\n                cursor: \"pointer\",\n                lineHeight: 1.4,\n                whiteSpace: \"nowrap\",\n                flexShrink: \"0\",\n                ...sx.item,\n                ...sizes[size as any],\n                border: 0,\n                \"&:hover:not(.list-item-selected)\": hoversx\n            }}\n            baseClass='list-item'\n            classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n            ref={ref}\n        >\n            {startIcon && <Tag\n                {...slotProps?.startIcon}\n                component=\"span\"\n                baseClass='list-item-icon'\n                sxr={{\n                    ...sx.text,\n                    mr: 1,\n                    display: \"inline-block\"\n                }}\n            >{startIcon as any}</Tag>}\n            <Tag flex={1}>\n                <Text\n                    {...slotProps?.content}\n                    variant=\"text\"\n                    className='list-item-text'\n                    component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n                    sx={sx.text}\n                >\n                    {children}\n                </Text>\n                {\n                    subtitle && <Text\n                        {...slotProps?.subtititle}\n                        variant=\"text\"\n                        fontSize=\"button\"\n                        className='list-item-subtitle'\n                        component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n                        sx={sx.text}\n                    >{subtitle as any}</Text>\n                }\n            </Tag>\n            {endIcon && <Tag\n                {...slotProps?.endIcon}\n                component=\"span\"\n                baseClass='list-item-icon'\n                sxr={{\n                    ml: 1,\n                    display: \"inline-block\"\n                }}\n            >{endIcon as any}</Tag>}\n        </Tag>\n    )\n})\n\nexport default ListItem"],"names":[],"mappings":";;;;;;;;AAsBA;AAAsE;AAClE;;AAEA;AAAc;AACd;AAAe;AACf;AAAa;AACb;AACA;AACA;;;AAIA;AACA;AACA;;AAGA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;AAGL;AAGQ;AACH;AAEG;AACH;AAEG;AACH;AAGL;AACI;AACA;AACI;AACH;;AAGL;AA2DgB;AACA;AACH;AAIjB;;"}

package/LoadingBox/index.cjs

@@ -15,7 +15,7 @@ const LoadingBox = React.forwardRef((_a, ref) => {
     if (color)
         _p.color = color;
     const p = core.useBreakpointProps(_p);
-    color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
+    color = (_b = p.color) !== null && _b !== void 0 ? _b : "primary";
     return (jsxRuntime.jsxs(core.Tag, Object.assign({ baseClass: 'loading-box' }, rest, { sxr: Object.assign({ position: "relative", display: "inline-block", overflow: "hidden" }, (rest.sx || {})), ref: ref, children: [loading && jsxRuntime.jsx(core.Tag, { baseClass: "loading-box-container", sxr: {
                     position: "absolute",
                     top: 0,
@@ -26,7 +26,7 @@ const LoadingBox = React.forwardRef((_a, ref) => {
                     display: "flex",
                     justifyContent: "center",
                     alignItems: "center",
-                }, children: jsxRuntime.jsx(index, Object.assign({ color: "brand", hideTrack: true }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.CircleProgress)) }), jsxRuntime.jsx(core.Tag, { disabled: loading, children: children })] })));
+                }, children: jsxRuntime.jsx(index, Object.assign({ color: "primary", hideTrack: true }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.CircleProgress)) }), jsxRuntime.jsx(core.Tag, { disabled: loading, children: children })] })));
 });
 
 module.exports = LoadingBox;

package/LoadingBox/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/LoadingBox/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress';\n\n\nexport type LoadingBoxProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    loading?: boolean;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    slotProps?: {\n        CircleProgress?: Omit<CircleProgressProps, \"value\">\n    }\n\n}\n\nconst LoadingBox = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: LoadingBoxProps<T>, ref: React.Ref<any>) => {\n    let [{ loading, color, slotProps, ...rest }] = useInterface<any>(\"LoadingBox\", props, {})\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color ?? \"brand\"\n\n    return (\n        <Tag\n            baseClass='loading-box'\n            {...rest}\n            sxr={{\n                position: \"relative\",\n                display: \"inline-block\",\n                overflow: \"hidden\",\n                ...((rest as any).sx || {})\n            }}\n            ref={ref}\n        >\n            {loading && <Tag\n                baseClass=\"loading-box-container\"\n                sxr={{\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    right: 0,\n                    bottom: 0,\n                    zIndex: 1,\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                }}\n            >\n                <CircleProgress\n                    color=\"brand\"\n                    hideTrack\n                    {...slotProps?.CircleProgress}\n                />\n            </Tag>}\n            <Tag\n                disabled={loading}\n            >\n                {children}\n            </Tag>\n        </Tag>\n    )\n})\n\nexport default LoadingBox\n\n"],"names":[],"mappings":";;;;;;;;;AAeA;;AAAyE;;;AAGrE;AAAW;AACX;AACA;;AAiBgB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAejB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/LoadingBox/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress';\n\n\nexport type LoadingBoxProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    loading?: boolean;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    slotProps?: {\n        CircleProgress?: Omit<CircleProgressProps, \"value\">\n    }\n\n}\n\nconst LoadingBox = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: LoadingBoxProps<T>, ref: React.Ref<any>) => {\n    let [{ loading, color, slotProps, ...rest }] = useInterface<any>(\"LoadingBox\", props, {})\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color ?? \"primary\"\n\n    return (\n        <Tag\n            baseClass='loading-box'\n            {...rest}\n            sxr={{\n                position: \"relative\",\n                display: \"inline-block\",\n                overflow: \"hidden\",\n                ...((rest as any).sx || {})\n            }}\n            ref={ref}\n        >\n            {loading && <Tag\n                baseClass=\"loading-box-container\"\n                sxr={{\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    right: 0,\n                    bottom: 0,\n                    zIndex: 1,\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                }}\n            >\n                <CircleProgress\n                    color=\"primary\"\n                    hideTrack\n                    {...slotProps?.CircleProgress}\n                />\n            </Tag>}\n            <Tag\n                disabled={loading}\n            >\n                {children}\n            </Tag>\n        </Tag>\n    )\n})\n\nexport default LoadingBox\n\n"],"names":[],"mappings":";;;;;;;;;AAeA;;AAAyE;;;AAGrE;AAAW;AACX;AACA;;AAiBgB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAejB;;"}

package/LoadingBox/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { TagComponentType, TagProps, useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';
 import { CircleProgressProps } from '../CircleProgress/index.js';
 
@@ -9,7 +9,7 @@ type LoadingBoxProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, "co
         CircleProgress?: Omit<CircleProgressProps, "value">;
     };
 };
-declare const LoadingBox: React.ForwardRefExoticComponent<Omit<LoadingBoxProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+declare const LoadingBox: React__default.ForwardRefExoticComponent<Omit<LoadingBoxProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
 
 export { LoadingBox as default };
 export type { LoadingBoxProps };

package/LoadingBox/index.js

@@ -13,7 +13,7 @@ const LoadingBox = React.forwardRef((_a, ref) => {
     if (color)
         _p.color = color;
     const p = useBreakpointProps(_p);
-    color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
+    color = (_b = p.color) !== null && _b !== void 0 ? _b : "primary";
     return (jsxs(Tag, Object.assign({ baseClass: 'loading-box' }, rest, { sxr: Object.assign({ position: "relative", display: "inline-block", overflow: "hidden" }, (rest.sx || {})), ref: ref, children: [loading && jsx(Tag, { baseClass: "loading-box-container", sxr: {
                     position: "absolute",
                     top: 0,
@@ -24,7 +24,7 @@ const LoadingBox = React.forwardRef((_a, ref) => {
                     display: "flex",
                     justifyContent: "center",
                     alignItems: "center",
-                }, children: jsx(CircleProgress, Object.assign({ color: "brand", hideTrack: true }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.CircleProgress)) }), jsx(Tag, { disabled: loading, children: children })] })));
+                }, children: jsx(CircleProgress, Object.assign({ color: "primary", hideTrack: true }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.CircleProgress)) }), jsx(Tag, { disabled: loading, children: children })] })));
 });
 
 export { LoadingBox as default };

package/LoadingBox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/LoadingBox/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress';\n\n\nexport type LoadingBoxProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    loading?: boolean;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    slotProps?: {\n        CircleProgress?: Omit<CircleProgressProps, \"value\">\n    }\n\n}\n\nconst LoadingBox = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: LoadingBoxProps<T>, ref: React.Ref<any>) => {\n    let [{ loading, color, slotProps, ...rest }] = useInterface<any>(\"LoadingBox\", props, {})\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color ?? \"brand\"\n\n    return (\n        <Tag\n            baseClass='loading-box'\n            {...rest}\n            sxr={{\n                position: \"relative\",\n                display: \"inline-block\",\n                overflow: \"hidden\",\n                ...((rest as any).sx || {})\n            }}\n            ref={ref}\n        >\n            {loading && <Tag\n                baseClass=\"loading-box-container\"\n                sxr={{\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    right: 0,\n                    bottom: 0,\n                    zIndex: 1,\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                }}\n            >\n                <CircleProgress\n                    color=\"brand\"\n                    hideTrack\n                    {...slotProps?.CircleProgress}\n                />\n            </Tag>}\n            <Tag\n                disabled={loading}\n            >\n                {children}\n            </Tag>\n        </Tag>\n    )\n})\n\nexport default LoadingBox\n\n"],"names":[],"mappings":";;;;;;;AAeA;;AAAyE;;;AAGrE;AAAW;AACX;AACA;;AAiBgB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAejB;;"}
+{"version":3,"file":"index.js","sources":["../../src/LoadingBox/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress';\n\n\nexport type LoadingBoxProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    loading?: boolean;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    slotProps?: {\n        CircleProgress?: Omit<CircleProgressProps, \"value\">\n    }\n\n}\n\nconst LoadingBox = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: LoadingBoxProps<T>, ref: React.Ref<any>) => {\n    let [{ loading, color, slotProps, ...rest }] = useInterface<any>(\"LoadingBox\", props, {})\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color ?? \"primary\"\n\n    return (\n        <Tag\n            baseClass='loading-box'\n            {...rest}\n            sxr={{\n                position: \"relative\",\n                display: \"inline-block\",\n                overflow: \"hidden\",\n                ...((rest as any).sx || {})\n            }}\n            ref={ref}\n        >\n            {loading && <Tag\n                baseClass=\"loading-box-container\"\n                sxr={{\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    right: 0,\n                    bottom: 0,\n                    zIndex: 1,\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                }}\n            >\n                <CircleProgress\n                    color=\"primary\"\n                    hideTrack\n                    {...slotProps?.CircleProgress}\n                />\n            </Tag>}\n            <Tag\n                disabled={loading}\n            >\n                {children}\n            </Tag>\n        </Tag>\n    )\n})\n\nexport default LoadingBox\n\n"],"names":[],"mappings":";;;;;;;AAeA;;AAAyE;;;AAGrE;AAAW;AACX;AACA;;AAiBgB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAejB;;"}

package/Menu/index.cjs

@@ -83,21 +83,6 @@ const isOffScreen = (menu) => {
     const { x, y, width, height } = menu.getBoundingClientRect();
     return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;
 };
-// Try to place menu and fallback if off-screen
-// const placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {
-//     let pos = computePosition(placement, menu, target);
-//     menu.style.top = pos.top + "px";
-//     menu.style.left = pos.left + "px";
-//     if (isOffScreen(menu)) {
-//         for (const p of placements) {
-//             const fallbackPos = computePosition(p, menu, target);
-//             menu.style.top = fallbackPos.top + "px";
-//             menu.style.left = fallbackPos.left + "px";
-//             if (!isOffScreen(menu)) return p;
-//         }
-//     }
-//     return placement;
-// };
 const placeMenu = (placement, menu, target) => {
     let finalPlacement = placement;
     let pos = computePosition(placement, menu, target);
@@ -120,9 +105,9 @@ const placeMenu = (placement, menu, target) => {
     return finalPlacement;
 };
 const Menu = (_a) => {
-    var _b;
+    var _b, _c;
     var { children, target } = _a, props = tslib.__rest(_a, ["children", "target"]);
-    let [{ onClickOutside, variant, duration, onOpen, onOpened, onClose, onClosed, placement, zIndex, slotProps }] = core.useInterface("Menu", props, {});
+    let [{ onClickOutside, variant, duration, onEnter, onEntered, onExit, onExited, placement, zIndex, slotProps }] = core.useInterface("Menu", props, {});
     const _p = {};
     if (placement)
         _p.placement = placement;
@@ -159,16 +144,16 @@ const Menu = (_a) => {
     }, [closed, target, placement]);
     if (closed)
         return null;
-    return (jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.portal, { children: jsxRuntime.jsx(index$1, { onClickOutside: (e) => {
+    return (jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.portal, { children: jsxRuntime.jsx(index$1, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutSide, { onClickOutside: (e) => {
                 if (target === null || target === void 0 ? void 0 : target.contains(e.target))
                     return;
                 if (e.target !== target) {
                     onClickOutside && onClickOutside(e);
                 }
-            }, ref: menuRef, sx: { position: "fixed", zIndex: 1500 + (zIndex || 0) }, children: jsxRuntime.jsx(core.Transition, Object.assign({ duration: duration !== null && duration !== void 0 ? duration : 200, easing: "fast", variant: variant !== null && variant !== void 0 ? variant : "grow" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: isOpen, onOpen: onOpen, onOpened: onOpened, onClose: onClose, onClosed: () => {
+            }, ref: menuRef, sx: Object.assign({ position: "fixed", zIndex: 1500 + (zIndex || 0) }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutSide) === null || _b === void 0 ? void 0 : _b.sx), children: jsxRuntime.jsx(core.Transition, Object.assign({ duration: duration !== null && duration !== void 0 ? duration : 200, easing: "fast", variant: variant !== null && variant !== void 0 ? variant : "grow" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: isOpen, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: () => {
                     setClosed(true);
-                    onClosed && onClosed();
-                }, children: jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: "menu-content" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { sxr: Object.assign({ overflow: "hidden", bgcolor: "background.primary", shadow: 2, radius: 1, transformOrigin: getTransformOrigin(placed) }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.content) === null || _b === void 0 ? void 0 : _b.sx), children: children })) })) }) })));
+                    onExited && onExited();
+                }, children: jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: "menu-content" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { sxr: Object.assign({ overflow: "hidden", bgcolor: "surface.main", shadow: 2, radius: 1, transformOrigin: getTransformOrigin(placed) }, (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.content) === null || _c === void 0 ? void 0 : _c.sx), children: children })) })) })) })));
 };
 
 module.exports = Menu;

package/Menu/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\nimport Portal, { PortalProps } from \"../Portal\";\nimport ClickOutside from \"../ClickOutside\";\n\nexport type PlacementTypes =\n    | \"top\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"right\"\n    | \"right-top\"\n    | \"right-bottom\"\n    | \"left\"\n    | \"left-top\"\n    | \"left-bottom\";\n\nexport type MenuProps = {\n    children?: ReactNode;\n    target?: HTMLElement;\n    placement?: useBreakpointPropsType<PlacementTypes>;\n    zIndex?: number;\n\n    variant?: TransitionProps['variant'];\n    duration?: TransitionProps['duration'];\n    onOpen?: TransitionProps['onOpen'];\n    onOpened?: TransitionProps['onOpened'];\n    onClose?: TransitionProps['onClose'];\n    onClosed?: TransitionProps['onClosed'];\n\n    onClickOutside?: (e: MouseEvent) => void;\n\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">;\n        portal?: Omit<PortalProps, \"children\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n    };\n};\n\nconst placements: PlacementTypes[] = [\n    \"top\",\n    \"top-left\",\n    \"top-right\",\n    \"bottom\",\n    \"bottom-left\",\n    \"bottom-right\",\n    \"right\",\n    \"right-top\",\n    \"right-bottom\",\n    \"left\",\n    \"left-top\",\n    \"left-bottom\",\n];\n\nconst getTransformOrigin = (placement: PlacementTypes) => {\n    switch (placement) {\n        case \"top\":\n            return \"bottom\";\n        case \"top-left\":\n            return \"bottom left\";\n        case \"top-right\":\n            return \"bottom right\";\n        case \"bottom\":\n            return \"top\";\n        case \"bottom-left\":\n            return \"top left\";\n        case \"bottom-right\":\n            return \"top right\";\n        case \"left\":\n            return \"right\";\n        case \"left-top\":\n            return \"top right\";\n        case \"left-bottom\":\n            return \"bottom right\";\n        case \"right\":\n            return \"left\";\n        case \"right-top\":\n            return \"top left\";\n        case \"right-bottom\":\n            return \"bottom left\";\n        default:\n            return \"top\";\n    }\n};\n\nconst clampToViewport = (menu: HTMLElement, top: number, left: number) => {\n    const { width, height } = menu.getBoundingClientRect();\n\n    const clampedTop = Math.max(0, Math.min(top, window.innerHeight - height));\n    const clampedLeft = Math.max(0, Math.min(left, window.innerWidth - width));\n\n    return { top: clampedTop, left: clampedLeft };\n};\n\n// Compute coordinates for each placement\nconst computePosition = (\n    placement: PlacementTypes,\n    menu: HTMLElement,\n    target: HTMLElement\n) => {\n    const { width: mw, height: mh } = menu.getBoundingClientRect();\n    const {\n        top: tt,\n        left: tl,\n        bottom: tb,\n        right: tr,\n        width: tw,\n        height: th,\n    } = target.getBoundingClientRect();\n\n    const positions: Record<PlacementTypes, { top: number; left: number }> = {\n        \"bottom-left\": { top: tb, left: tl },\n        \"bottom-right\": { top: tb, left: tr - mw },\n        bottom: { top: tb, left: tl + (tw - mw) / 2 },\n\n        \"top-left\": { top: tt - mh, left: tl },\n        \"top-right\": { top: tt - mh, left: tr - mw },\n        top: { top: tt - mh, left: tl + (tw - mw) / 2 },\n\n        left: { top: tt + (th - mh) / 2, left: tl - mw },\n        \"left-top\": { top: tt, left: tl - mw },\n        \"left-bottom\": { top: tb - mh, left: tl - mw },\n\n        right: { top: tt + (th - mh) / 2, left: tr },\n        \"right-top\": { top: tt, left: tr },\n        \"right-bottom\": { top: tb - mh, left: tr },\n    };\n\n    return positions[placement];\n};\n\n\n// Check if menu is off-screen\nconst isOffScreen = (menu: HTMLElement) => {\n    const { x, y, width, height } = menu.getBoundingClientRect();\n    return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\n};\n\n// Try to place menu and fallback if off-screen\n// const placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\n//     let pos = computePosition(placement, menu, target);\n//     menu.style.top = pos.top + \"px\";\n//     menu.style.left = pos.left + \"px\";\n\n//     if (isOffScreen(menu)) {\n//         for (const p of placements) {\n//             const fallbackPos = computePosition(p, menu, target);\n//             menu.style.top = fallbackPos.top + \"px\";\n//             menu.style.left = fallbackPos.left + \"px\";\n//             if (!isOffScreen(menu)) return p;\n//         }\n//     }\n//     return placement;\n// };\n\nconst placeMenu = (\n    placement: PlacementTypes,\n    menu: HTMLElement,\n    target: HTMLElement\n) => {\n    let finalPlacement = placement;\n\n    let pos = computePosition(placement, menu, target);\n    let clamped = clampToViewport(menu, pos.top, pos.left);\n\n    menu.style.top = clamped.top + \"px\";\n    menu.style.left = clamped.left + \"px\";\n\n    // Try better placements\n    if (isOffScreen(menu)) {\n        for (const p of placements) {\n            const fallbackPos = computePosition(p, menu, target);\n            const fallbackClamped = clampToViewport(menu, fallbackPos.top, fallbackPos.left);\n\n            menu.style.top = fallbackClamped.top + \"px\";\n            menu.style.left = fallbackClamped.left + \"px\";\n\n            if (!isOffScreen(menu)) {\n                finalPlacement = p;\n                break;\n            }\n        }\n    }\n\n    return finalPlacement;\n};\n\n\n\nconst Menu = ({ children, target, ...props }: MenuProps) => {\n    let [{ onClickOutside, variant, duration, onOpen, onOpened, onClose, onClosed, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\n    const _p: any = {};\n    if (placement) _p.placement = placement;\n    const p: any = useBreakpointProps(_p);\n    placement = p.placement || \"bottom-left\";\n\n    const isOpen = Boolean(target);\n    const [closed, setClosed] = useState(!isOpen);\n    const [placed, setPlaced] = useState<PlacementTypes>(placement);\n    const menuRef = useRef<HTMLDivElement>(null);\n\n    // Open/close effect\n    useEffect(() => {\n        if (closed && isOpen) setClosed(false);\n    }, [isOpen]);\n\n\n    useEffect(() => {\n        if (!closed && target && menuRef.current) {\n            const updatePosition = () => {\n                if (menuRef.current && target) {\n                    requestAnimationFrame(() => {\n                        const p = placeMenu(placement!, menuRef.current as any, target);\n                        setPlaced(p);\n                    });\n                }\n            };\n\n            updatePosition();\n            window.addEventListener(\"resize\", updatePosition);\n            window.addEventListener(\"scroll\", updatePosition, true);\n\n            return () => {\n                window.removeEventListener(\"resize\", updatePosition);\n                window.removeEventListener(\"scroll\", updatePosition, true);\n            };\n        }\n        return\n    }, [closed, target, placement]);\n\n    if (closed) return null;\n\n    return (\n        <Portal {...slotProps?.portal}>\n            <ClickOutside\n                onClickOutside={(e: MouseEvent) => {\n                    if (target?.contains(e.target as any)) return;\n                    if (e.target !== target) {\n                        onClickOutside && onClickOutside(e);\n                    }\n                }}\n                ref={menuRef}\n                sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\n            >\n                <Transition\n                    duration={duration ?? 200}\n                    easing=\"fast\"\n                    variant={variant ?? \"grow\"}\n                    {...slotProps?.transition}\n                    open={isOpen}\n                    onOpen={onOpen}\n                    onOpened={onOpened}\n                    onClose={onClose}\n                    onClosed={() => {\n                        setClosed(true);\n                        onClosed && onClosed()\n                    }}\n                >\n                    <Tag\n                        baseClass=\"menu-content\"\n                        {...slotProps?.content}\n                        sxr={{\n                            overflow: \"hidden\",\n                            bgcolor: \"background.primary\",\n                            shadow: 2,\n                            radius: 1,\n                            transformOrigin: getTransformOrigin(placed),\n                            ...slotProps?.content?.sx,\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Transition>\n            </ClickOutside>\n        </Portal>\n    );\n};\n\nexport default Menu;\n"],"names":[],"mappings":";;;;;;;;;;AA0CA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;;;;;AAOA;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAQI;;;;AAMA;AACI;;AAEI;;;AAKA;;;;;;AAOR;AACJ;AAIA;;;AACI;;AAEA;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAKR;AAAY;;;;AAOI;AACI;;AAER;;;;AAoChB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\nimport Portal, { PortalProps } from \"../Portal\";\nimport ClickOutside, { ClickOutsideProps } from \"../ClickOutside\";\n\nexport type PlacementTypes =\n    | \"top\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"right\"\n    | \"right-top\"\n    | \"right-bottom\"\n    | \"left\"\n    | \"left-top\"\n    | \"left-bottom\";\n\nexport type MenuProps = {\n    children?: ReactNode;\n    target?: HTMLElement;\n    placement?: useBreakpointPropsType<PlacementTypes>;\n    zIndex?: number;\n\n    variant?: TransitionProps['variant'];\n    duration?: TransitionProps['duration'];\n    onEnter?: TransitionProps['onEnter'];\n    onEntered?: TransitionProps['onEntered'];\n    onExit?: TransitionProps['onExit'];\n    onExited?: TransitionProps['onExited'];\n\n    onClickOutside?: (e: MouseEvent) => void;\n\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">;\n        portal?: Omit<PortalProps, \"children\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n        clickOutSide?: Omit<ClickOutsideProps, \"children\">\n    };\n};\n\nconst placements: PlacementTypes[] = [\n    \"top\",\n    \"top-left\",\n    \"top-right\",\n    \"bottom\",\n    \"bottom-left\",\n    \"bottom-right\",\n    \"right\",\n    \"right-top\",\n    \"right-bottom\",\n    \"left\",\n    \"left-top\",\n    \"left-bottom\",\n];\n\nconst getTransformOrigin = (placement: PlacementTypes) => {\n    switch (placement) {\n        case \"top\":\n            return \"bottom\";\n        case \"top-left\":\n            return \"bottom left\";\n        case \"top-right\":\n            return \"bottom right\";\n        case \"bottom\":\n            return \"top\";\n        case \"bottom-left\":\n            return \"top left\";\n        case \"bottom-right\":\n            return \"top right\";\n        case \"left\":\n            return \"right\";\n        case \"left-top\":\n            return \"top right\";\n        case \"left-bottom\":\n            return \"bottom right\";\n        case \"right\":\n            return \"left\";\n        case \"right-top\":\n            return \"top left\";\n        case \"right-bottom\":\n            return \"bottom left\";\n        default:\n            return \"top\";\n    }\n};\n\nconst clampToViewport = (menu: HTMLElement, top: number, left: number) => {\n    const { width, height } = menu.getBoundingClientRect();\n\n    const clampedTop = Math.max(0, Math.min(top, window.innerHeight - height));\n    const clampedLeft = Math.max(0, Math.min(left, window.innerWidth - width));\n\n    return { top: clampedTop, left: clampedLeft };\n};\n\n// Compute coordinates for each placement\nconst computePosition = (\n    placement: PlacementTypes,\n    menu: HTMLElement,\n    target: HTMLElement\n) => {\n    const { width: mw, height: mh } = menu.getBoundingClientRect();\n    const {\n        top: tt,\n        left: tl,\n        bottom: tb,\n        right: tr,\n        width: tw,\n        height: th,\n    } = target.getBoundingClientRect();\n\n    const positions: Record<PlacementTypes, { top: number; left: number }> = {\n        \"bottom-left\": { top: tb, left: tl },\n        \"bottom-right\": { top: tb, left: tr - mw },\n        bottom: { top: tb, left: tl + (tw - mw) / 2 },\n\n        \"top-left\": { top: tt - mh, left: tl },\n        \"top-right\": { top: tt - mh, left: tr - mw },\n        top: { top: tt - mh, left: tl + (tw - mw) / 2 },\n\n        left: { top: tt + (th - mh) / 2, left: tl - mw },\n        \"left-top\": { top: tt, left: tl - mw },\n        \"left-bottom\": { top: tb - mh, left: tl - mw },\n\n        right: { top: tt + (th - mh) / 2, left: tr },\n        \"right-top\": { top: tt, left: tr },\n        \"right-bottom\": { top: tb - mh, left: tr },\n    };\n\n    return positions[placement];\n};\n\n\n// Check if menu is off-screen\nconst isOffScreen = (menu: HTMLElement) => {\n    const { x, y, width, height } = menu.getBoundingClientRect();\n    return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\n};\n\nconst placeMenu = (\n    placement: PlacementTypes,\n    menu: HTMLElement,\n    target: HTMLElement\n) => {\n    let finalPlacement = placement;\n\n    let pos = computePosition(placement, menu, target);\n    let clamped = clampToViewport(menu, pos.top, pos.left);\n\n    menu.style.top = clamped.top + \"px\";\n    menu.style.left = clamped.left + \"px\";\n\n    // Try better placements\n    if (isOffScreen(menu)) {\n        for (const p of placements) {\n            const fallbackPos = computePosition(p, menu, target);\n            const fallbackClamped = clampToViewport(menu, fallbackPos.top, fallbackPos.left);\n\n            menu.style.top = fallbackClamped.top + \"px\";\n            menu.style.left = fallbackClamped.left + \"px\";\n\n            if (!isOffScreen(menu)) {\n                finalPlacement = p;\n                break;\n            }\n        }\n    }\n\n    return finalPlacement;\n};\n\n\n\nconst Menu = ({ children, target, ...props }: MenuProps) => {\n    let [{ onClickOutside, variant, duration, onEnter, onEntered, onExit, onExited, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\n    const _p: any = {};\n    if (placement) _p.placement = placement;\n    const p: any = useBreakpointProps(_p);\n    placement = p.placement || \"bottom-left\";\n\n    const isOpen = Boolean(target);\n    const [closed, setClosed] = useState(!isOpen);\n    const [placed, setPlaced] = useState<PlacementTypes>(placement);\n    const menuRef = useRef<HTMLDivElement>(null);\n\n    // Open/close effect\n    useEffect(() => {\n        if (closed && isOpen) setClosed(false);\n    }, [isOpen]);\n\n\n    useEffect(() => {\n        if (!closed && target && menuRef.current) {\n            const updatePosition = () => {\n                if (menuRef.current && target) {\n                    requestAnimationFrame(() => {\n                        const p = placeMenu(placement!, menuRef.current as any, target);\n                        setPlaced(p);\n                    });\n                }\n            };\n\n            updatePosition();\n            window.addEventListener(\"resize\", updatePosition);\n            window.addEventListener(\"scroll\", updatePosition, true);\n\n            return () => {\n                window.removeEventListener(\"resize\", updatePosition);\n                window.removeEventListener(\"scroll\", updatePosition, true);\n            };\n        }\n        return\n    }, [closed, target, placement]);\n\n    if (closed) return null;\n\n    return (\n        <Portal {...slotProps?.portal}>\n            <ClickOutside\n                {...slotProps?.clickOutSide}\n                onClickOutside={(e: MouseEvent) => {\n                    if (target?.contains(e.target as any)) return;\n                    if (e.target !== target) {\n                        onClickOutside && onClickOutside(e);\n                    }\n                }}\n                ref={menuRef}\n                sx={{\n                    position: \"fixed\",\n                    zIndex: 1500 + (zIndex || 0),\n                    ...slotProps?.clickOutSide?.sx\n                }}\n            >\n                <Transition\n                    duration={duration ?? 200}\n                    easing=\"fast\"\n                    variant={variant ?? \"grow\"}\n                    {...slotProps?.transition}\n                    open={isOpen}\n                    onEnter={onEnter}\n                    onEntered={onEntered}\n                    onExit={onExit}\n                    onExited={() => {\n                        setClosed(true);\n                        onExited && onExited()\n                    }}\n                >\n                    <Tag\n                        baseClass=\"menu-content\"\n                        {...slotProps?.content}\n                        sxr={{\n                            overflow: \"hidden\",\n                            bgcolor: \"surface.main\",\n                            shadow: 2,\n                            radius: 1,\n                            transformOrigin: getTransformOrigin(placed),\n                            ...slotProps?.content?.sx,\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Transition>\n            </ClickOutside>\n        </Portal>\n    );\n};\n\nexport default Menu;\n"],"names":[],"mappings":";;;;;;;;;;AA2CA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;;;;;AAOA;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;;;AAQI;;;;AAMA;AACI;;AAEI;;;AAKA;;;;;;AAOR;AACJ;AAIA;;;AACI;;AAEA;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAKR;AAAY;AAEZ;;;AAMgB;AACI;;AAER;;;;AAwChB;;"}

package/Menu/index.d.ts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { useBreakpointPropsType, TransitionProps, TagProps } from '@xanui/core';
 import { PortalProps } from '../Portal/index.js';
+import { ClickOutsideProps } from '../ClickOutside/index.js';
 
 type PlacementTypes = "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "right" | "right-top" | "right-bottom" | "left" | "left-top" | "left-bottom";
 type MenuProps = {
@@ -11,15 +12,16 @@ type MenuProps = {
     zIndex?: number;
     variant?: TransitionProps['variant'];
     duration?: TransitionProps['duration'];
-    onOpen?: TransitionProps['onOpen'];
-    onOpened?: TransitionProps['onOpened'];
-    onClose?: TransitionProps['onClose'];
-    onClosed?: TransitionProps['onClosed'];
+    onEnter?: TransitionProps['onEnter'];
+    onEntered?: TransitionProps['onEntered'];
+    onExit?: TransitionProps['onExit'];
+    onExited?: TransitionProps['onExited'];
     onClickOutside?: (e: MouseEvent) => void;
     slotProps?: {
         transition?: Omit<TransitionProps, "open">;
         portal?: Omit<PortalProps, "children">;
         content?: Omit<TagProps<"div">, "children">;
+        clickOutSide?: Omit<ClickOutsideProps, "children">;
     };
 };
 declare const Menu: ({ children, target, ...props }: MenuProps) => react_jsx_runtime.JSX.Element | null;

package/Menu/index.js

@@ -81,21 +81,6 @@ const isOffScreen = (menu) => {
     const { x, y, width, height } = menu.getBoundingClientRect();
     return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;
 };
-// Try to place menu and fallback if off-screen
-// const placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {
-//     let pos = computePosition(placement, menu, target);
-//     menu.style.top = pos.top + "px";
-//     menu.style.left = pos.left + "px";
-//     if (isOffScreen(menu)) {
-//         for (const p of placements) {
-//             const fallbackPos = computePosition(p, menu, target);
-//             menu.style.top = fallbackPos.top + "px";
-//             menu.style.left = fallbackPos.left + "px";
-//             if (!isOffScreen(menu)) return p;
-//         }
-//     }
-//     return placement;
-// };
 const placeMenu = (placement, menu, target) => {
     let finalPlacement = placement;
     let pos = computePosition(placement, menu, target);
@@ -118,9 +103,9 @@ const placeMenu = (placement, menu, target) => {
     return finalPlacement;
 };
 const Menu = (_a) => {
-    var _b;
+    var _b, _c;
     var { children, target } = _a, props = __rest(_a, ["children", "target"]);
-    let [{ onClickOutside, variant, duration, onOpen, onOpened, onClose, onClosed, placement, zIndex, slotProps }] = useInterface("Menu", props, {});
+    let [{ onClickOutside, variant, duration, onEnter, onEntered, onExit, onExited, placement, zIndex, slotProps }] = useInterface("Menu", props, {});
     const _p = {};
     if (placement)
         _p.placement = placement;
@@ -157,16 +142,16 @@ const Menu = (_a) => {
     }, [closed, target, placement]);
     if (closed)
         return null;
-    return (jsx(Portal, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.portal, { children: jsx(ClickOutside, { onClickOutside: (e) => {
+    return (jsx(Portal, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.portal, { children: jsx(ClickOutside, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutSide, { onClickOutside: (e) => {
                 if (target === null || target === void 0 ? void 0 : target.contains(e.target))
                     return;
                 if (e.target !== target) {
                     onClickOutside && onClickOutside(e);
                 }
-            }, ref: menuRef, sx: { position: "fixed", zIndex: 1500 + (zIndex || 0) }, children: jsx(Transition, Object.assign({ duration: duration !== null && duration !== void 0 ? duration : 200, easing: "fast", variant: variant !== null && variant !== void 0 ? variant : "grow" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: isOpen, onOpen: onOpen, onOpened: onOpened, onClose: onClose, onClosed: () => {
+            }, ref: menuRef, sx: Object.assign({ position: "fixed", zIndex: 1500 + (zIndex || 0) }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutSide) === null || _b === void 0 ? void 0 : _b.sx), children: jsx(Transition, Object.assign({ duration: duration !== null && duration !== void 0 ? duration : 200, easing: "fast", variant: variant !== null && variant !== void 0 ? variant : "grow" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: isOpen, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: () => {
                     setClosed(true);
-                    onClosed && onClosed();
-                }, children: jsx(Tag, Object.assign({ baseClass: "menu-content" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { sxr: Object.assign({ overflow: "hidden", bgcolor: "background.primary", shadow: 2, radius: 1, transformOrigin: getTransformOrigin(placed) }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.content) === null || _b === void 0 ? void 0 : _b.sx), children: children })) })) }) })));
+                    onExited && onExited();
+                }, children: jsx(Tag, Object.assign({ baseClass: "menu-content" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { sxr: Object.assign({ overflow: "hidden", bgcolor: "surface.main", shadow: 2, radius: 1, transformOrigin: getTransformOrigin(placed) }, (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.content) === null || _c === void 0 ? void 0 : _c.sx), children: children })) })) })) })));
 };
 
 export { Menu as default };