@xanui/ui 1.1.26 → 1.1.28

package/ListItem/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport Text from '../Text';\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}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, ...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\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n\n    return (\n        <Tag\n            component='li'\n            {...props}\n            sxr={{\n                alignItems: \"center\",\n                display: \"flex\",\n                flexDirection: \"row\",\n                userSelect: \"none\",\n                cursor: \"pointer\",\n                lineHeight: 1.4,\n                p: 1,\n                whiteSpace: \"nowrap\",\n                flexShrink: \"0\",\n            }}\n            baseClass='list-item'\n            classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n            ref={ref}\n        >\n            {startIcon && <Tag mr={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{startIcon as any}</Tag>}\n            <Tag flex={1}>\n                <Text\n                    variant=\"text\"\n                    className='list-item-text'\n                    component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n                >\n                    {children}\n                </Text>\n                {\n                    subtitle && <Text\n                        variant=\"text\"\n                        fontSize=\"button\"\n                        className='list-item-subtitle'\n                        component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n                    >{subtitle as any}</Text>\n                }\n            </Tag>\n            {endIcon && <Tag ml={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{endIcon as any}</Tag>}\n        </Tag>\n    )\n})\n\nexport default ListItem"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAaA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAoC,EAAqE,EAAE,GAAmB,KAAI;AAA9F,IAAA,IAAA,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAA,GAAA,EAA6B,EAAxB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAjD,CAAA,UAAA,EAAA,WAAA,EAAA,SAAA,EAAA,UAAA,CAAmD,CAAF;AACnH,IAAA,IAAI,OAA2B,YAAY,CAAM,UAAU,EAAE,IAAI,EAAE,EAAE,CAAC,EAAjE,EAAE,QAAQ,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAApB,CAAA,UAAA,CAAsB,CAA2C;IACtE,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,QAAQ;AAAE,QAAA,EAAE,CAAC,QAAQ,GAAG,QAAQ;AACpC,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AAErC,IAAA,QAAQ,GAAG,CAAC,CAAC,QAAQ;AACrB,IAAA,SAAS,GAAG,CAAC,CAAC,SAAS;AACvB,IAAA,OAAO,GAAG,CAAC,CAAC,OAAO;IAEnB,QACIA,IAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,IAAI,EAAA,EACV,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,UAAU,EAAE,GAAG;AACf,YAAA,CAAC,EAAE,CAAC;AACJ,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,UAAU,EAAE,GAAG;AAClB,SAAA,EACD,SAAS,EAAC,WAAW,EACrB,UAAU,EAAE,CAAC,EAAE,oBAAoB,EAAE,QAAmB,EAAE,EAAE,IAAI,KAAK,CAAC,UAAU,IAAI,EAAE,CAAC,CAAC,EACxF,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAEP,SAAS,IAAIC,GAAA,CAAC,GAAG,EAAA,EAAC,EAAE,EAAE,CAAC,EAAE,SAAS,EAAC,MAAM,EAAC,OAAO,EAAC,cAAc,EAAC,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAAE,SAAgB,EAAA,CAAO,EACrHD,IAAA,CAAC,GAAG,EAAA,EAAC,IAAI,EAAE,CAAC,EAAA,QAAA,EAAA,CACRC,GAAA,CAAC,IAAI,IACD,OAAO,EAAC,MAAM,EACd,SAAS,EAAC,gBAAgB,EAC1B,SAAS,EAAE,OAAO,QAAQ,KAAK,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,GAAG,GAAG,GAAG,KAAK,EAAA,QAAA,EAEpF,QAAQ,EAAA,CACN,EAEH,QAAQ,IAAIA,GAAA,CAAC,IAAI,IACb,OAAO,EAAC,MAAM,EACd,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAC,oBAAoB,EAC9B,SAAS,EAAE,OAAO,QAAQ,KAAK,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,GAAG,GAAG,GAAG,KAAK,EAAA,QAAA,EACvF,QAAe,EAAA,CAAQ,IAE3B,EACL,OAAO,IAAIA,GAAA,CAAC,GAAG,EAAA,EAAC,EAAE,EAAE,CAAC,EAAE,SAAS,EAAC,MAAM,EAAC,OAAO,EAAC,cAAc,EAAC,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAAE,OAAc,EAAA,CAAO,CAAA,EAAA,CAAA,CAC/G;AAEd,CAAC;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport Text 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\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, size, ...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    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n    const ctx = useListContext()\n\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    size = p.size ?? ctx?.size ?? \"medium\"\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    return (\n        <Tag\n            component='li'\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                ...sizes[size as any]\n            }}\n            baseClass='list-item'\n            classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n            ref={ref}\n        >\n            {startIcon && <Tag mr={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{startIcon as any}</Tag>}\n            <Tag flex={1}>\n                <Text\n                    variant=\"text\"\n                    className='list-item-text'\n                    component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n                >\n                    {children}\n                </Text>\n                {\n                    subtitle && <Text\n                        variant=\"text\"\n                        fontSize=\"button\"\n                        className='list-item-subtitle'\n                        component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n                    >{subtitle as any}</Text>\n                }\n            </Tag>\n            {endIcon && <Tag ml={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{endIcon as any}</Tag>}\n        </Tag>\n    )\n})\n\nListItem.displayName = \"ListItem\"\n\nexport default ListItem"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/Menu/index.js

@@ -134,6 +134,8 @@ const Menu = (_a) => {
     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) => {
+                if (target === null || target === void 0 ? void 0 : target.contains(e.target))
+                    return;
                 if (e.target !== target) {
                     onClickOutside && onClickOutside(e);
                 }

package/Menu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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    onClickOutside?: (e: MouseEvent) => void;\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\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\nconst 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 Menu = ({ children, target, ...props }: MenuProps) => {\n    let [{ onClickOutside, 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\n    if (closed) return null;\n\n    return (\n        <Portal {...slotProps?.portal}>\n            <ClickOutside\n                onClickOutside={(e: MouseEvent) => {\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={200}\n                    easing=\"fast\"\n                    variant=\"grow\"\n                    {...slotProps?.transition}\n                    open={isOpen}\n                    onClosed={() => {\n                        setClosed(true);\n                        slotProps?.transition?.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":";;;;;;;;;;AAiCA;;;;;;;;;;;;;;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;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;;;;AAKI;AACI;;;;AAII;AAAwB;;;AAGhC;AACJ;AAEA;;;;;AAGI;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAMR;AAAY;;AAMI;AACI;;;;;;;AAmCxB;;"}
+{"version":3,"file":"index.js","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    onClickOutside?: (e: MouseEvent) => void;\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\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\nconst 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 Menu = ({ children, target, ...props }: MenuProps) => {\n    let [{ onClickOutside, 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\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={200}\n                    easing=\"fast\"\n                    variant=\"grow\"\n                    {...slotProps?.transition}\n                    open={isOpen}\n                    onClosed={() => {\n                        setClosed(true);\n                        slotProps?.transition?.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":";;;;;;;;;;AAiCA;;;;;;;;;;;;;;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;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;;;;AAKI;AACI;;;;AAII;AAAwB;;;AAGhC;AACJ;AAEA;;;;;AAGI;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAMR;AAAY;;;;AAOI;AACI;;;;;;;AAmCxB;;"}

package/Menu/index.mjs

@@ -132,6 +132,8 @@ const Menu = (_a) => {
     if (closed)
         return null;
     return (jsx(Portal, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.portal, { children: jsx(ClickOutside, { onClickOutside: (e) => {
+                if (target === null || target === void 0 ? void 0 : target.contains(e.target))
+                    return;
                 if (e.target !== target) {
                     onClickOutside && onClickOutside(e);
                 }

package/Menu/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","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    onClickOutside?: (e: MouseEvent) => void;\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\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\nconst 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 Menu = ({ children, target, ...props }: MenuProps) => {\n    let [{ onClickOutside, 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\n    if (closed) return null;\n\n    return (\n        <Portal {...slotProps?.portal}>\n            <ClickOutside\n                onClickOutside={(e: MouseEvent) => {\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={200}\n                    easing=\"fast\"\n                    variant=\"grow\"\n                    {...slotProps?.transition}\n                    open={isOpen}\n                    onClosed={() => {\n                        setClosed(true);\n                        slotProps?.transition?.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":";;;;;;;;AAiCA;;;;;;;;;;;;;;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;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;;;;AAKI;AACI;;;;AAII;AAAwB;;;AAGhC;AACJ;AAEA;;;;;AAGI;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAMR;AAAY;;AAMI;AACI;;;;;;;AAmCxB;;"}
+{"version":3,"file":"index.mjs","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    onClickOutside?: (e: MouseEvent) => void;\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\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\nconst 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 Menu = ({ children, target, ...props }: MenuProps) => {\n    let [{ onClickOutside, 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\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={200}\n                    easing=\"fast\"\n                    variant=\"grow\"\n                    {...slotProps?.transition}\n                    open={isOpen}\n                    onClosed={() => {\n                        setClosed(true);\n                        slotProps?.transition?.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":";;;;;;;;AAiCA;;;;;;;;;;;;;;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;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;;;;AAKI;AACI;;;;AAII;AAAwB;;;AAGhC;AACJ;AAEA;;;;;AAGI;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAMR;AAAY;;;;AAOI;AACI;;;;;;;AAmCxB;;"}

package/Paper/index.js

@@ -7,8 +7,8 @@ var core = require('@xanui/core');
 
 const Paper = React.forwardRef((_a, ref) => {
     var { children } = _a, rest = tslib.__rest(_a, ["children"]);
-    let [props] = core.useInterface("default", rest, {});
-    return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, { sxr: Object.assign({ radius: 1, p: 1.5, bgcolor: "background.secondary", color: "text.primary" }, props === null || props === void 0 ? void 0 : props.sx), baseClass: 'default', ref: ref, children: children })));
+    let [props] = core.useInterface("Paper", rest, {});
+    return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, { sxr: Object.assign({ shadow: 1, radius: 1, p: 1.5, bgcolor: "background.secondary", color: "text.primary" }, props === null || props === void 0 ? void 0 : props.sx), baseClass: 'paper', ref: ref, children: children })));
 });
 
 module.exports = Paper;

package/Paper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Paper/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface } from '@xanui/core';\n\nexport type PaperProps<T extends TagComponentType = \"div\"> = TagProps<T>\n\nconst Paper = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: PaperProps<T>, ref?: React.Ref<any>) => {\n    let [props] = useInterface<any>(\"default\", rest, {})\n    return (\n        <Tag\n            {...props}\n            sxr={{\n                radius: 1,\n                p: 1.5,\n                bgcolor: \"background.secondary\",\n                color: \"text.primary\",\n                ...props?.sx\n            }}\n            baseClass='default'\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Paper\n"],"names":["__rest","useInterface","_jsx","Tag"],"mappings":";;;;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAoC,EAAE,GAAoB,KAAI;AAA9D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACnF,IAAA,IAAI,CAAC,KAAK,CAAC,GAAGC,iBAAY,CAAM,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC;AACpD,IAAA,QACIC,cAAA,CAACC,QAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACC,MAAM,EAAE,CAAC,EACT,CAAC,EAAE,GAAG,EACN,OAAO,EAAE,sBAAsB,EAC/B,KAAK,EAAE,cAAc,EAAA,EAClB,KAAK,KAAA,IAAA,IAAL,KAAK,uBAAL,KAAK,CAAE,EAAE,CAAA,EAEhB,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,YACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/Paper/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface } from '@xanui/core';\n\nexport type PaperProps<T extends TagComponentType = \"div\"> = TagProps<T>\n\nconst Paper = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: PaperProps<T>, ref?: React.Ref<any>) => {\n    let [props] = useInterface<any>(\"Paper\", rest, {})\n    return (\n        <Tag\n            {...props}\n            sxr={{\n                shadow: 1,\n                radius: 1,\n                p: 1.5,\n                bgcolor: \"background.secondary\",\n                color: \"text.primary\",\n                ...props?.sx\n            }}\n            baseClass='paper'\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Paper\n"],"names":["__rest","useInterface","_jsx","Tag"],"mappings":";;;;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAoC,EAAE,GAAoB,KAAI;AAA9D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACnF,IAAA,IAAI,CAAC,KAAK,CAAC,GAAGC,iBAAY,CAAM,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC;IAClD,QACIC,eAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,EAAA,EACT,GAAG,kBACC,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,EACT,CAAC,EAAE,GAAG,EACN,OAAO,EAAE,sBAAsB,EAC/B,KAAK,EAAE,cAAc,EAAA,EAClB,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,EAAE,CAAA,EAEhB,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}

package/Paper/index.mjs

@@ -5,8 +5,8 @@ import { useInterface, Tag } from '@xanui/core';
 
 const Paper = React.forwardRef((_a, ref) => {
     var { children } = _a, rest = __rest(_a, ["children"]);
-    let [props] = useInterface("default", rest, {});
-    return (jsx(Tag, Object.assign({}, props, { sxr: Object.assign({ radius: 1, p: 1.5, bgcolor: "background.secondary", color: "text.primary" }, props === null || props === void 0 ? void 0 : props.sx), baseClass: 'default', ref: ref, children: children })));
+    let [props] = useInterface("Paper", rest, {});
+    return (jsx(Tag, Object.assign({}, props, { sxr: Object.assign({ shadow: 1, radius: 1, p: 1.5, bgcolor: "background.secondary", color: "text.primary" }, props === null || props === void 0 ? void 0 : props.sx), baseClass: 'paper', ref: ref, children: children })));
 });
 
 export { Paper as default };

package/Paper/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Paper/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface } from '@xanui/core';\n\nexport type PaperProps<T extends TagComponentType = \"div\"> = TagProps<T>\n\nconst Paper = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: PaperProps<T>, ref?: React.Ref<any>) => {\n    let [props] = useInterface<any>(\"default\", rest, {})\n    return (\n        <Tag\n            {...props}\n            sxr={{\n                radius: 1,\n                p: 1.5,\n                bgcolor: \"background.secondary\",\n                color: \"text.primary\",\n                ...props?.sx\n            }}\n            baseClass='default'\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Paper\n"],"names":["_jsx"],"mappings":";;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAoC,EAAE,GAAoB,KAAI;AAA9D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACnF,IAAA,IAAI,CAAC,KAAK,CAAC,GAAG,YAAY,CAAM,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC;AACpD,IAAA,QACIA,GAAA,CAAC,GAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACC,MAAM,EAAE,CAAC,EACT,CAAC,EAAE,GAAG,EACN,OAAO,EAAE,sBAAsB,EAC/B,KAAK,EAAE,cAAc,EAAA,EAClB,KAAK,KAAA,IAAA,IAAL,KAAK,uBAAL,KAAK,CAAE,EAAE,CAAA,EAEhB,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,YACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/Paper/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface } from '@xanui/core';\n\nexport type PaperProps<T extends TagComponentType = \"div\"> = TagProps<T>\n\nconst Paper = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: PaperProps<T>, ref?: React.Ref<any>) => {\n    let [props] = useInterface<any>(\"Paper\", rest, {})\n    return (\n        <Tag\n            {...props}\n            sxr={{\n                shadow: 1,\n                radius: 1,\n                p: 1.5,\n                bgcolor: \"background.secondary\",\n                color: \"text.primary\",\n                ...props?.sx\n            }}\n            baseClass='paper'\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Paper\n"],"names":["_jsx"],"mappings":";;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAoC,EAAE,GAAoB,KAAI;AAA9D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACnF,IAAA,IAAI,CAAC,KAAK,CAAC,GAAG,YAAY,CAAM,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC;IAClD,QACIA,IAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,EAAA,EACT,GAAG,kBACC,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,EACT,CAAC,EAAE,GAAG,EACN,OAAO,EAAE,sBAAsB,EAC/B,KAAK,EAAE,cAAc,EAAA,EAClB,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,EAAE,CAAA,EAEhB,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}

package/Select/index.d.ts

@@ -3,19 +3,11 @@ import { InputProps } from '../Input/index.js';
 import { ListProps } from '../List/index.js';
 import { MenuProps } from '../Menu/index.js';
 import { OptionProps } from '../Option/index.js';
-import { useBreakpointPropsType, UseColorTemplateColor, UseColorTemplateType } from '@xanui/core';
 
-type SelectProps = {
+type SelectProps = Omit<InputProps, "onChange" | "value" | "children" | "slotProps"> & {
     value?: string | number;
     onChange?: (value: string | number) => void;
     children: ReactElement<OptionProps> | ReactElement<OptionProps>[];
-    placeholder?: useBreakpointPropsType<string>;
-    color?: useBreakpointPropsType<UseColorTemplateColor>;
-    variant?: useBreakpointPropsType<UseColorTemplateType>;
-    fullWidth?: boolean;
-    name?: string;
-    error?: InputProps['error'];
-    helperText?: InputProps['helperText'];
     refs?: {
         input?: React.Ref<any>;
         menu?: React.Ref<any>;
@@ -27,7 +19,7 @@ type SelectProps = {
         list?: Omit<ListProps, "children">;
     };
 };
-declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<any>>;
+declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<any>>;
 
 export { Select as default };
 export type { SelectProps };

package/Select/index.js

@@ -15,7 +15,7 @@ var core = require('@xanui/core');
 const Select = React.forwardRef((_a, ref) => {
     var _b, _c, _d, _e, _f, _g;
     var { onChange, value, children, error, helperText, name, refs } = _a, props = tslib.__rest(_a, ["onChange", "value", "children", "error", "helperText", "name", "refs"]);
-    let [{ slotProps, color, variant, fullWidth, placeholder }] = core.useInterface("Select", props, {});
+    let [_h] = core.useInterface("Select", props, {}), { slotProps, color, variant } = _h, inputProps = tslib.__rest(_h, ["slotProps", "color", "variant"]);
     color !== null && color !== void 0 ? color : (color = "brand");
     variant !== null && variant !== void 0 ? variant : (variant = "fill");
     const [target, setTarget] = React.useState();
@@ -42,7 +42,7 @@ const Select = React.forwardRef((_a, ref) => {
     }, [children, value]);
     const mergeRefs = core.useMergeRefs(ref, conRef);
     const toggleMenu = () => setTarget(target ? null : conRef.current);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index, Object.assign({ ref: mergeRefs, color: color, variant: variant === "soft" ? "fill" : variant, endIcon: jsxRuntime.jsxs(index$1, { flexDirection: "row", component: "span", children: [" ", (target ? jsxRuntime.jsx(UpIcon, {}) : jsxRuntime.jsx(DownIcon, {}))] }), readOnly: true, value: typeof selectedProps.children === 'string' ? selectedProps.children : value, cursor: "pointer", userSelect: "none", startIcon: selectedProps.startIcon, focused: !!target, placeholder: placeholder, fullWidth: fullWidth, error: error, helperText: helperText, name: name }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { refs: Object.assign({ input: refs === null || refs === void 0 ? void 0 : refs.input }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _b === void 0 ? void 0 : _b.refs), slotProps: {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index, Object.assign({ ref: mergeRefs, color: color, variant: variant === "soft" ? "fill" : variant, endIcon: jsxRuntime.jsxs(index$1, { flexDirection: "row", component: "span", children: [" ", (target ? jsxRuntime.jsx(UpIcon, {}) : jsxRuntime.jsx(DownIcon, {}))] }), readOnly: true, value: typeof selectedProps.children === 'string' ? selectedProps.children : value, cursor: "pointer", userSelect: "none", startIcon: selectedProps.startIcon, focused: !!target, error: error, helperText: helperText, name: name }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, inputProps, { refs: Object.assign({ input: refs === null || refs === void 0 ? void 0 : refs.input }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _b === void 0 ? void 0 : _b.refs), slotProps: {
                     rootContainer: Object.assign(Object.assign({ cursor: "pointer", userSelect: "none" }, (((_d = (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _c === void 0 ? void 0 : _c.slotProps) === null || _d === void 0 ? void 0 : _d.container) || {})), { onClick: () => {
                             if (!target) {
                                 toggleMenu();
@@ -52,7 +52,7 @@ const Select = React.forwardRef((_a, ref) => {
                     if (conRef.current.contains(e.target))
                         return;
                     toggleMenu();
-                }, children: jsxRuntime.jsx(index$3, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.list }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant, children: childs })) }))] }));
+                }, children: jsxRuntime.jsx(index$3, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.list }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant === "outline" ? "fill" : variant, children: childs })) }))] }));
 });
 
 module.exports = Select;

package/Select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { UseColorTemplateColor, UseColorTemplateType, useInterface, useBreakpointPropsType, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = {\n    value?: string | number;\n    onChange?: (value: string | number) => void;\n    children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n    placeholder?: useBreakpointPropsType<string>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    fullWidth?: boolean;\n    name?: string;\n    error?: InputProps['error'];\n    helperText?: InputProps['helperText'];\n\n    refs?: {\n        input?: React.Ref<any>;\n        menu?: React.Ref<any>;\n        list?: React.Ref<any>;\n    };\n    slotProps?: {\n        menu?: Omit<MenuProps, 'children' | 'target'>;\n        input?: Omit<InputProps, \"onChange\" | \"value\">;\n        list?: Omit<ListProps, \"children\">\n    }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n    let [{ slotProps, color, variant, fullWidth, placeholder }] = useInterface<any>(\"Select\", props, {})\n    color ??= \"brand\"\n    variant ??= \"fill\"\n    const [target, setTarget] = useState<any>()\n    const conRef = useRef(null)\n    const { childs, selectedProps } = useMemo(() => {\n        let sProps: any = {}\n        const c = Children.map(children, (child: any) => {\n            let selected = child.props.value === value\n            if (selected) sProps = child.props\n            return cloneElement(child, {\n                value: undefined,\n                selected,\n                onClick: () => {\n                    setTarget(null)\n                    onChange && onChange(child.props.value)\n                }\n            })\n        })\n        return {\n            childs: c,\n            selectedProps: sProps as OptionProps\n        }\n    }, [children, value])\n\n    const mergeRefs = useMergeRefs(ref, conRef)\n    const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n    return (\n        <>\n            <Input\n                ref={mergeRefs}\n                color={color}\n                variant={variant === \"soft\" ? \"fill\" : variant}\n                endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n                readOnly\n                value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n                cursor=\"pointer\"\n                userSelect=\"none\"\n                startIcon={selectedProps.startIcon}\n                focused={!!target}\n                placeholder={placeholder}\n                fullWidth={fullWidth}\n                error={error}\n                helperText={helperText}\n                name={name}\n                {...slotProps?.input}\n                refs={{\n                    input: refs?.input,\n                    ...slotProps?.input?.refs\n                }}\n                slotProps={{\n                    rootContainer: {\n                        cursor: \"pointer\",\n                        userSelect: \"none\",\n                        ...(slotProps?.input?.slotProps?.container || {}),\n                        onClick: () => {\n                            if (!target) {\n                                toggleMenu()\n                            }\n                        },\n                    }\n                }}\n            />\n            <Menu\n                ref={refs?.menu}\n                target={target}\n                placement=\"bottom-left\"\n                {...slotProps?.menu}\n                slotProps={{\n                    ...slotProps?.menu?.slotProps,\n                    content: {\n                        mt: .5,\n                        ...slotProps?.menu?.content,\n                        width: conRef && (conRef?.current as any)?.clientWidth,\n                    }\n                }}\n                onClickOutside={(e) => {\n                    if ((conRef.current as any).contains(e.target)) return;\n                    toggleMenu()\n                }}\n            >\n                <List\n                    ref={refs?.list}\n                    {...slotProps?.list}\n                    color={color}\n                    variant={variant}\n                >\n                    {childs}\n                </List>\n            </Menu>\n        </>\n    )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;;;AAqCA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAwBgB;;AAMY;;AAER;AAEP;;;AAiBG;AACJ;AAahB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { useInterface, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = Omit<InputProps, \"onChange\" | \"value\" | \"children\" | \"slotProps\"> & {\n    value?: string | number;\n    onChange?: (value: string | number) => void;\n    children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n\n    refs?: {\n        input?: React.Ref<any>;\n        menu?: React.Ref<any>;\n        list?: React.Ref<any>;\n    };\n    slotProps?: {\n        menu?: Omit<MenuProps, 'children' | 'target'>;\n        input?: Omit<InputProps, \"onChange\" | \"value\">;\n        list?: Omit<ListProps, \"children\">\n    }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n    let [{ slotProps, color, variant, ...inputProps }] = useInterface<any>(\"Select\", props, {})\n    color ??= \"brand\"\n    variant ??= \"fill\"\n    const [target, setTarget] = useState<any>()\n    const conRef = useRef(null)\n    const { childs, selectedProps } = useMemo(() => {\n        let sProps: any = {}\n        const c = Children.map(children, (child: any) => {\n            let selected = child.props.value === value\n            if (selected) sProps = child.props\n            return cloneElement(child, {\n                value: undefined,\n                selected,\n                onClick: () => {\n                    setTarget(null)\n                    onChange && onChange(child.props.value)\n                }\n            })\n        })\n        return {\n            childs: c,\n            selectedProps: sProps as OptionProps\n        }\n    }, [children, value])\n\n    const mergeRefs = useMergeRefs(ref, conRef)\n    const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n    return (\n        <>\n            <Input\n                ref={mergeRefs}\n                color={color}\n                variant={variant === \"soft\" ? \"fill\" : variant}\n                endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n                readOnly\n                value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n                cursor=\"pointer\"\n                userSelect=\"none\"\n                startIcon={selectedProps.startIcon}\n                focused={!!target}\n                error={error}\n                helperText={helperText}\n                name={name}\n                {...slotProps?.input}\n                {...inputProps}\n                refs={{\n                    input: refs?.input,\n                    ...slotProps?.input?.refs\n                }}\n                slotProps={{\n                    rootContainer: {\n                        cursor: \"pointer\",\n                        userSelect: \"none\",\n                        ...(slotProps?.input?.slotProps?.container || {}),\n                        onClick: () => {\n                            if (!target) {\n                                toggleMenu()\n                            }\n                        },\n                    }\n                }}\n            />\n            <Menu\n                ref={refs?.menu}\n                target={target}\n                placement=\"bottom-left\"\n                {...slotProps?.menu}\n                slotProps={{\n                    ...slotProps?.menu?.slotProps,\n                    content: {\n                        mt: .5,\n                        ...slotProps?.menu?.content,\n                        width: conRef && (conRef?.current as any)?.clientWidth,\n                    }\n                }}\n                onClickOutside={(e) => {\n                    if ((conRef.current as any).contains(e.target)) return;\n                    toggleMenu()\n                }}\n            >\n                <List\n                    ref={refs?.list}\n                    {...slotProps?.list}\n                    color={color}\n                    variant={variant === \"outline\" ? \"fill\" : variant}\n                >\n                    {childs}\n                </List>\n            </Menu>\n        </>\n    )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;;;AA8BA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAuBgB;;AAMY;;AAER;AAEP;;;AAiBG;;AAcpB;;"}

package/Select/index.mjs

@@ -13,7 +13,7 @@ import { useInterface, useMergeRefs } from '@xanui/core';
 const Select = React.forwardRef((_a, ref) => {
     var _b, _c, _d, _e, _f, _g;
     var { onChange, value, children, error, helperText, name, refs } = _a, props = __rest(_a, ["onChange", "value", "children", "error", "helperText", "name", "refs"]);
-    let [{ slotProps, color, variant, fullWidth, placeholder }] = useInterface("Select", props, {});
+    let [_h] = useInterface("Select", props, {}), { slotProps, color, variant } = _h, inputProps = __rest(_h, ["slotProps", "color", "variant"]);
     color !== null && color !== void 0 ? color : (color = "brand");
     variant !== null && variant !== void 0 ? variant : (variant = "fill");
     const [target, setTarget] = useState();
@@ -40,7 +40,7 @@ const Select = React.forwardRef((_a, ref) => {
     }, [children, value]);
     const mergeRefs = useMergeRefs(ref, conRef);
     const toggleMenu = () => setTarget(target ? null : conRef.current);
-    return (jsxs(Fragment, { children: [jsx(Input, Object.assign({ ref: mergeRefs, color: color, variant: variant === "soft" ? "fill" : variant, endIcon: jsxs(Stack, { flexDirection: "row", component: "span", children: [" ", (target ? jsx(UpIcon, {}) : jsx(DownIcon, {}))] }), readOnly: true, value: typeof selectedProps.children === 'string' ? selectedProps.children : value, cursor: "pointer", userSelect: "none", startIcon: selectedProps.startIcon, focused: !!target, placeholder: placeholder, fullWidth: fullWidth, error: error, helperText: helperText, name: name }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { refs: Object.assign({ input: refs === null || refs === void 0 ? void 0 : refs.input }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _b === void 0 ? void 0 : _b.refs), slotProps: {
+    return (jsxs(Fragment, { children: [jsx(Input, Object.assign({ ref: mergeRefs, color: color, variant: variant === "soft" ? "fill" : variant, endIcon: jsxs(Stack, { flexDirection: "row", component: "span", children: [" ", (target ? jsx(UpIcon, {}) : jsx(DownIcon, {}))] }), readOnly: true, value: typeof selectedProps.children === 'string' ? selectedProps.children : value, cursor: "pointer", userSelect: "none", startIcon: selectedProps.startIcon, focused: !!target, error: error, helperText: helperText, name: name }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, inputProps, { refs: Object.assign({ input: refs === null || refs === void 0 ? void 0 : refs.input }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _b === void 0 ? void 0 : _b.refs), slotProps: {
                     rootContainer: Object.assign(Object.assign({ cursor: "pointer", userSelect: "none" }, (((_d = (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _c === void 0 ? void 0 : _c.slotProps) === null || _d === void 0 ? void 0 : _d.container) || {})), { onClick: () => {
                             if (!target) {
                                 toggleMenu();
@@ -50,7 +50,7 @@ const Select = React.forwardRef((_a, ref) => {
                     if (conRef.current.contains(e.target))
                         return;
                     toggleMenu();
-                }, children: jsx(List, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.list }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant, children: childs })) }))] }));
+                }, children: jsx(List, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.list }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant === "outline" ? "fill" : variant, children: childs })) }))] }));
 });
 
 export { Select as default };

package/Select/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { UseColorTemplateColor, UseColorTemplateType, useInterface, useBreakpointPropsType, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = {\n    value?: string | number;\n    onChange?: (value: string | number) => void;\n    children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n    placeholder?: useBreakpointPropsType<string>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    fullWidth?: boolean;\n    name?: string;\n    error?: InputProps['error'];\n    helperText?: InputProps['helperText'];\n\n    refs?: {\n        input?: React.Ref<any>;\n        menu?: React.Ref<any>;\n        list?: React.Ref<any>;\n    };\n    slotProps?: {\n        menu?: Omit<MenuProps, 'children' | 'target'>;\n        input?: Omit<InputProps, \"onChange\" | \"value\">;\n        list?: Omit<ListProps, \"children\">\n    }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n    let [{ slotProps, color, variant, fullWidth, placeholder }] = useInterface<any>(\"Select\", props, {})\n    color ??= \"brand\"\n    variant ??= \"fill\"\n    const [target, setTarget] = useState<any>()\n    const conRef = useRef(null)\n    const { childs, selectedProps } = useMemo(() => {\n        let sProps: any = {}\n        const c = Children.map(children, (child: any) => {\n            let selected = child.props.value === value\n            if (selected) sProps = child.props\n            return cloneElement(child, {\n                value: undefined,\n                selected,\n                onClick: () => {\n                    setTarget(null)\n                    onChange && onChange(child.props.value)\n                }\n            })\n        })\n        return {\n            childs: c,\n            selectedProps: sProps as OptionProps\n        }\n    }, [children, value])\n\n    const mergeRefs = useMergeRefs(ref, conRef)\n    const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n    return (\n        <>\n            <Input\n                ref={mergeRefs}\n                color={color}\n                variant={variant === \"soft\" ? \"fill\" : variant}\n                endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n                readOnly\n                value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n                cursor=\"pointer\"\n                userSelect=\"none\"\n                startIcon={selectedProps.startIcon}\n                focused={!!target}\n                placeholder={placeholder}\n                fullWidth={fullWidth}\n                error={error}\n                helperText={helperText}\n                name={name}\n                {...slotProps?.input}\n                refs={{\n                    input: refs?.input,\n                    ...slotProps?.input?.refs\n                }}\n                slotProps={{\n                    rootContainer: {\n                        cursor: \"pointer\",\n                        userSelect: \"none\",\n                        ...(slotProps?.input?.slotProps?.container || {}),\n                        onClick: () => {\n                            if (!target) {\n                                toggleMenu()\n                            }\n                        },\n                    }\n                }}\n            />\n            <Menu\n                ref={refs?.menu}\n                target={target}\n                placement=\"bottom-left\"\n                {...slotProps?.menu}\n                slotProps={{\n                    ...slotProps?.menu?.slotProps,\n                    content: {\n                        mt: .5,\n                        ...slotProps?.menu?.content,\n                        width: conRef && (conRef?.current as any)?.clientWidth,\n                    }\n                }}\n                onClickOutside={(e) => {\n                    if ((conRef.current as any).contains(e.target)) return;\n                    toggleMenu()\n                }}\n            >\n                <List\n                    ref={refs?.list}\n                    {...slotProps?.list}\n                    color={color}\n                    variant={variant}\n                >\n                    {childs}\n                </List>\n            </Menu>\n        </>\n    )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;AAqCA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAwBgB;;AAMY;;AAER;AAEP;;;AAiBG;AACJ;AAahB;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { useInterface, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = Omit<InputProps, \"onChange\" | \"value\" | \"children\" | \"slotProps\"> & {\n    value?: string | number;\n    onChange?: (value: string | number) => void;\n    children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n\n    refs?: {\n        input?: React.Ref<any>;\n        menu?: React.Ref<any>;\n        list?: React.Ref<any>;\n    };\n    slotProps?: {\n        menu?: Omit<MenuProps, 'children' | 'target'>;\n        input?: Omit<InputProps, \"onChange\" | \"value\">;\n        list?: Omit<ListProps, \"children\">\n    }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n    let [{ slotProps, color, variant, ...inputProps }] = useInterface<any>(\"Select\", props, {})\n    color ??= \"brand\"\n    variant ??= \"fill\"\n    const [target, setTarget] = useState<any>()\n    const conRef = useRef(null)\n    const { childs, selectedProps } = useMemo(() => {\n        let sProps: any = {}\n        const c = Children.map(children, (child: any) => {\n            let selected = child.props.value === value\n            if (selected) sProps = child.props\n            return cloneElement(child, {\n                value: undefined,\n                selected,\n                onClick: () => {\n                    setTarget(null)\n                    onChange && onChange(child.props.value)\n                }\n            })\n        })\n        return {\n            childs: c,\n            selectedProps: sProps as OptionProps\n        }\n    }, [children, value])\n\n    const mergeRefs = useMergeRefs(ref, conRef)\n    const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n    return (\n        <>\n            <Input\n                ref={mergeRefs}\n                color={color}\n                variant={variant === \"soft\" ? \"fill\" : variant}\n                endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n                readOnly\n                value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n                cursor=\"pointer\"\n                userSelect=\"none\"\n                startIcon={selectedProps.startIcon}\n                focused={!!target}\n                error={error}\n                helperText={helperText}\n                name={name}\n                {...slotProps?.input}\n                {...inputProps}\n                refs={{\n                    input: refs?.input,\n                    ...slotProps?.input?.refs\n                }}\n                slotProps={{\n                    rootContainer: {\n                        cursor: \"pointer\",\n                        userSelect: \"none\",\n                        ...(slotProps?.input?.slotProps?.container || {}),\n                        onClick: () => {\n                            if (!target) {\n                                toggleMenu()\n                            }\n                        },\n                    }\n                }}\n            />\n            <Menu\n                ref={refs?.menu}\n                target={target}\n                placement=\"bottom-left\"\n                {...slotProps?.menu}\n                slotProps={{\n                    ...slotProps?.menu?.slotProps,\n                    content: {\n                        mt: .5,\n                        ...slotProps?.menu?.content,\n                        width: conRef && (conRef?.current as any)?.clientWidth,\n                    }\n                }}\n                onClickOutside={(e) => {\n                    if ((conRef.current as any).contains(e.target)) return;\n                    toggleMenu()\n                }}\n            >\n                <List\n                    ref={refs?.list}\n                    {...slotProps?.list}\n                    color={color}\n                    variant={variant === \"outline\" ? \"fill\" : variant}\n                >\n                    {childs}\n                </List>\n            </Menu>\n        </>\n    )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;AA8BA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAuBgB;;AAMY;;AAER;AAEP;;;AAiBG;;AAcpB;;"}

package/Skeleton/index.d.ts

@@ -0,0 +1,8 @@
+import { TagComponentType, TagProps } from '@xanui/core';
+
+type SkeletonProps<T extends TagComponentType = "div"> = TagProps<T> & {
+    animation?: 'pulse' | 'wave' | 'none';
+    loading?: boolean;
+};
+
+export type { SkeletonProps };

package/Skeleton/index.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+
+const Skeleton = React.forwardRef((_a, ref) => {
+    var { children, loading, color, animation } = _a, props = tslib.__rest(_a, ["children", "loading", "color", "animation"]);
+    if (!children)
+        loading = true;
+    if (loading) {
+        animation !== null && animation !== void 0 ? animation : (animation = 'pulse');
+        color !== null && color !== void 0 ? color : (color = "default");
+        let sxr = {};
+        switch (animation) {
+            case 'pulse':
+                sxr = {
+                    bgcolor: "divider.primary",
+                    width: "100%",
+                    animation: 'skpulse 1.5s infinite',
+                    "@keyframes skpulse": {
+                        '0%, 100%': {
+                            opacity: 1,
+                        },
+                        '50%': {
+                            opacity: 0.4,
+                        },
+                    }
+                };
+                break;
+            case 'wave':
+                sxr = {
+                    position: 'relative',
+                    overflow: 'hidden',
+                    bgcolor: "divider.primary",
+                    "&::after": {
+                        content: '""',
+                        position: 'absolute',
+                        top: 0,
+                        left: "0%",
+                        width: '100%',
+                        height: '100%',
+                        animation: 'skwave 2s infinite',
+                        background: `linear-gradient(90deg, transparent 0%, var(--color-divider-secondary) 50%, transparent 100%)`,
+                    },
+                    "@keyframes skwave": {
+                        '0%': { left: '-100%' },
+                        '100%': { left: '100%' }
+                    }
+                };
+                break;
+        }
+        return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, { baseClass: 'skeleton', ref: ref, sxr: sxr })));
+    }
+    return children;
+});
+
+module.exports = Skeleton;
+//# sourceMappingURL=index.js.map

package/Skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type SkeletonProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n   animation?: 'pulse' | 'wave' | 'none';\n   loading?: boolean;\n}\n\nconst Skeleton = React.forwardRef(<T extends TagComponentType = \"div\">({ children, loading, color, animation, ...props }: SkeletonProps<T>, ref: React.Ref<any>) => {\n\n   if (!children) loading = true\n\n   if (loading) {\n      animation ??= 'pulse'\n      color ??= \"default\"\n      let sxr: any = {}\n      switch (animation) {\n         case 'pulse':\n            sxr = {\n               bgcolor: \"divider.primary\",\n               width: \"100%\",\n               animation: 'skpulse 1.5s infinite',\n               \"@keyframes skpulse\": {\n                  '0%, 100%': {\n                     opacity: 1,\n                  },\n                  '50%': {\n                     opacity: 0.4,\n                  },\n               }\n            }\n            break;\n         case 'wave':\n            sxr = {\n               position: 'relative',\n               overflow: 'hidden',\n               bgcolor: \"divider.primary\",\n               \"&::after\": {\n                  content: '\"\"',\n                  position: 'absolute',\n                  top: 0,\n                  left: \"0%\",\n                  width: '100%',\n                  height: '100%',\n                  animation: 'skwave 2s infinite',\n                  background: `linear-gradient(90deg, transparent 0%, var(--color-divider-secondary) 50%, transparent 100%)`,\n               },\n               \"@keyframes skwave\": {\n                  '0%': { left: '-100%' },\n                  '100%': { left: '100%' }\n               }\n            }\n            break;\n      }\n      return (\n         <Tag\n            {...props}\n            baseClass='skeleton'\n            ref={ref}\n            sxr={sxr}\n         />\n      )\n   }\n\n   return children\n})\n\nexport default Skeleton\n\n"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAQA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAmE,EAAE,GAAmB,KAAI;AAA5F,IAAA,IAAA,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAA,GAAA,EAA8B,EAAzB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA/C,CAAA,UAAA,EAAA,SAAA,EAAA,OAAA,EAAA,WAAA,CAAiD,CAAF;AAEnH,IAAA,IAAI,CAAC,QAAQ;QAAE,OAAO,GAAG,IAAI;IAE7B,IAAI,OAAO,EAAE;QACV,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAT,SAAS,IAAT,SAAS,GAAK,OAAO,CAAA;QACrB,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAL,KAAK,IAAL,KAAK,GAAK,SAAS,CAAA;QACnB,IAAI,GAAG,GAAQ,EAAE;QACjB,QAAQ,SAAS;AACd,YAAA,KAAK,OAAO;AACT,gBAAA,GAAG,GAAG;AACH,oBAAA,OAAO,EAAE,iBAAiB;AAC1B,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,SAAS,EAAE,uBAAuB;AAClC,oBAAA,oBAAoB,EAAE;AACnB,wBAAA,UAAU,EAAE;AACT,4BAAA,OAAO,EAAE,CAAC;AACZ,yBAAA;AACD,wBAAA,KAAK,EAAE;AACJ,4BAAA,OAAO,EAAE,GAAG;AACd,yBAAA;AACH;iBACH;gBACD;AACH,YAAA,KAAK,MAAM;AACR,gBAAA,GAAG,GAAG;AACH,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,OAAO,EAAE,iBAAiB;AAC1B,oBAAA,UAAU,EAAE;AACT,wBAAA,OAAO,EAAE,IAAI;AACb,wBAAA,QAAQ,EAAE,UAAU;AACpB,wBAAA,GAAG,EAAE,CAAC;AACN,wBAAA,IAAI,EAAE,IAAI;AACV,wBAAA,KAAK,EAAE,MAAM;AACb,wBAAA,MAAM,EAAE,MAAM;AACd,wBAAA,SAAS,EAAE,oBAAoB;AAC/B,wBAAA,UAAU,EAAE,CAAA,4FAAA,CAA8F;AAC5G,qBAAA;AACD,oBAAA,mBAAmB,EAAE;AAClB,wBAAA,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;AACvB,wBAAA,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM;AACxB;iBACH;gBACD;;AAEN,QAAA,QACGC,cAAA,CAACC,QAAG,oBACG,KAAK,EAAA,EACT,SAAS,EAAC,UAAU,EACpB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EAAA,CAAA,CACT;IAER;AAEA,IAAA,OAAO,QAAQ;AAClB,CAAC;;;;"}

package/Skeleton/index.mjs

@@ -0,0 +1,58 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Tag } from '@xanui/core';
+
+const Skeleton = React.forwardRef((_a, ref) => {
+    var { children, loading, color, animation } = _a, props = __rest(_a, ["children", "loading", "color", "animation"]);
+    if (!children)
+        loading = true;
+    if (loading) {
+        animation !== null && animation !== void 0 ? animation : (animation = 'pulse');
+        color !== null && color !== void 0 ? color : (color = "default");
+        let sxr = {};
+        switch (animation) {
+            case 'pulse':
+                sxr = {
+                    bgcolor: "divider.primary",
+                    width: "100%",
+                    animation: 'skpulse 1.5s infinite',
+                    "@keyframes skpulse": {
+                        '0%, 100%': {
+                            opacity: 1,
+                        },
+                        '50%': {
+                            opacity: 0.4,
+                        },
+                    }
+                };
+                break;
+            case 'wave':
+                sxr = {
+                    position: 'relative',
+                    overflow: 'hidden',
+                    bgcolor: "divider.primary",
+                    "&::after": {
+                        content: '""',
+                        position: 'absolute',
+                        top: 0,
+                        left: "0%",
+                        width: '100%',
+                        height: '100%',
+                        animation: 'skwave 2s infinite',
+                        background: `linear-gradient(90deg, transparent 0%, var(--color-divider-secondary) 50%, transparent 100%)`,
+                    },
+                    "@keyframes skwave": {
+                        '0%': { left: '-100%' },
+                        '100%': { left: '100%' }
+                    }
+                };
+                break;
+        }
+        return (jsx(Tag, Object.assign({}, props, { baseClass: 'skeleton', ref: ref, sxr: sxr })));
+    }
+    return children;
+});
+
+export { Skeleton as default };
+//# sourceMappingURL=index.mjs.map

package/Skeleton/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type SkeletonProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n   animation?: 'pulse' | 'wave' | 'none';\n   loading?: boolean;\n}\n\nconst Skeleton = React.forwardRef(<T extends TagComponentType = \"div\">({ children, loading, color, animation, ...props }: SkeletonProps<T>, ref: React.Ref<any>) => {\n\n   if (!children) loading = true\n\n   if (loading) {\n      animation ??= 'pulse'\n      color ??= \"default\"\n      let sxr: any = {}\n      switch (animation) {\n         case 'pulse':\n            sxr = {\n               bgcolor: \"divider.primary\",\n               width: \"100%\",\n               animation: 'skpulse 1.5s infinite',\n               \"@keyframes skpulse\": {\n                  '0%, 100%': {\n                     opacity: 1,\n                  },\n                  '50%': {\n                     opacity: 0.4,\n                  },\n               }\n            }\n            break;\n         case 'wave':\n            sxr = {\n               position: 'relative',\n               overflow: 'hidden',\n               bgcolor: \"divider.primary\",\n               \"&::after\": {\n                  content: '\"\"',\n                  position: 'absolute',\n                  top: 0,\n                  left: \"0%\",\n                  width: '100%',\n                  height: '100%',\n                  animation: 'skwave 2s infinite',\n                  background: `linear-gradient(90deg, transparent 0%, var(--color-divider-secondary) 50%, transparent 100%)`,\n               },\n               \"@keyframes skwave\": {\n                  '0%': { left: '-100%' },\n                  '100%': { left: '100%' }\n               }\n            }\n            break;\n      }\n      return (\n         <Tag\n            {...props}\n            baseClass='skeleton'\n            ref={ref}\n            sxr={sxr}\n         />\n      )\n   }\n\n   return children\n})\n\nexport default Skeleton\n\n"],"names":["_jsx"],"mappings":";;;;;AAQA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAmE,EAAE,GAAmB,KAAI;AAA5F,IAAA,IAAA,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAA,GAAA,EAA8B,EAAzB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA/C,CAAA,UAAA,EAAA,SAAA,EAAA,OAAA,EAAA,WAAA,CAAiD,CAAF;AAEnH,IAAA,IAAI,CAAC,QAAQ;QAAE,OAAO,GAAG,IAAI;IAE7B,IAAI,OAAO,EAAE;QACV,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAT,SAAS,IAAT,SAAS,GAAK,OAAO,CAAA;QACrB,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAL,KAAK,IAAL,KAAK,GAAK,SAAS,CAAA;QACnB,IAAI,GAAG,GAAQ,EAAE;QACjB,QAAQ,SAAS;AACd,YAAA,KAAK,OAAO;AACT,gBAAA,GAAG,GAAG;AACH,oBAAA,OAAO,EAAE,iBAAiB;AAC1B,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,SAAS,EAAE,uBAAuB;AAClC,oBAAA,oBAAoB,EAAE;AACnB,wBAAA,UAAU,EAAE;AACT,4BAAA,OAAO,EAAE,CAAC;AACZ,yBAAA;AACD,wBAAA,KAAK,EAAE;AACJ,4BAAA,OAAO,EAAE,GAAG;AACd,yBAAA;AACH;iBACH;gBACD;AACH,YAAA,KAAK,MAAM;AACR,gBAAA,GAAG,GAAG;AACH,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,OAAO,EAAE,iBAAiB;AAC1B,oBAAA,UAAU,EAAE;AACT,wBAAA,OAAO,EAAE,IAAI;AACb,wBAAA,QAAQ,EAAE,UAAU;AACpB,wBAAA,GAAG,EAAE,CAAC;AACN,wBAAA,IAAI,EAAE,IAAI;AACV,wBAAA,KAAK,EAAE,MAAM;AACb,wBAAA,MAAM,EAAE,MAAM;AACd,wBAAA,SAAS,EAAE,oBAAoB;AAC/B,wBAAA,UAAU,EAAE,CAAA,4FAAA,CAA8F;AAC5G,qBAAA;AACD,oBAAA,mBAAmB,EAAE;AAClB,wBAAA,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;AACvB,wBAAA,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM;AACxB;iBACH;gBACD;;AAEN,QAAA,QACGA,GAAA,CAAC,GAAG,oBACG,KAAK,EAAA,EACT,SAAS,EAAC,UAAU,EACpB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EAAA,CAAA,CACT;IAER;AAEA,IAAA,OAAO,QAAQ;AAClB,CAAC;;;;"}

package/Table/index.js

@@ -50,8 +50,8 @@ const Table = React.forwardRef((_a, ref) => {
     }
     let _size = size;
     let sizes = {
-        small: .5,
-        medium: 1,
+        small: .4,
+        medium: .8,
         large: 2
     };
     if (typeof size === 'string' && sizes[size]) {
@@ -70,7 +70,7 @@ const Table = React.forwardRef((_a, ref) => {
     };
     return (jsxRuntime.jsx(index, { style: {
             overflowY: "hidden"
-        }, children: jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { baseClass: 'table', sxr: Object.assign(Object.assign({ color: "text.primary", fontSize: size === "small" ? "button" : "text", width: "100%", "& thead, & tfoot": {
+        }, children: jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { baseClass: 'table', sxr: Object.assign(Object.assign({ color: "text.primary", fontSize: size === "small" ? "text" : "text", width: "100%", "& thead, & tfoot": {
                     bgcolor: main.primary.bgcolor,
                     "& th": {
                         color: main.primary.color

package/Table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Table/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useInterface, useColorTemplate, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Scrollbar from '../Scrollbar';\n\n\nexport type TableProps<T extends TagComponentType = \"table\"> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n    evenColor?: useBreakpointPropsType<boolean>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\" | number>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<Omit<UseColorTemplateType, \"outline\">>;\n    borderType?: useBreakpointPropsType<\"box\" | \"line\" | \"none\">;\n}\n\nconst Table = React.forwardRef(<T extends TagComponentType = \"table\">({ children, ...props }: TableProps<T>, ref: React.Ref<any>) => {\n    let [{ evenColor, size, color, variant, borderType, ...rest }] = useInterface<any>(\"Table\", props, {})\n    const _p: any = {}\n    if (evenColor) _p.evenColor = evenColor\n    if (size) _p.size = size\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (borderType) _p.borderType = borderType\n    const p: any = useBreakpointProps(_p)\n    evenColor = p.evenColor\n    size = p.size ?? \"medium\"\n    color = p.color ?? 'default'\n    variant = p.variant ?? \"fill\"\n    borderType = p.borderType ?? \"line\"\n\n    const main = useColorTemplate(color, variant)\n    const soft = useColorTemplate(color, \"soft\")\n\n    let sx: any = {}\n    if (evenColor) {\n        sx = {\n            \"& tbody tr:nth-child(even)\": {\n                bgcolor: soft.primary.bgcolor\n            }\n        }\n    }\n    if (borderType === 'box') {\n        sx = {\n            ...sx,\n            \"& tr:last-child td\": {\n                borderBottom: 0\n            },\n            \"& tr:first-child th\": {\n                borderTop: 0\n            },\n            \"& tr td:first-child, & tr th:first-child\": {\n                borderLeft: 0\n            },\n            \"& tr td:last-child, & tr th:last-child\": {\n                borderRight: 0\n            },\n        }\n    }\n    let _size = size\n    let sizes: any = {\n        small: .5,\n        medium: 1,\n        large: 2\n    }\n\n    if (typeof size === 'string' && sizes[size]) {\n        _size = sizes[size]\n    }\n    let border: any = {\n        line: {\n            borderBottom: \"1px solid\",\n            borderColor: \"divider\",\n        },\n        box: {\n            border: \"1px solid\",\n            borderColor: \"divider\",\n        },\n        none: {}\n    }\n\n    return (\n        <Scrollbar\n            style={{\n                overflowY: \"hidden\"\n            }}\n        >\n            <Tag\n                {...rest}\n                baseClass='table'\n                sxr={{\n                    color: \"text.primary\",\n                    fontSize: size === \"small\" ? \"button\" : \"text\",\n                    width: \"100%\",\n                    \"& thead, & tfoot\": {\n                        bgcolor: main.primary.bgcolor,\n                        \"& th\": {\n                            color: main.primary.color\n                        }\n                    },\n                    \"& td, & th\": {\n                        p: _size,\n                        ...border[borderType],\n                    },\n                    \"& tr:last-child td\": {\n                        borderBottom: 0\n                    },\n                    \"& tr:first-child th\": {\n                        borderTop: 0\n                    },\n                    \"& tbody tr:hover\": {\n                        bgcolor: soft.primary.bgcolor\n                    },\n                    ...sx,\n                    ...((rest as any).sx || {})\n                }}\n                component=\"table\"\n                ref={ref}\n            >{children}</Tag>\n        </Scrollbar>\n    )\n})\n\nexport default Table"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","_jsx","Scrollbar","Tag"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Table/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useInterface, useColorTemplate, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Scrollbar from '../Scrollbar';\n\n\nexport type TableProps<T extends TagComponentType = \"table\"> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n    evenColor?: useBreakpointPropsType<boolean>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\" | number>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<Omit<UseColorTemplateType, \"outline\">>;\n    borderType?: useBreakpointPropsType<\"box\" | \"line\" | \"none\">;\n}\n\nconst Table = React.forwardRef(<T extends TagComponentType = \"table\">({ children, ...props }: TableProps<T>, ref: React.Ref<any>) => {\n    let [{ evenColor, size, color, variant, borderType, ...rest }] = useInterface<any>(\"Table\", props, {})\n    const _p: any = {}\n    if (evenColor) _p.evenColor = evenColor\n    if (size) _p.size = size\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (borderType) _p.borderType = borderType\n    const p: any = useBreakpointProps(_p)\n    evenColor = p.evenColor\n    size = p.size ?? \"medium\"\n    color = p.color ?? 'default'\n    variant = p.variant ?? \"fill\"\n    borderType = p.borderType ?? \"line\"\n\n    const main = useColorTemplate(color, variant)\n    const soft = useColorTemplate(color, \"soft\")\n\n    let sx: any = {}\n    if (evenColor) {\n        sx = {\n            \"& tbody tr:nth-child(even)\": {\n                bgcolor: soft.primary.bgcolor\n            }\n        }\n    }\n    if (borderType === 'box') {\n        sx = {\n            ...sx,\n            \"& tr:last-child td\": {\n                borderBottom: 0\n            },\n            \"& tr:first-child th\": {\n                borderTop: 0\n            },\n            \"& tr td:first-child, & tr th:first-child\": {\n                borderLeft: 0\n            },\n            \"& tr td:last-child, & tr th:last-child\": {\n                borderRight: 0\n            },\n        }\n    }\n    let _size = size\n    let sizes: any = {\n        small: .4,\n        medium: .8,\n        large: 2\n    }\n\n    if (typeof size === 'string' && sizes[size]) {\n        _size = sizes[size]\n    }\n    let border: any = {\n        line: {\n            borderBottom: \"1px solid\",\n            borderColor: \"divider\",\n        },\n        box: {\n            border: \"1px solid\",\n            borderColor: \"divider\",\n        },\n        none: {}\n    }\n\n    return (\n        <Scrollbar\n            style={{\n                overflowY: \"hidden\"\n            }}\n        >\n            <Tag\n                {...rest}\n                baseClass='table'\n                sxr={{\n                    color: \"text.primary\",\n                    fontSize: size === \"small\" ? \"text\" : \"text\",\n                    width: \"100%\",\n                    \"& thead, & tfoot\": {\n                        bgcolor: main.primary.bgcolor,\n                        \"& th\": {\n                            color: main.primary.color\n                        }\n                    },\n                    \"& td, & th\": {\n                        p: _size,\n                        ...border[borderType],\n                    },\n                    \"& tr:last-child td\": {\n                        borderBottom: 0\n                    },\n                    \"& tr:first-child th\": {\n                        borderTop: 0\n                    },\n                    \"& tbody tr:hover\": {\n                        bgcolor: soft.primary.bgcolor\n                    },\n                    ...sx,\n                    ...((rest as any).sx || {})\n                }}\n                component=\"table\"\n                ref={ref}\n            >{children}</Tag>\n        </Scrollbar>\n    )\n})\n\nexport default Table"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","_jsx","Scrollbar","Tag"],"mappings":"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"}

package/Table/index.mjs

@@ -48,8 +48,8 @@ const Table = React.forwardRef((_a, ref) => {
     }
     let _size = size;
     let sizes = {
-        small: .5,
-        medium: 1,
+        small: .4,
+        medium: .8,
         large: 2
     };
     if (typeof size === 'string' && sizes[size]) {
@@ -68,7 +68,7 @@ const Table = React.forwardRef((_a, ref) => {
     };
     return (jsx(Scrollbar, { style: {
             overflowY: "hidden"
-        }, children: jsx(Tag, Object.assign({}, rest, { baseClass: 'table', sxr: Object.assign(Object.assign({ color: "text.primary", fontSize: size === "small" ? "button" : "text", width: "100%", "& thead, & tfoot": {
+        }, children: jsx(Tag, Object.assign({}, rest, { baseClass: 'table', sxr: Object.assign(Object.assign({ color: "text.primary", fontSize: size === "small" ? "text" : "text", width: "100%", "& thead, & tfoot": {
                     bgcolor: main.primary.bgcolor,
                     "& th": {
                         color: main.primary.color