@xanui/ui 1.2.6 → 1.2.8

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

package/Modal/index.cjs

@@ -16,11 +16,11 @@ const Modal = (props) => {
         xl: 1300,
         full: "100%"
     };
-    let _c = props || {}, { children, onOpen, size, slotProps } = _c, layerProps = tslib.__rest(_c, ["children", "onOpen", "size", "slotProps"]);
+    let _c = props || {}, { children, onEnter, size, slotProps } = _c, layerProps = tslib.__rest(_c, ["children", "onEnter", "size", "slotProps"]);
     size = size !== null && size !== void 0 ? size : "xs";
     slotProps = slotProps || {};
     const root = (slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) || {};
-    return (jsxRuntime.jsx(index, Object.assign({}, layerProps, { slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { clickOutside: Object.assign({ maxWidth: sizes[size] || size, width: "100%" }, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _a === void 0 ? void 0 : _a.clickOutside), root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _b === void 0 ? void 0 : _b.root) }), children: jsxRuntime.jsx(core.Tag, Object.assign({}, root, { sxr: Object.assign({ maxWidth: sizes[size] || size, width: "100%", radius: 2, bgcolor: "background.primary", shadow: 15 }, root === null || root === void 0 ? void 0 : root.sx), baseClass: 'modal', children: children })) })));
+    return (jsxRuntime.jsx(index, Object.assign({}, layerProps, { slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { clickOutside: Object.assign({ maxWidth: sizes[size] || size, width: "100%" }, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _a === void 0 ? void 0 : _a.clickOutside), root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _b === void 0 ? void 0 : _b.root) }), children: jsxRuntime.jsx(core.Tag, Object.assign({}, root, { sxr: Object.assign({ maxWidth: sizes[size] || size, width: "100%", radius: 2, bgcolor: "surface.main", shadow: 15 }, root === null || root === void 0 ? void 0 : root.sx), baseClass: 'modal', children: children })) })));
 };
 Modal.open = (Children, props) => {
     const InstanceModal = (_a) => {
@@ -34,10 +34,10 @@ Modal.open = (Children, props) => {
             else {
                 m.updateProps({ open: false });
             }
-        }, onClosed: () => {
+        }, onExited: () => {
             m.unrender();
-            if (props === null || props === void 0 ? void 0 : props.onClosed) {
-                props.onClosed();
+            if (props === null || props === void 0 ? void 0 : props.onExited) {
+                props.onExited();
             }
         } }));
     return {

package/Modal/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Modal/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode } from \"react\";\n// import useModal, { UseModalProps } from \"../useModal\";\nimport { Renderar, Tag, TagProps } from \"@xanui/core\";\nimport Layer, { ActionLayerChildren, LayerProps } from \"../Layer\";\n\nexport type ModalProps = Omit<LayerProps, \"slotProps\"> & {\n   children: ReactNode;\n   size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | number;\n   slotProps?: {\n      layer?: LayerProps['slotProps'];\n      root?: Omit<TagProps<'div'>, \"children\">\n   }\n}\n\n\nconst Modal = (props: ModalProps) => {\n   let sizes: any = {\n      xs: 420,\n      sm: 760,\n      md: 990,\n      lg: 1120,\n      xl: 1300,\n      full: \"100%\"\n   }\n   let { children, onOpen, size, slotProps, ...layerProps } = props || {}\n   size = size ?? \"xs\"\n   slotProps = slotProps || {} as any\n   const root: any = slotProps?.root || {}\n\n   return (\n      <Layer\n         {...layerProps}\n         slotProps={{\n            ...slotProps?.layer,\n            clickOutside: {\n               maxWidth: sizes[size as any] || size,\n               width: \"100%\",\n               ...slotProps?.layer?.clickOutside,\n            },\n            root: {\n               display: \"flex\",\n               alignItems: 'center',\n               justifyContent: \"center\",\n               ...slotProps?.layer?.root,\n            }\n         }}\n      >\n         <Tag\n            {...root}\n            sxr={{\n               maxWidth: sizes[size as any] || size,\n               width: \"100%\",\n               radius: 2,\n               bgcolor: \"background.primary\",\n               shadow: 15,\n               ...root?.sx\n            }}\n            baseClass='modal'\n         >\n            {children}\n         </Tag>\n      </Layer>\n   )\n}\n\nModal.open = (Children: ActionLayerChildren, props?: Omit<ModalProps, 'children' | \"open\">) => {\n   const InstanceModal = ({ children, ...props }: ModalProps) => <Modal {...props} >{children}</Modal>;\n   const m = Renderar.render(InstanceModal as any, {\n      open: true,\n      children: typeof Children === \"function\" ? <Children\n         open={() => m.updateProps({ open: true })}\n         close={() => m.updateProps({ open: false })}\n      /> : Children,\n      ...props,\n      onClickOutside: () => {\n         if (props?.onClickOutside) {\n            props.onClickOutside()\n         } else {\n            m.updateProps({ open: false })\n         }\n      },\n      onClosed: () => {\n         m.unrender()\n         if (props?.onClosed) {\n            props.onClosed()\n         }\n      }\n   })\n\n   return {\n      open: () => {\n         m.updateProps({ open: true })\n      },\n      close: () => {\n         m.updateProps({ open: false })\n      },\n   }\n};\n\n\nexport default Modal;"],"names":[],"mappings":";;;;;;;;AAgBA;;AACG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;;AAoCH;AAEA;AACG;AAAuB;AAAuC;;AAC9D;;;;;;;AAaG;;;;;AAMA;;;;;;;;;AAWN;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Modal/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode } from \"react\";\n// import useModal, { UseModalProps } from \"../useModal\";\nimport { Renderar, Tag, TagProps } from \"@xanui/core\";\nimport Layer, { ActionLayerChildren, LayerProps } from \"../Layer\";\n\nexport type ModalProps = Omit<LayerProps, \"slotProps\"> & {\n   children: ReactNode;\n   size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | number;\n   slotProps?: {\n      layer?: LayerProps['slotProps'];\n      root?: Omit<TagProps<'div'>, \"children\">\n   }\n}\n\n\nconst Modal = (props: ModalProps) => {\n   let sizes: any = {\n      xs: 420,\n      sm: 760,\n      md: 990,\n      lg: 1120,\n      xl: 1300,\n      full: \"100%\"\n   }\n   let { children, onEnter, size, slotProps, ...layerProps } = props || {}\n   size = size ?? \"xs\"\n   slotProps = slotProps || {} as any\n   const root: any = slotProps?.root || {}\n\n   return (\n      <Layer\n         {...layerProps}\n         slotProps={{\n            ...slotProps?.layer,\n            clickOutside: {\n               maxWidth: sizes[size as any] || size,\n               width: \"100%\",\n               ...slotProps?.layer?.clickOutside,\n            },\n            root: {\n               display: \"flex\",\n               alignItems: 'center',\n               justifyContent: \"center\",\n               ...slotProps?.layer?.root,\n            }\n         }}\n      >\n         <Tag\n            {...root}\n            sxr={{\n               maxWidth: sizes[size as any] || size,\n               width: \"100%\",\n               radius: 2,\n               bgcolor: \"surface.main\",\n               shadow: 15,\n               ...root?.sx\n            }}\n            baseClass='modal'\n         >\n            {children}\n         </Tag>\n      </Layer>\n   )\n}\n\nModal.open = (Children: ActionLayerChildren, props?: Omit<ModalProps, 'children' | \"open\">) => {\n   const InstanceModal = ({ children, ...props }: ModalProps) => <Modal {...props} >{children}</Modal>;\n   const m = Renderar.render(InstanceModal as any, {\n      open: true,\n      children: typeof Children === \"function\" ? <Children\n         open={() => m.updateProps({ open: true })}\n         close={() => m.updateProps({ open: false })}\n      /> : Children,\n      ...props,\n      onClickOutside: () => {\n         if (props?.onClickOutside) {\n            props.onClickOutside()\n         } else {\n            m.updateProps({ open: false })\n         }\n      },\n      onExited: () => {\n         m.unrender()\n         if (props?.onExited) {\n            props.onExited()\n         }\n      }\n   })\n\n   return {\n      open: () => {\n         m.updateProps({ open: true })\n      },\n      close: () => {\n         m.updateProps({ open: false })\n      },\n   }\n};\n\n\nexport default Modal;"],"names":[],"mappings":";;;;;;;;AAgBA;;AACG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;;AAoCH;AAEA;AACG;AAAuB;AAAuC;;AAC9D;;;;;;;AAaG;;;;;AAMA;;;;;;;;;AAWN;;"}

package/Modal/index.js

@@ -14,11 +14,11 @@ const Modal = (props) => {
         xl: 1300,
         full: "100%"
     };
-    let _c = props || {}, { children, onOpen, size, slotProps } = _c, layerProps = __rest(_c, ["children", "onOpen", "size", "slotProps"]);
+    let _c = props || {}, { children, onEnter, size, slotProps } = _c, layerProps = __rest(_c, ["children", "onEnter", "size", "slotProps"]);
     size = size !== null && size !== void 0 ? size : "xs";
     slotProps = slotProps || {};
     const root = (slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) || {};
-    return (jsx(Layer, Object.assign({}, layerProps, { slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { clickOutside: Object.assign({ maxWidth: sizes[size] || size, width: "100%" }, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _a === void 0 ? void 0 : _a.clickOutside), root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _b === void 0 ? void 0 : _b.root) }), children: jsx(Tag, Object.assign({}, root, { sxr: Object.assign({ maxWidth: sizes[size] || size, width: "100%", radius: 2, bgcolor: "background.primary", shadow: 15 }, root === null || root === void 0 ? void 0 : root.sx), baseClass: 'modal', children: children })) })));
+    return (jsx(Layer, Object.assign({}, layerProps, { slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { clickOutside: Object.assign({ maxWidth: sizes[size] || size, width: "100%" }, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _a === void 0 ? void 0 : _a.clickOutside), root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _b === void 0 ? void 0 : _b.root) }), children: jsx(Tag, Object.assign({}, root, { sxr: Object.assign({ maxWidth: sizes[size] || size, width: "100%", radius: 2, bgcolor: "surface.main", shadow: 15 }, root === null || root === void 0 ? void 0 : root.sx), baseClass: 'modal', children: children })) })));
 };
 Modal.open = (Children, props) => {
     const InstanceModal = (_a) => {
@@ -32,10 +32,10 @@ Modal.open = (Children, props) => {
             else {
                 m.updateProps({ open: false });
             }
-        }, onClosed: () => {
+        }, onExited: () => {
             m.unrender();
-            if (props === null || props === void 0 ? void 0 : props.onClosed) {
-                props.onClosed();
+            if (props === null || props === void 0 ? void 0 : props.onExited) {
+                props.onExited();
             }
         } }));
     return {

package/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Modal/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode } from \"react\";\n// import useModal, { UseModalProps } from \"../useModal\";\nimport { Renderar, Tag, TagProps } from \"@xanui/core\";\nimport Layer, { ActionLayerChildren, LayerProps } from \"../Layer\";\n\nexport type ModalProps = Omit<LayerProps, \"slotProps\"> & {\n   children: ReactNode;\n   size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | number;\n   slotProps?: {\n      layer?: LayerProps['slotProps'];\n      root?: Omit<TagProps<'div'>, \"children\">\n   }\n}\n\n\nconst Modal = (props: ModalProps) => {\n   let sizes: any = {\n      xs: 420,\n      sm: 760,\n      md: 990,\n      lg: 1120,\n      xl: 1300,\n      full: \"100%\"\n   }\n   let { children, onOpen, size, slotProps, ...layerProps } = props || {}\n   size = size ?? \"xs\"\n   slotProps = slotProps || {} as any\n   const root: any = slotProps?.root || {}\n\n   return (\n      <Layer\n         {...layerProps}\n         slotProps={{\n            ...slotProps?.layer,\n            clickOutside: {\n               maxWidth: sizes[size as any] || size,\n               width: \"100%\",\n               ...slotProps?.layer?.clickOutside,\n            },\n            root: {\n               display: \"flex\",\n               alignItems: 'center',\n               justifyContent: \"center\",\n               ...slotProps?.layer?.root,\n            }\n         }}\n      >\n         <Tag\n            {...root}\n            sxr={{\n               maxWidth: sizes[size as any] || size,\n               width: \"100%\",\n               radius: 2,\n               bgcolor: \"background.primary\",\n               shadow: 15,\n               ...root?.sx\n            }}\n            baseClass='modal'\n         >\n            {children}\n         </Tag>\n      </Layer>\n   )\n}\n\nModal.open = (Children: ActionLayerChildren, props?: Omit<ModalProps, 'children' | \"open\">) => {\n   const InstanceModal = ({ children, ...props }: ModalProps) => <Modal {...props} >{children}</Modal>;\n   const m = Renderar.render(InstanceModal as any, {\n      open: true,\n      children: typeof Children === \"function\" ? <Children\n         open={() => m.updateProps({ open: true })}\n         close={() => m.updateProps({ open: false })}\n      /> : Children,\n      ...props,\n      onClickOutside: () => {\n         if (props?.onClickOutside) {\n            props.onClickOutside()\n         } else {\n            m.updateProps({ open: false })\n         }\n      },\n      onClosed: () => {\n         m.unrender()\n         if (props?.onClosed) {\n            props.onClosed()\n         }\n      }\n   })\n\n   return {\n      open: () => {\n         m.updateProps({ open: true })\n      },\n      close: () => {\n         m.updateProps({ open: false })\n      },\n   }\n};\n\n\nexport default Modal;"],"names":[],"mappings":";;;;;;AAgBA;;AACG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;;AAoCH;AAEA;AACG;AAAuB;AAAuC;;AAC9D;;;;;;;AAaG;;;;;AAMA;;;;;;;;;AAWN;;"}
+{"version":3,"file":"index.js","sources":["../../src/Modal/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode } from \"react\";\n// import useModal, { UseModalProps } from \"../useModal\";\nimport { Renderar, Tag, TagProps } from \"@xanui/core\";\nimport Layer, { ActionLayerChildren, LayerProps } from \"../Layer\";\n\nexport type ModalProps = Omit<LayerProps, \"slotProps\"> & {\n   children: ReactNode;\n   size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | number;\n   slotProps?: {\n      layer?: LayerProps['slotProps'];\n      root?: Omit<TagProps<'div'>, \"children\">\n   }\n}\n\n\nconst Modal = (props: ModalProps) => {\n   let sizes: any = {\n      xs: 420,\n      sm: 760,\n      md: 990,\n      lg: 1120,\n      xl: 1300,\n      full: \"100%\"\n   }\n   let { children, onEnter, size, slotProps, ...layerProps } = props || {}\n   size = size ?? \"xs\"\n   slotProps = slotProps || {} as any\n   const root: any = slotProps?.root || {}\n\n   return (\n      <Layer\n         {...layerProps}\n         slotProps={{\n            ...slotProps?.layer,\n            clickOutside: {\n               maxWidth: sizes[size as any] || size,\n               width: \"100%\",\n               ...slotProps?.layer?.clickOutside,\n            },\n            root: {\n               display: \"flex\",\n               alignItems: 'center',\n               justifyContent: \"center\",\n               ...slotProps?.layer?.root,\n            }\n         }}\n      >\n         <Tag\n            {...root}\n            sxr={{\n               maxWidth: sizes[size as any] || size,\n               width: \"100%\",\n               radius: 2,\n               bgcolor: \"surface.main\",\n               shadow: 15,\n               ...root?.sx\n            }}\n            baseClass='modal'\n         >\n            {children}\n         </Tag>\n      </Layer>\n   )\n}\n\nModal.open = (Children: ActionLayerChildren, props?: Omit<ModalProps, 'children' | \"open\">) => {\n   const InstanceModal = ({ children, ...props }: ModalProps) => <Modal {...props} >{children}</Modal>;\n   const m = Renderar.render(InstanceModal as any, {\n      open: true,\n      children: typeof Children === \"function\" ? <Children\n         open={() => m.updateProps({ open: true })}\n         close={() => m.updateProps({ open: false })}\n      /> : Children,\n      ...props,\n      onClickOutside: () => {\n         if (props?.onClickOutside) {\n            props.onClickOutside()\n         } else {\n            m.updateProps({ open: false })\n         }\n      },\n      onExited: () => {\n         m.unrender()\n         if (props?.onExited) {\n            props.onExited()\n         }\n      }\n   })\n\n   return {\n      open: () => {\n         m.updateProps({ open: true })\n      },\n      close: () => {\n         m.updateProps({ open: false })\n      },\n   }\n};\n\n\nexport default Modal;"],"names":[],"mappings":";;;;;;AAgBA;;AACG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;;AAoCH;AAEA;AACG;AAAuB;AAAuC;;AAC9D;;;;;;;AAaG;;;;;AAMA;;;;;;;;;AAWN;;"}

package/Option/index.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 import { ListItemProps } from '../ListItem/index.js';
 
 type OptionProps = ListItemProps & {
     value: string | number;
 };
-declare const Option: React.ForwardRefExoticComponent<Omit<OptionProps, "ref"> & React.RefAttributes<any>>;
+declare const Option: React__default.ForwardRefExoticComponent<Omit<OptionProps, "ref"> & React__default.RefAttributes<any>>;
 
 export { Option as default };
 export type { OptionProps };

package/PasswordInput/index.cjs

@@ -0,0 +1,21 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var Visibility = require('@xanui/icons/Visibility');
+var VisibilityOff = require('@xanui/icons/VisibilityOff');
+var index$1 = require('../IconButton/index.cjs');
+var index = require('../Input/index.cjs');
+var React = require('react');
+
+const PasswordInput = React.forwardRef((_a, ref) => {
+    var { defaultShow } = _a, props = tslib.__rest(_a, ["defaultShow"]);
+    const [show, setShow] = React.useState(defaultShow !== null && defaultShow !== void 0 ? defaultShow : false);
+    return (jsxRuntime.jsx(index, Object.assign({ ref: ref, variant: "outline", placeholder: "Password" }, props, { type: show ? "text" : "password", endIcon: jsxRuntime.jsx(index$1, { variant: "text", color: "surface", size: "small", onClick: () => {
+                setShow(p => !p);
+            }, children: show ? jsxRuntime.jsx(Visibility, {}) : jsxRuntime.jsx(VisibilityOff, {}) }) })));
+});
+
+module.exports = PasswordInput;
+//# sourceMappingURL=index.cjs.map

package/PasswordInput/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/PasswordInput/index.tsx"],"sourcesContent":["\"use client\"\nimport Visibility from \"@xanui/icons/Visibility\"\nimport VisibilityOff from \"@xanui/icons/VisibilityOff\"\nimport IconButton from \"../IconButton\"\nimport Input from \"../Input\"\nimport { InputProps } from '../Input';\nimport React, { forwardRef } from 'react'\n\nexport type PasswordInputProps = InputProps & {\n   placeholder?: string;\n   defaultShow?: boolean\n}\n\nconst PasswordInput = forwardRef(({ defaultShow, ...props }: PasswordInputProps, ref: React.Ref<\"input\">) => {\n   const [show, setShow] = React.useState(defaultShow ?? false)\n\n   return (\n      <Input\n         ref={ref}\n         variant=\"outline\"\n         placeholder=\"Password\"\n         {...props}\n         type={show ? \"text\" : \"password\"}\n         endIcon={\n            <IconButton\n               variant=\"text\"\n               color=\"surface\"\n               size=\"small\"\n               onClick={() => {\n                  setShow(p => !p);\n               }}\n            >\n               {show ? <Visibility /> : <VisibilityOff />}\n            </IconButton>\n         }\n      />\n   )\n})\n\nexport default PasswordInput"],"names":[],"mappings":";;;;;;;;;;;AAaA;AAAkC;AAC/B;;;AAgBY;AAOf;;"}

package/PasswordInput/index.d.ts

@@ -0,0 +1,11 @@
+import { InputProps } from '../Input/index.js';
+import React__default from 'react';
+
+type PasswordInputProps = InputProps & {
+    placeholder?: string;
+    defaultShow?: boolean;
+};
+declare const PasswordInput: React__default.ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & React__default.RefAttributes<"input">>;
+
+export { PasswordInput as default };
+export type { PasswordInputProps };

package/PasswordInput/index.js

@@ -0,0 +1,19 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import Visibility from '@xanui/icons/Visibility';
+import VisibilityOff from '@xanui/icons/VisibilityOff';
+import IconButton from '../IconButton/index.js';
+import Input from '../Input/index.js';
+import React, { forwardRef } from 'react';
+
+const PasswordInput = forwardRef((_a, ref) => {
+    var { defaultShow } = _a, props = __rest(_a, ["defaultShow"]);
+    const [show, setShow] = React.useState(defaultShow !== null && defaultShow !== void 0 ? defaultShow : false);
+    return (jsx(Input, Object.assign({ ref: ref, variant: "outline", placeholder: "Password" }, props, { type: show ? "text" : "password", endIcon: jsx(IconButton, { variant: "text", color: "surface", size: "small", onClick: () => {
+                setShow(p => !p);
+            }, children: show ? jsx(Visibility, {}) : jsx(VisibilityOff, {}) }) })));
+});
+
+export { PasswordInput as default };
+//# sourceMappingURL=index.js.map

package/PasswordInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/PasswordInput/index.tsx"],"sourcesContent":["\"use client\"\nimport Visibility from \"@xanui/icons/Visibility\"\nimport VisibilityOff from \"@xanui/icons/VisibilityOff\"\nimport IconButton from \"../IconButton\"\nimport Input from \"../Input\"\nimport { InputProps } from '../Input';\nimport React, { forwardRef } from 'react'\n\nexport type PasswordInputProps = InputProps & {\n   placeholder?: string;\n   defaultShow?: boolean\n}\n\nconst PasswordInput = forwardRef(({ defaultShow, ...props }: PasswordInputProps, ref: React.Ref<\"input\">) => {\n   const [show, setShow] = React.useState(defaultShow ?? false)\n\n   return (\n      <Input\n         ref={ref}\n         variant=\"outline\"\n         placeholder=\"Password\"\n         {...props}\n         type={show ? \"text\" : \"password\"}\n         endIcon={\n            <IconButton\n               variant=\"text\"\n               color=\"surface\"\n               size=\"small\"\n               onClick={() => {\n                  setShow(p => !p);\n               }}\n            >\n               {show ? <Visibility /> : <VisibilityOff />}\n            </IconButton>\n         }\n      />\n   )\n})\n\nexport default PasswordInput"],"names":[],"mappings":";;;;;;;;;AAaA;AAAkC;AAC/B;;;AAgBY;AAOf;;"}

package/Portal/index.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
+import React__default from 'react';
 
 type PortalProps = {
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
     appendTo?: HTMLElement;
     container?: HTMLElement;
 };
-declare const Portal: ({ children, appendTo, container }: PortalProps) => React.ReactPortal;
+declare const Portal: ({ children, appendTo, container }: PortalProps) => React__default.ReactPortal;
 
 export { Portal as default };
 export type { PortalProps };

package/Radio/index.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import React__default from 'react';
 import { CheckboxProps } from '../Checkbox/index.js';
 
-declare const Radio: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<any>>;
+declare const Radio: React__default.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React__default.RefAttributes<any>>;
 
 export { Radio as default };

package/RangeSlider/index.cjs

@@ -0,0 +1,158 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+
+const RangeSlider = (props) => {
+    var _a;
+    const { value, defaultValue, onChange, disabled } = props, rest = tslib.__rest(props, ["value", "defaultValue", "onChange", "disabled"]);
+    // interface system
+    let [{ color, min = 0, max = 100, step = 1, thumbContent, thumbSize = 16, size = "sm" }] = core.useInterface("RangeSlider", rest, {});
+    const bp = core.useBreakpointProps({
+        color,
+        size
+    });
+    color = (_a = bp.color) !== null && _a !== void 0 ? _a : "primary";
+    size = bp.size;
+    const sizesSX = {
+        xs: {
+            track: 2,
+            thumb: 8
+        },
+        sm: {
+            track: 4,
+            thumb: 14
+        },
+        md: {
+            track: 8,
+            thumb: 18
+        },
+        lg: {
+            track: 12,
+            thumb: 24
+        },
+        xl: {
+            track: 16,
+            thumb: 32
+        }
+    };
+    const _size = sizesSX[size];
+    if (thumbSize) {
+        _size.thumb = thumbSize;
+    }
+    if (disabled) {
+        color = 'surface.divider';
+    }
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = React.useState(() => {
+        if (value !== undefined)
+            return Array.isArray(value) ? value : [value];
+        if (defaultValue !== undefined)
+            return Array.isArray(defaultValue)
+                ? defaultValue
+                : [defaultValue];
+        return [min];
+    });
+    // sync controlled
+    React.useEffect(() => {
+        if (isControlled) {
+            setInternalValue(Array.isArray(value) ? value : [value]);
+        }
+    }, [value, isControlled]);
+    const containerRef = React.useRef(null);
+    const isDownRef = React.useRef(false);
+    const activeHandleRef = React.useRef(null);
+    const updateValue = (index, clientX) => {
+        if (!containerRef.current)
+            return;
+        const rect = containerRef.current.getBoundingClientRect();
+        let p = (clientX - rect.left) / rect.width;
+        p = Math.max(0, Math.min(1, p));
+        const raw = min + p * (max - min);
+        const stepped = Math.round((raw - min) / step) * step + min;
+        const next = [...internalValue];
+        next[index] = Math.min(max, Math.max(min, stepped));
+        if (!isControlled) {
+            setInternalValue(next);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(next.length === 1 ? next[0] : next);
+    };
+    // global drag system
+    React.useEffect(() => {
+        const handleMove = (e) => {
+            if (!isDownRef.current || activeHandleRef.current === null)
+                return;
+            updateValue(activeHandleRef.current, e.clientX);
+        };
+        const handleUp = () => {
+            isDownRef.current = false;
+            activeHandleRef.current = null;
+        };
+        window.addEventListener("mousemove", handleMove);
+        window.addEventListener("mouseup", handleUp);
+        return () => {
+            window.removeEventListener("mousemove", handleMove);
+            window.removeEventListener("mouseup", handleUp);
+        };
+    });
+    const sorted = [...internalValue].sort((a, b) => a - b);
+    const startValue = sorted.length === 1 ? min : sorted[0];
+    const endValue = sorted[sorted.length - 1];
+    const startPercent = ((startValue - min) / (max - min)) * 100;
+    const endPercent = ((endValue - min) / (max - min)) * 100;
+    return (jsxRuntime.jsxs(core.Tag, { ref: containerRef, onClick: (e) => {
+            if (disabled)
+                return;
+            const rect = e.currentTarget.getBoundingClientRect();
+            const p = (e.clientX - rect.left) / rect.width;
+            const raw = min + p * (max - min);
+            const stepped = Math.round((raw - min) / step) * step + min;
+            let closestIndex = 0;
+            let minDist = Math.abs(internalValue[0] - stepped);
+            for (let i = 1; i < internalValue.length; i++) {
+                const d = Math.abs(internalValue[i] - stepped);
+                if (d < minDist) {
+                    minDist = d;
+                    closestIndex = i;
+                }
+            }
+            updateValue(closestIndex, e.clientX);
+        }, sxr: Object.assign({ position: "relative", width: "100%", display: "flex", alignItems: "center" }, (disabled ? { cursor: "not-allowed" } : {})), children: [jsxRuntime.jsx(core.Tag, { sxr: {
+                    position: "absolute",
+                    width: "100%",
+                    height: _size.track,
+                    bgcolor: 'surface.divider',
+                    radius: `${_size.track}px`,
+                } }), jsxRuntime.jsx(core.Tag, { sxr: {
+                    position: "absolute",
+                    height: _size.track,
+                    bgcolor: color,
+                    radius: `${_size.track}px`,
+                    left: `${startPercent}%`,
+                    width: `${endPercent - startPercent}%`,
+                } }), internalValue.map((v, i) => {
+                const percent = ((v - min) / (max - min)) * 100;
+                return (jsxRuntime.jsx(core.Tag, { sxr: {
+                        position: "absolute",
+                        width: _size.thumb,
+                        height: _size.thumb,
+                        radius: `${_size.thumb}px`,
+                        bgcolor: color,
+                        left: `${percent}%`,
+                        transform: "translateX(-50%)",
+                        cursor: disabled ? "not-allowed" : "initial",
+                    }, onMouseDown: (e) => {
+                        if (disabled)
+                            return;
+                        e.preventDefault();
+                        isDownRef.current = true;
+                        activeHandleRef.current = i;
+                    }, children: thumbContent ? thumbContent({ value: percent }) : "" }, i));
+            })] }));
+};
+
+module.exports = RangeSlider;
+//# sourceMappingURL=index.cjs.map

package/RangeSlider/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/RangeSlider/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactElement, useEffect, useRef, useState } from \"react\";\nimport {\n   Tag,\n   useBreakpointProps,\n   useBreakpointPropsType,\n   UseColorTemplateColor,\n   useInterface,\n} from \"@xanui/core\";\n\nexport type RangeSliderValue = number | number[];\n\nexport type RangeSliderProps = {\n   color?: useBreakpointPropsType<UseColorTemplateColor>;\n   min?: number;\n   max?: number;\n   step?: number;\n   value?: RangeSliderValue;\n   defaultValue?: RangeSliderValue;\n   onChange?: (value: RangeSliderValue) => void;\n   disabled?: boolean;\n   thumbContent?: (props: { value: number }) => ReactElement\n   size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n   thumbSize?: number;\n};\n\nconst RangeSlider = (props: RangeSliderProps) => {\n   const { value, defaultValue, onChange, disabled, ...rest } = props;\n\n   // interface system\n   let [{ color, min = 0, max = 100, step = 1, thumbContent, thumbSize = 16, size = \"sm\" }] = useInterface<any>(\n      \"RangeSlider\",\n      rest,\n      {}\n   );\n\n   const bp: any = useBreakpointProps({\n      color,\n      size\n   });\n   color = bp.color ?? \"primary\"\n   size = bp.size;\n\n   const sizesSX: any = {\n      xs: {\n         track: 2,\n         thumb: 8\n      },\n      sm: {\n         track: 4,\n         thumb: 14\n      },\n      md: {\n         track: 8,\n         thumb: 18\n      },\n      lg: {\n         track: 12,\n         thumb: 24\n      },\n      xl: {\n         track: 16,\n         thumb: 32\n      }\n   }\n\n   const _size = sizesSX[size]\n\n\n   if (thumbSize) {\n      _size.thumb = thumbSize\n   }\n\n   if (disabled) {\n      color = 'surface.divider'\n   }\n\n   const isControlled = value !== undefined;\n\n   const [internalValue, setInternalValue] = useState<number[]>(() => {\n      if (value !== undefined) return Array.isArray(value) ? value : [value];\n      if (defaultValue !== undefined)\n         return Array.isArray(defaultValue)\n            ? defaultValue\n            : [defaultValue];\n      return [min];\n   });\n\n   // sync controlled\n   useEffect(() => {\n      if (isControlled) {\n         setInternalValue(Array.isArray(value) ? value : [value!]);\n      }\n   }, [value, isControlled]);\n\n   const containerRef = useRef<HTMLDivElement | null>(null);\n   const isDownRef = useRef(false);\n   const activeHandleRef = useRef<number | null>(null);\n\n   const updateValue = (index: number, clientX: number) => {\n      if (!containerRef.current) return;\n\n      const rect = containerRef.current.getBoundingClientRect();\n      let p = (clientX - rect.left) / rect.width;\n      p = Math.max(0, Math.min(1, p));\n\n      const raw = min + p * (max - min);\n      const stepped = Math.round((raw - min) / step) * step + min;\n\n      const next = [...internalValue];\n      next[index] = Math.min(max, Math.max(min, stepped));\n\n      if (!isControlled) {\n         setInternalValue(next);\n      }\n\n      onChange?.(next.length === 1 ? next[0] : next);\n   };\n\n   // global drag system\n   useEffect(() => {\n      const handleMove = (e: MouseEvent) => {\n         if (!isDownRef.current || activeHandleRef.current === null) return;\n         updateValue(activeHandleRef.current, e.clientX);\n      };\n\n      const handleUp = () => {\n         isDownRef.current = false;\n         activeHandleRef.current = null;\n      };\n\n      window.addEventListener(\"mousemove\", handleMove);\n      window.addEventListener(\"mouseup\", handleUp);\n\n      return () => {\n         window.removeEventListener(\"mousemove\", handleMove);\n         window.removeEventListener(\"mouseup\", handleUp);\n      };\n   });\n\n   const sorted = [...internalValue].sort((a, b) => a - b);\n\n   const startValue = sorted.length === 1 ? min : sorted[0];\n   const endValue = sorted[sorted.length - 1];\n\n   const startPercent = ((startValue - min) / (max - min)) * 100;\n   const endPercent = ((endValue - min) / (max - min)) * 100;\n\n\n\n   return (\n      <Tag\n         ref={containerRef}\n         onClick={(e: any) => {\n            if (disabled) return;\n\n            const rect = e.currentTarget.getBoundingClientRect();\n            const p = (e.clientX - rect.left) / rect.width;\n            const raw = min + p * (max - min);\n            const stepped = Math.round((raw - min) / step) * step + min;\n\n            let closestIndex = 0;\n            let minDist = Math.abs(internalValue[0] - stepped);\n\n            for (let i = 1; i < internalValue.length; i++) {\n               const d = Math.abs(internalValue[i] - stepped);\n               if (d < minDist) {\n                  minDist = d;\n                  closestIndex = i;\n               }\n            }\n\n            updateValue(closestIndex, e.clientX);\n         }}\n         sxr={{\n            position: \"relative\",\n            width: \"100%\",\n            display: \"flex\",\n            alignItems: \"center\",\n            ...(disabled ? { cursor: \"not-allowed\" } : {}),\n         }}\n      >\n         {/* Track */}\n         <Tag\n            sxr={{\n               position: \"absolute\",\n               width: \"100%\",\n               height: _size.track,\n               bgcolor: 'surface.divider',\n               radius: `${_size.track}px`,\n            }}\n         />\n\n         <Tag\n            sxr={{\n               position: \"absolute\",\n               height: _size.track,\n               bgcolor: color,\n               radius: `${_size.track}px`,\n               left: `${startPercent}%`,\n               width: `${endPercent - startPercent}%`,\n            }}\n         />\n\n         {internalValue.map((v, i) => {\n            const percent = ((v - min) / (max - min)) * 100;\n            return (\n               <Tag\n                  key={i}\n                  sxr={{\n                     position: \"absolute\",\n                     width: _size.thumb,\n                     height: _size.thumb,\n                     radius: `${_size.thumb}px`,\n                     bgcolor: color,\n                     left: `${percent}%`,\n                     transform: \"translateX(-50%)\",\n                     cursor: disabled ? \"not-allowed\" : \"initial\",\n                  }}\n                  onMouseDown={(e) => {\n                     if (disabled) return;\n                     e.preventDefault();\n                     isDownRef.current = true;\n                     activeHandleRef.current = i;\n                  }}\n               >\n                  {thumbContent ? thumbContent({ value: percent }) : \"\"}\n               </Tag>\n            );\n         })}\n      </Tag>\n   );\n};\n\nexport default RangeSlider;"],"names":[],"mappings":";;;;;;;;AA0BA;;AACG;;AAGA;;;;AASC;AACD;AACA;AAEA;AACG;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;;AAGJ;;AAIG;;;;;AAOH;;;AAG4B;;AAEtB;AACG;AACA;;AAET;;;;AAKM;;AAEN;AAEA;AACA;AACA;AAEA;;;;AAIG;AACA;;AAGA;AAEA;AACA;;;;;AAOH;;;AAIG;;;;AAGA;;AAGG;AACA;AACH;AAEA;AACA;AAEA;AACG;AACA;AACH;AACH;;AAIA;;AAGA;AACA;AAIA;AAIS;;;AAGA;;AAEA;;AAGA;AAEA;AACG;AACA;;;;;AAMH;AACH;AAYM;AACA;;AAEA;AACA;AACF;AAKE;;AAEA;AACA;;AAEA;;AAKH;AACA;AAIS;;;AAGA;AACA;;AAEA;;AAEF;AAEE;;;AAEA;AACA;;;AASrB;;"}

package/RangeSlider/index.d.ts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactElement } from 'react';
+import { useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';
+
+type RangeSliderValue = number | number[];
+type RangeSliderProps = {
+    color?: useBreakpointPropsType<UseColorTemplateColor>;
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: RangeSliderValue;
+    defaultValue?: RangeSliderValue;
+    onChange?: (value: RangeSliderValue) => void;
+    disabled?: boolean;
+    thumbContent?: (props: {
+        value: number;
+    }) => ReactElement;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    thumbSize?: number;
+};
+declare const RangeSlider: (props: RangeSliderProps) => react_jsx_runtime.JSX.Element;
+
+export { RangeSlider as default };
+export type { RangeSliderProps, RangeSliderValue };

package/RangeSlider/index.js

@@ -0,0 +1,156 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useRef } from 'react';
+import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
+
+const RangeSlider = (props) => {
+    var _a;
+    const { value, defaultValue, onChange, disabled } = props, rest = __rest(props, ["value", "defaultValue", "onChange", "disabled"]);
+    // interface system
+    let [{ color, min = 0, max = 100, step = 1, thumbContent, thumbSize = 16, size = "sm" }] = useInterface("RangeSlider", rest, {});
+    const bp = useBreakpointProps({
+        color,
+        size
+    });
+    color = (_a = bp.color) !== null && _a !== void 0 ? _a : "primary";
+    size = bp.size;
+    const sizesSX = {
+        xs: {
+            track: 2,
+            thumb: 8
+        },
+        sm: {
+            track: 4,
+            thumb: 14
+        },
+        md: {
+            track: 8,
+            thumb: 18
+        },
+        lg: {
+            track: 12,
+            thumb: 24
+        },
+        xl: {
+            track: 16,
+            thumb: 32
+        }
+    };
+    const _size = sizesSX[size];
+    if (thumbSize) {
+        _size.thumb = thumbSize;
+    }
+    if (disabled) {
+        color = 'surface.divider';
+    }
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = useState(() => {
+        if (value !== undefined)
+            return Array.isArray(value) ? value : [value];
+        if (defaultValue !== undefined)
+            return Array.isArray(defaultValue)
+                ? defaultValue
+                : [defaultValue];
+        return [min];
+    });
+    // sync controlled
+    useEffect(() => {
+        if (isControlled) {
+            setInternalValue(Array.isArray(value) ? value : [value]);
+        }
+    }, [value, isControlled]);
+    const containerRef = useRef(null);
+    const isDownRef = useRef(false);
+    const activeHandleRef = useRef(null);
+    const updateValue = (index, clientX) => {
+        if (!containerRef.current)
+            return;
+        const rect = containerRef.current.getBoundingClientRect();
+        let p = (clientX - rect.left) / rect.width;
+        p = Math.max(0, Math.min(1, p));
+        const raw = min + p * (max - min);
+        const stepped = Math.round((raw - min) / step) * step + min;
+        const next = [...internalValue];
+        next[index] = Math.min(max, Math.max(min, stepped));
+        if (!isControlled) {
+            setInternalValue(next);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(next.length === 1 ? next[0] : next);
+    };
+    // global drag system
+    useEffect(() => {
+        const handleMove = (e) => {
+            if (!isDownRef.current || activeHandleRef.current === null)
+                return;
+            updateValue(activeHandleRef.current, e.clientX);
+        };
+        const handleUp = () => {
+            isDownRef.current = false;
+            activeHandleRef.current = null;
+        };
+        window.addEventListener("mousemove", handleMove);
+        window.addEventListener("mouseup", handleUp);
+        return () => {
+            window.removeEventListener("mousemove", handleMove);
+            window.removeEventListener("mouseup", handleUp);
+        };
+    });
+    const sorted = [...internalValue].sort((a, b) => a - b);
+    const startValue = sorted.length === 1 ? min : sorted[0];
+    const endValue = sorted[sorted.length - 1];
+    const startPercent = ((startValue - min) / (max - min)) * 100;
+    const endPercent = ((endValue - min) / (max - min)) * 100;
+    return (jsxs(Tag, { ref: containerRef, onClick: (e) => {
+            if (disabled)
+                return;
+            const rect = e.currentTarget.getBoundingClientRect();
+            const p = (e.clientX - rect.left) / rect.width;
+            const raw = min + p * (max - min);
+            const stepped = Math.round((raw - min) / step) * step + min;
+            let closestIndex = 0;
+            let minDist = Math.abs(internalValue[0] - stepped);
+            for (let i = 1; i < internalValue.length; i++) {
+                const d = Math.abs(internalValue[i] - stepped);
+                if (d < minDist) {
+                    minDist = d;
+                    closestIndex = i;
+                }
+            }
+            updateValue(closestIndex, e.clientX);
+        }, sxr: Object.assign({ position: "relative", width: "100%", display: "flex", alignItems: "center" }, (disabled ? { cursor: "not-allowed" } : {})), children: [jsx(Tag, { sxr: {
+                    position: "absolute",
+                    width: "100%",
+                    height: _size.track,
+                    bgcolor: 'surface.divider',
+                    radius: `${_size.track}px`,
+                } }), jsx(Tag, { sxr: {
+                    position: "absolute",
+                    height: _size.track,
+                    bgcolor: color,
+                    radius: `${_size.track}px`,
+                    left: `${startPercent}%`,
+                    width: `${endPercent - startPercent}%`,
+                } }), internalValue.map((v, i) => {
+                const percent = ((v - min) / (max - min)) * 100;
+                return (jsx(Tag, { sxr: {
+                        position: "absolute",
+                        width: _size.thumb,
+                        height: _size.thumb,
+                        radius: `${_size.thumb}px`,
+                        bgcolor: color,
+                        left: `${percent}%`,
+                        transform: "translateX(-50%)",
+                        cursor: disabled ? "not-allowed" : "initial",
+                    }, onMouseDown: (e) => {
+                        if (disabled)
+                            return;
+                        e.preventDefault();
+                        isDownRef.current = true;
+                        activeHandleRef.current = i;
+                    }, children: thumbContent ? thumbContent({ value: percent }) : "" }, i));
+            })] }));
+};
+
+export { RangeSlider as default };
+//# sourceMappingURL=index.js.map