@xanui/ui 1.2.6 → 1.2.8

package/Carousel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/Carousel/index.tsx"],"sourcesContent":["\"use client\"\nimport { animate, Transition, TransitionProps } from '@xanui/core';\nimport { Children, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\nexport type CarouselRef = {\n    next: () => void;\n    prev: () => void;\n    goTo: (index: number) => void;\n    getIndex: () => number;\n};\n\nexport type CarouselProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"children\" | \"onChange\" | \"transition\"> & {\n    children: React.ReactNode\n    slidesToShow?: useBreakpointPropsType<number>;\n    slidesToScroll?: useBreakpointPropsType<number>;\n    infinite?: useBreakpointPropsType<boolean>;\n    autoplay?: useBreakpointPropsType<boolean>;\n    autoplayInterval?: useBreakpointPropsType<number>;\n    loop?: useBreakpointPropsType<boolean>;\n    duration?: useBreakpointPropsType<number>;\n    transition?: useBreakpointPropsType<TransitionProps[\"variant\"]>;\n    easing?: useBreakpointPropsType<TransitionProps[\"easing\"]>;\n\n    onChange?: (index: number, indexes: number[]) => void;\n    onNext?: (index: number, indexes: number[]) => void;\n    onPrev?: (index: number, indexes: number[]) => void;\n}\n\nconst Carousel = forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: CarouselProps<T>, ref: React.Ref<CarouselRef>) => {\n    const [index, setIndex] = useState(0)\n    const childs = Children.toArray(children)\n    const total = childs.length\n    const track = useRef<HTMLElement>(null)\n    const animating = useRef(() => { })\n    const state = useRef({ x: 0 })\n    const autoplayRef = useRef<any | null>(null)\n\n    let [{\n        slidesToShow,\n        slidesToScroll,\n        loop,\n        autoplay,\n        autoplayInterval,\n        duration,\n        transition,\n        easing,\n\n        onChange,\n        onBeforeChange,\n        onNext,\n        onBeforeNext,\n        onPrev,\n        onBeforePrev,\n\n        ...props\n    }] = useInterface<any>(\"Carousel\", rest, {})\n\n    const _p: any = {}\n    if (slidesToShow) _p.slidesToShow = slidesToShow\n    if (slidesToScroll) _p.slidesToScroll = slidesToScroll\n    if (loop) _p.loop = loop\n    if (autoplay) _p.autoplay = autoplay\n    if (autoplayInterval) _p.autoplayInterval = autoplayInterval\n    if (duration) _p.duration = duration\n    if (transition) _p.transition = transition\n    if (easing) _p.easing = easing\n\n\n    const p: any = useBreakpointProps(_p)\n\n    slidesToShow = p.slidesToShow ?? 1\n    slidesToScroll = p.slidesToScroll ?? 1\n    autoplay = p.autoplay ?? false\n    autoplayInterval = p.autoplayInterval ?? 3000\n    loop = p.loop ?? (autoplay ? true : false)\n    duration = p.duration ?? 500\n    transition = p.transition ?? undefined\n    easing = p.easing ?? undefined\n\n    if (slidesToShow > total) {\n        slidesToShow = total\n    }\n    if (slidesToScroll > total) {\n        slidesToScroll = total\n    }\n    if (slidesToShow <= 0) {\n        slidesToShow = 1\n    }\n    if (slidesToScroll <= 0) {\n        slidesToScroll = 1\n    }\n    if (slidesToScroll > slidesToShow) {\n        slidesToScroll = slidesToShow\n    }\n\n    const goTo = (_index: number) => {\n        if (_index === index) return;\n        if (_index < 0 || _index > total - slidesToShow) return;\n\n        setIndex(_index);\n\n        const indexes = []\n        for (let i = 0; i < slidesToShow; i++) {\n            indexes.push(_index + i)\n        }\n        onChange && onChange(_index, indexes)\n\n        const itemWidth = 100 / slidesToShow\n        const trackEle = track.current!;\n        const translate = itemWidth * _index\n        animating.current();\n        animating.current = animate({\n            duration: duration,\n            from: { x: state.current.x },\n            to: { x: translate },\n            onUpdate: ({ x }) => {\n                state.current.x = x\n                trackEle.style.transform = `translateX(-${x}%)`\n            },\n        });\n    }\n\n    const next = () => {\n        let _index = index\n        if (loop) {\n            if (_index >= total - slidesToShow) {\n                _index = 0\n            } else if (index + slidesToScroll > total - slidesToShow) {\n                _index = total - slidesToShow\n            } else {\n                _index = index + slidesToScroll\n            }\n        } else {\n            if (_index >= total - slidesToShow) {\n                _index = total - slidesToShow\n            } else if (index + slidesToScroll > total - slidesToShow) {\n                _index = total - slidesToShow\n            } else {\n                _index = index + slidesToScroll\n            }\n        }\n        const indexes = []\n        for (let i = 0; i < slidesToShow; i++) {\n            indexes.push(_index + i)\n        }\n        onNext && onNext(_index, indexes)\n        goTo(_index)\n    }\n\n    const prev = () => {\n        let _index = index\n        if (loop) {\n            if (_index <= 0) {\n                _index = total - slidesToShow\n            } else if (index - slidesToScroll < 0) {\n                _index = 0\n            } else {\n                _index = index - slidesToScroll\n            }\n        } else {\n            if (_index <= 0) {\n                _index = 0\n            } else if (index - slidesToScroll < 0) {\n                _index = 0\n            } else {\n                _index = index - slidesToScroll\n            }\n        }\n\n        const indexes = []\n        for (let i = 0; i < slidesToShow; i++) {\n            indexes.push(_index + i)\n        }\n        onPrev && onPrev(_index, indexes)\n        goTo(_index)\n    }\n\n    const stopAutoplay = () => {\n        if (autoplayRef.current) {\n            clearTimeout(autoplayRef.current);\n            autoplayRef.current = null;\n        }\n    }\n\n    const startAutoplay = () => {\n        stopAutoplay();\n        autoplayRef.current = setTimeout(next, autoplayInterval);\n    }\n\n    useEffect(() => {\n        if (!autoplay) return;\n        startAutoplay();\n        return () => stopAutoplay();\n    }, [index, autoplay]);\n\n    const indexes = useMemo(() => {\n        const idx = []\n        for (let i = 0; i < slidesToShow; i++) {\n            idx.push(index + i)\n        }\n        return idx\n    }, [index, slidesToShow])\n\n    useImperativeHandle(ref, () => ({\n        next,\n        prev,\n        goTo,\n        getIndex: () => index,\n    }));\n\n    useLayoutEffect(() => {\n        goTo(0)\n    }, [])\n\n    const startX = useRef(0);\n    const isDragging = useRef(false);\n\n    const handleStart = (x: number) => {\n        startX.current = x;\n        isDragging.current = true;\n    };\n\n    const handleEnd = (x: number) => {\n        if (!isDragging.current) return;\n        const diff = x - startX.current;\n        if (diff > 50) prev();\n        else if (diff < -50) next();\n        isDragging.current = false;\n    };\n\n    return (\n        <Tag\n            {...props}\n            baseClass='carousel'\n            ref={ref}\n            sxr={{\n                width: \"100%\",\n                overflow: \"hidden\",\n                cursor: \"grab\",\n                touchAction: \"pan-y\",\n                position: \"relative\",\n            }}\n        >\n            <Tag\n                baseClass='carousel-track'\n                ref={track}\n                sxr={{\n                    display: \"flex\",\n                    willChange: \"transform\",\n                    flexDirection: \"row\",\n                }}\n                onPointerDown={(e: any) => {\n                    e.preventDefault()\n                    handleStart(e.clientX)\n                }}\n                onPointerUp={(e: any) => handleEnd(e.clientX)}\n                onTouchStart={(e: any) => {\n                    e.preventDefault()\n                    handleStart(e.touches[0].clientX)\n                }}\n                onTouchEnd={(e: any) => handleEnd(e.changedTouches[0].clientX)}\n\n                onMouseEnter={() => {\n                    stopAutoplay()\n                }}\n                onMouseLeave={() => {\n                    if (autoplay) startAutoplay()\n                }}\n            >\n                {\n                    childs.map((child, index) => (\n                        transition ? <Transition\n                            key={index}\n                            open={indexes.includes(index)}\n                            variant={transition}\n                            easing={easing}\n                            duration={duration}\n                            initialTransition={false}\n                        >\n                            <Tag\n                                key={`${index}`}\n                                baseClass='carousel-item'\n                                sxr={{\n                                    p: 1,\n                                    userSelect: \"none\",\n                                    flexShrink: 0,\n                                    width: `${100 / slidesToShow}%`,\n                                }}\n                            >\n                                {child}\n                            </Tag>\n                        </Transition> : <Tag\n                            key={`${index}`}\n                            baseClass='carousel-item'\n                            sxr={{\n                                p: 1,\n                                userSelect: \"none\",\n                                flexShrink: 0,\n                                width: `${100 / slidesToShow}%`,\n                            }}\n                        >\n                            {child}\n                        </Tag>\n                    ))\n                }\n            </Tag>\n        </Tag>\n    )\n})\n\nexport default Carousel"],"names":[],"mappings":";;;;;;AA6BA;;AAAiE;;;AAG7D;AACA;;;AAGA;;;AAuBA;AAAkB;AAClB;AAAoB;AACpB;AAAU;AACV;AAAc;AACd;AAAsB;AACtB;AAAc;AACd;AAAgB;AAChB;AAAY;AAGZ;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAGA;;;AAGA;;;AAGA;;;AAGA;;;AAIA;;;;;;;AAOI;AACI;;AAEJ;AAEA;AACA;AACA;;AAEA;AACI;;AAEA;AACA;AACI;;;AAGP;AACL;;;;AAKQ;;;;AAGI;;;AAEA;;;;AAGJ;AACI;;;AAEA;;;AAEA;;;;AAIR;AACI;;AAEJ;;AAEJ;;;;AAKQ;AACI;;AACG;;;;AAGH;;;;AAGJ;;;AAEO;;;;AAGH;;;;AAKR;AACI;;AAEJ;;AAEJ;;AAGI;AACI;AACA;;AAER;;AAGI;;AAEJ;;AAGI;;AACA;AACA;AACJ;AAEA;;AAEI;AACI;;AAEJ;AACJ;AAEA;;;;AAII;AACH;;;;AAMD;AACA;AAEA;AACI;AACA;AACJ;AAEA;;;AAEI;;AACe;;AACM;AACrB;AACJ;AAEA;AAMY;AACA;AACA;AACA;AACA;AACH;AAMO;AACA;AACA;AACH;;AAGG;;;;;AAUA;AACJ;AAEI;AAAc;;AAiBE;AACA;AACA;AACA;;AASJ;AACA;AACA;AACA;;AAUhC;;"}

package/Checkbox/index.cjs

@@ -31,7 +31,7 @@ const Checkbox = React.forwardRef((props, ref) => {
     const [c, set] = React.useState(false);
     checked !== null && checked !== void 0 ? checked : (checked = c);
     size !== null && size !== void 0 ? size : (size = "medium");
-    color !== null && color !== void 0 ? color : (color = "brand");
+    color !== null && color !== void 0 ? color : (color = "primary");
     onChange = onChange || (() => set(!c));
     if (indeterminate) {
         checked = true;
@@ -47,7 +47,7 @@ const Checkbox = React.forwardRef((props, ref) => {
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(core.Tag, { baseClass: 'checkbox', onClick: () => {
                     onChange && onChange();
-                }, sxr: Object.assign({ height: size, width: size, display: "flex", alignItems: "center", justifyContent: "center", color: checked ? color : "text.secondary", cursor: "pointer", disabled: disabled, "& svg": {
+                }, sxr: Object.assign({ height: size, width: size, display: "flex", alignItems: "center", justifyContent: "center", color: checked ? color : "surface.muted", cursor: "pointer", disabled: disabled, "& svg": {
                         fontSize: size
                     } }, rest === null || rest === void 0 ? void 0 : rest.sx), children: checked ? (checkIcon || jsxRuntime.jsx(CheckIcon, {})) : (uncheckIcon || jsxRuntime.jsx(UnCheckIcon, {})) }), jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { component: 'input', ref: ref, readOnly: true, type: "checkbox", checked: checked, sxr: {
                     display: "none!important"

package/Checkbox/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Checkbox/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useState, ReactElement } from 'react';\nimport { Tag, useInterface, UseColorTemplateColor, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport CheckIcon from '@xanui/icons/CheckBox'\nimport UnCheckIcon from '@xanui/icons/CheckBoxOutlineBlank'\nimport IndeterminateCheckBoxIcon from '@xanui/icons/IndeterminateCheckBox';\n\n\nexport type CheckboxProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\n    checkIcon?: useBreakpointPropsType<ReactElement>;\n    uncheckIcon?: useBreakpointPropsType<ReactElement>;\n    indeterminate?: useBreakpointPropsType<boolean>;\n    checked?: boolean;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n}\n\nconst Checkbox = React.forwardRef((props: CheckboxProps, ref?: React.Ref<any>) => {\n    let [{ color, size, checkIcon, uncheckIcon, checked, indeterminate, disabled, onChange, ...rest }] = useInterface<any>(\"Checkbox\", props, {})\n    const _p: any = {}\n    if (checkIcon) _p.checkIcon = checkIcon\n    if (uncheckIcon) _p.uncheckIcon = uncheckIcon\n    if (indeterminate) _p.indeterminate = indeterminate\n    if (size) _p.size = size\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n\n    checkIcon = p.checkIcon\n    uncheckIcon = p.uncheckIcon\n    indeterminate = p.indeterminate\n    size = p.size\n    color = p.color\n\n    const [c, set] = useState(false)\n    checked ??= c\n    size ??= \"medium\"\n    color ??= \"brand\"\n\n    onChange = onChange || (() => set(!c));\n    if (indeterminate) {\n        checked = true\n        checkIcon = <IndeterminateCheckBoxIcon />\n    }\n\n    let sizes: any = {\n        small: 22,\n        medium: 24,\n        large: 32\n    }\n\n    if (typeof size === 'string' && sizes[size]) {\n        size = sizes[size]\n    }\n\n    return (\n        <>\n            <Tag\n                baseClass='checkbox'\n                onClick={() => {\n                    onChange && onChange()\n                }}\n                sxr={{\n                    height: size,\n                    width: size,\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    color: checked ? color : \"text.secondary\",\n                    cursor: \"pointer\",\n                    disabled: disabled,\n                    \"& svg\": {\n                        fontSize: size\n                    },\n                    ...rest?.sx\n                }}\n            >\n                {checked ? (checkIcon || <CheckIcon />) : (uncheckIcon || <UnCheckIcon />)}\n            </Tag>\n            <Tag\n                {...rest}\n                component='input'\n                ref={ref}\n                readOnly\n                type=\"checkbox\"\n                checked={checked}\n                sxr={{\n                    display: \"none!important\"\n                }}\n            />\n        </>\n    )\n})\n\nexport default Checkbox\n"],"names":[],"mappings":";;;;;;;;;;;AAiBA;AACI;;AAEA;AAAe;AACf;AAAiB;AACjB;AAAmB;AACnB;AAAU;AACV;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;;;;;AAOA;;;AAGI;;AAGJ;AACI;AACA;AACA;;;AAIA;;AAGJ;;;AAiBoB;;AAeJ;;AAKpB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Checkbox/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useState, ReactElement } from 'react';\nimport { Tag, useInterface, UseColorTemplateColor, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport CheckIcon from '@xanui/icons/CheckBox'\nimport UnCheckIcon from '@xanui/icons/CheckBoxOutlineBlank'\nimport IndeterminateCheckBoxIcon from '@xanui/icons/IndeterminateCheckBox';\n\n\nexport type CheckboxProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\n    checkIcon?: useBreakpointPropsType<ReactElement>;\n    uncheckIcon?: useBreakpointPropsType<ReactElement>;\n    indeterminate?: useBreakpointPropsType<boolean>;\n    checked?: boolean;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n}\n\nconst Checkbox = React.forwardRef((props: CheckboxProps, ref?: React.Ref<any>) => {\n    let [{ color, size, checkIcon, uncheckIcon, checked, indeterminate, disabled, onChange, ...rest }] = useInterface<any>(\"Checkbox\", props, {})\n    const _p: any = {}\n    if (checkIcon) _p.checkIcon = checkIcon\n    if (uncheckIcon) _p.uncheckIcon = uncheckIcon\n    if (indeterminate) _p.indeterminate = indeterminate\n    if (size) _p.size = size\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n\n    checkIcon = p.checkIcon\n    uncheckIcon = p.uncheckIcon\n    indeterminate = p.indeterminate\n    size = p.size\n    color = p.color\n\n    const [c, set] = useState(false)\n    checked ??= c\n    size ??= \"medium\"\n    color ??= \"primary\"\n\n    onChange = onChange || (() => set(!c));\n    if (indeterminate) {\n        checked = true\n        checkIcon = <IndeterminateCheckBoxIcon />\n    }\n\n    let sizes: any = {\n        small: 22,\n        medium: 24,\n        large: 32\n    }\n\n    if (typeof size === 'string' && sizes[size]) {\n        size = sizes[size]\n    }\n\n    return (\n        <>\n            <Tag\n                baseClass='checkbox'\n                onClick={() => {\n                    onChange && onChange()\n                }}\n                sxr={{\n                    height: size,\n                    width: size,\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    color: checked ? color : \"surface.muted\",\n                    cursor: \"pointer\",\n                    disabled: disabled,\n                    \"& svg\": {\n                        fontSize: size\n                    },\n                    ...rest?.sx\n                }}\n            >\n                {checked ? (checkIcon || <CheckIcon />) : (uncheckIcon || <UnCheckIcon />)}\n            </Tag>\n            <Tag\n                {...rest}\n                component='input'\n                ref={ref}\n                readOnly\n                type=\"checkbox\"\n                checked={checked}\n                sxr={{\n                    display: \"none!important\"\n                }}\n            />\n        </>\n    )\n})\n\nexport default Checkbox\n"],"names":[],"mappings":";;;;;;;;;;;AAiBA;AACI;;AAEA;AAAe;AACf;AAAiB;AACjB;AAAmB;AACnB;AAAU;AACV;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;;;;;AAOA;;;AAGI;;AAGJ;AACI;AACA;AACA;;;AAIA;;AAGJ;;;AAiBoB;;AAeJ;;AAKpB;;"}

package/Checkbox/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React__default, { ReactElement } from 'react';
 import { TagProps, useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';
 
 type CheckboxProps = Omit<TagProps<"input">, "color" | "size" | "component" | "type" | "checked"> & {
@@ -9,7 +9,7 @@ type CheckboxProps = Omit<TagProps<"input">, "color" | "size" | "component" | "t
     size?: useBreakpointPropsType<number | "small" | "medium" | "large">;
     color?: useBreakpointPropsType<UseColorTemplateColor>;
 };
-declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<any>>;
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React__default.RefAttributes<any>>;
 
 export { Checkbox as default };
 export type { CheckboxProps };

package/Checkbox/index.js

@@ -29,7 +29,7 @@ const Checkbox = React.forwardRef((props, ref) => {
     const [c, set] = useState(false);
     checked !== null && checked !== void 0 ? checked : (checked = c);
     size !== null && size !== void 0 ? size : (size = "medium");
-    color !== null && color !== void 0 ? color : (color = "brand");
+    color !== null && color !== void 0 ? color : (color = "primary");
     onChange = onChange || (() => set(!c));
     if (indeterminate) {
         checked = true;
@@ -45,7 +45,7 @@ const Checkbox = React.forwardRef((props, ref) => {
     }
     return (jsxs(Fragment, { children: [jsx(Tag, { baseClass: 'checkbox', onClick: () => {
                     onChange && onChange();
-                }, sxr: Object.assign({ height: size, width: size, display: "flex", alignItems: "center", justifyContent: "center", color: checked ? color : "text.secondary", cursor: "pointer", disabled: disabled, "& svg": {
+                }, sxr: Object.assign({ height: size, width: size, display: "flex", alignItems: "center", justifyContent: "center", color: checked ? color : "surface.muted", cursor: "pointer", disabled: disabled, "& svg": {
                         fontSize: size
                     } }, rest === null || rest === void 0 ? void 0 : rest.sx), children: checked ? (checkIcon || jsx(CheckIcon, {})) : (uncheckIcon || jsx(UnCheckIcon, {})) }), jsx(Tag, Object.assign({}, rest, { component: 'input', ref: ref, readOnly: true, type: "checkbox", checked: checked, sxr: {
                     display: "none!important"

package/Checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Checkbox/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useState, ReactElement } from 'react';\nimport { Tag, useInterface, UseColorTemplateColor, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport CheckIcon from '@xanui/icons/CheckBox'\nimport UnCheckIcon from '@xanui/icons/CheckBoxOutlineBlank'\nimport IndeterminateCheckBoxIcon from '@xanui/icons/IndeterminateCheckBox';\n\n\nexport type CheckboxProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\n    checkIcon?: useBreakpointPropsType<ReactElement>;\n    uncheckIcon?: useBreakpointPropsType<ReactElement>;\n    indeterminate?: useBreakpointPropsType<boolean>;\n    checked?: boolean;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n}\n\nconst Checkbox = React.forwardRef((props: CheckboxProps, ref?: React.Ref<any>) => {\n    let [{ color, size, checkIcon, uncheckIcon, checked, indeterminate, disabled, onChange, ...rest }] = useInterface<any>(\"Checkbox\", props, {})\n    const _p: any = {}\n    if (checkIcon) _p.checkIcon = checkIcon\n    if (uncheckIcon) _p.uncheckIcon = uncheckIcon\n    if (indeterminate) _p.indeterminate = indeterminate\n    if (size) _p.size = size\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n\n    checkIcon = p.checkIcon\n    uncheckIcon = p.uncheckIcon\n    indeterminate = p.indeterminate\n    size = p.size\n    color = p.color\n\n    const [c, set] = useState(false)\n    checked ??= c\n    size ??= \"medium\"\n    color ??= \"brand\"\n\n    onChange = onChange || (() => set(!c));\n    if (indeterminate) {\n        checked = true\n        checkIcon = <IndeterminateCheckBoxIcon />\n    }\n\n    let sizes: any = {\n        small: 22,\n        medium: 24,\n        large: 32\n    }\n\n    if (typeof size === 'string' && sizes[size]) {\n        size = sizes[size]\n    }\n\n    return (\n        <>\n            <Tag\n                baseClass='checkbox'\n                onClick={() => {\n                    onChange && onChange()\n                }}\n                sxr={{\n                    height: size,\n                    width: size,\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    color: checked ? color : \"text.secondary\",\n                    cursor: \"pointer\",\n                    disabled: disabled,\n                    \"& svg\": {\n                        fontSize: size\n                    },\n                    ...rest?.sx\n                }}\n            >\n                {checked ? (checkIcon || <CheckIcon />) : (uncheckIcon || <UnCheckIcon />)}\n            </Tag>\n            <Tag\n                {...rest}\n                component='input'\n                ref={ref}\n                readOnly\n                type=\"checkbox\"\n                checked={checked}\n                sxr={{\n                    display: \"none!important\"\n                }}\n            />\n        </>\n    )\n})\n\nexport default Checkbox\n"],"names":[],"mappings":";;;;;;;;;AAiBA;AACI;;AAEA;AAAe;AACf;AAAiB;AACjB;AAAmB;AACnB;AAAU;AACV;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;;;;;AAOA;;;AAGI;;AAGJ;AACI;AACA;AACA;;;AAIA;;AAGJ;;;AAiBoB;;AAeJ;;AAKpB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Checkbox/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useState, ReactElement } from 'react';\nimport { Tag, useInterface, UseColorTemplateColor, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport CheckIcon from '@xanui/icons/CheckBox'\nimport UnCheckIcon from '@xanui/icons/CheckBoxOutlineBlank'\nimport IndeterminateCheckBoxIcon from '@xanui/icons/IndeterminateCheckBox';\n\n\nexport type CheckboxProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\n    checkIcon?: useBreakpointPropsType<ReactElement>;\n    uncheckIcon?: useBreakpointPropsType<ReactElement>;\n    indeterminate?: useBreakpointPropsType<boolean>;\n    checked?: boolean;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n}\n\nconst Checkbox = React.forwardRef((props: CheckboxProps, ref?: React.Ref<any>) => {\n    let [{ color, size, checkIcon, uncheckIcon, checked, indeterminate, disabled, onChange, ...rest }] = useInterface<any>(\"Checkbox\", props, {})\n    const _p: any = {}\n    if (checkIcon) _p.checkIcon = checkIcon\n    if (uncheckIcon) _p.uncheckIcon = uncheckIcon\n    if (indeterminate) _p.indeterminate = indeterminate\n    if (size) _p.size = size\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n\n    checkIcon = p.checkIcon\n    uncheckIcon = p.uncheckIcon\n    indeterminate = p.indeterminate\n    size = p.size\n    color = p.color\n\n    const [c, set] = useState(false)\n    checked ??= c\n    size ??= \"medium\"\n    color ??= \"primary\"\n\n    onChange = onChange || (() => set(!c));\n    if (indeterminate) {\n        checked = true\n        checkIcon = <IndeterminateCheckBoxIcon />\n    }\n\n    let sizes: any = {\n        small: 22,\n        medium: 24,\n        large: 32\n    }\n\n    if (typeof size === 'string' && sizes[size]) {\n        size = sizes[size]\n    }\n\n    return (\n        <>\n            <Tag\n                baseClass='checkbox'\n                onClick={() => {\n                    onChange && onChange()\n                }}\n                sxr={{\n                    height: size,\n                    width: size,\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    color: checked ? color : \"surface.muted\",\n                    cursor: \"pointer\",\n                    disabled: disabled,\n                    \"& svg\": {\n                        fontSize: size\n                    },\n                    ...rest?.sx\n                }}\n            >\n                {checked ? (checkIcon || <CheckIcon />) : (uncheckIcon || <UnCheckIcon />)}\n            </Tag>\n            <Tag\n                {...rest}\n                component='input'\n                ref={ref}\n                readOnly\n                type=\"checkbox\"\n                checked={checked}\n                sxr={{\n                    display: \"none!important\"\n                }}\n            />\n        </>\n    )\n})\n\nexport default Checkbox\n"],"names":[],"mappings":";;;;;;;;;AAiBA;AACI;;AAEA;AAAe;AACf;AAAiB;AACjB;AAAmB;AACnB;AAAU;AACV;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;;;;;AAOA;;;AAGI;;AAGJ;AACI;AACA;AACA;;;AAIA;;AAGJ;;;AAiBoB;;AAeJ;;AAKpB;;"}

package/Chip/index.cjs

@@ -30,7 +30,7 @@ const Chip = React.forwardRef((props, ref) => {
     label = p.label;
     startIcon = p.startIcon;
     endIcon = p.endIcon;
-    color = p.color || "brand";
+    color = p.color || "primary";
     variant = p.variant || "fill";
     corner = p.corner || "circle";
     size = p.size || "medium";
@@ -58,7 +58,7 @@ const Chip = React.forwardRef((props, ref) => {
             px: startIcon || endIcon ? .8 : 1.5,
         }
     };
-    return (jsxRuntime.jsxs(core.Tag, Object.assign({}, cornerCss, template.primary, (sizes[size] || {}), rest, { sxr: {
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({}, cornerCss, template.main, (sizes[size] || {}), rest, { sxr: {
             display: "inline-flex",
             flexDirection: "row",
             alignItems: "center",
@@ -73,7 +73,7 @@ const Chip = React.forwardRef((props, ref) => {
         }, baseClass: 'chip', ref: ref, children: [startIcon, jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.label, { baseClass: 'chip-label', sxr: {
                     alignItems: "center",
                     flexBox: true,
-                    color: template.primary.color + "!important"
+                    color: template.main.color + "!important"
                 }, children: label })), endIcon] })));
 });
 

package/Chip/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Chip/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\n\n\n\nexport type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, \"color\" | \"children\" | \"size\"> & {\n    label: useBreakpointPropsType<string | ReactElement>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n    slotProps?: {\n        label?: Omit<TagProps<\"div\">, \"children\">\n    }\n}\n\n\nconst Chip = React.forwardRef(<T extends TagComponentType = 'div'>(props: ChipProps<T>, ref: React.Ref<any>) => {\n    let [{ label, variant, startIcon, endIcon, color, corner, size, slotProps, ...rest }] = useInterface<any>(\"Chip\", props, {})\n    const _p: any = {}\n    if (label) _p.label = label\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    if (size) _p.size = size\n    if (slotProps) _p.slotProps = slotProps\n    const p: any = useBreakpointProps(_p)\n\n    label = p.label\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    color = p.color || \"brand\"\n    variant = p.variant || \"fill\"\n    corner = p.corner || \"circle\"\n    size = p.size || \"medium\"\n    slotProps = p.slotProps\n    rest.sx = (rest as any).sx || {};\n\n    const cornerCss = useCorner(corner)\n    const template = useColorTemplate(color, variant)\n\n    const sizes: any = {\n        small: {\n            height: 24,\n            gap: .5,\n            px: startIcon || endIcon ? .8 : 1,\n            fontSize: \"small\"\n        },\n        medium: {\n            height: 32,\n            gap: 1,\n            px: startIcon || endIcon ? .8 : 1.5,\n            fontSize: 'button',\n        },\n        large: {\n            height: 40,\n            fontSize: 'text',\n            gap: 1,\n            px: startIcon || endIcon ? .8 : 1.5,\n        }\n    }\n\n    return (\n        <Tag\n            {...cornerCss}\n            {...template.primary}\n            {...(sizes[size as any] || {})}\n            {...rest}\n            sxr={{\n                display: \"inline-flex\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                transition: \"background .3s\",\n                overflow: \"hidden\",\n\n                \"&  > *\": {\n                    flex: \"0 0 auto\",\n                    textOverflow: \"ellipsis\",\n                    whiteSpace: \"nowrap\",\n                    overflow: \"hidden\",\n                },\n            }}\n            baseClass='chip'\n            ref={ref}\n        >\n            {startIcon}\n            <Tag\n                {...slotProps?.label}\n                baseClass='chip-label'\n                sxr={{\n                    alignItems: \"center\",\n                    flexBox: true,\n                    color: template.primary.color + \"!important\"\n                }}\n            >{label}</Tag>\n            {endIcon}\n        </Tag>\n    )\n})\n\nexport default Chip\n"],"names":[],"mappings":";;;;;;;;;AAsBA;AACI;;AAEA;AAAW;AACX;AAAe;AACf;AAAa;AACb;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAAU;AACV;AAAe;AACf;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;;AAGA;AACI;AACI;AACA;;AAEA;AACH;AACD;AACI;AACA;;AAEA;AACH;AACD;AACI;AACA;AACA;;AAEH;;;AAUO;AACA;AACA;AACA;AACA;AAEA;AACI;AACA;AACA;AACA;AACH;;AAUG;AACA;AACA;AACH;AAKjB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Chip/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\n\n\n\nexport type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, \"color\" | \"children\" | \"size\"> & {\n    label: useBreakpointPropsType<string | ReactElement>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n    slotProps?: {\n        label?: Omit<TagProps<\"div\">, \"children\">\n    }\n}\n\n\nconst Chip = React.forwardRef(<T extends TagComponentType = 'div'>(props: ChipProps<T>, ref: React.Ref<any>) => {\n    let [{ label, variant, startIcon, endIcon, color, corner, size, slotProps, ...rest }] = useInterface<any>(\"Chip\", props, {})\n    const _p: any = {}\n    if (label) _p.label = label\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    if (size) _p.size = size\n    if (slotProps) _p.slotProps = slotProps\n    const p: any = useBreakpointProps(_p)\n\n    label = p.label\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    color = p.color || \"primary\"\n    variant = p.variant || \"fill\"\n    corner = p.corner || \"circle\"\n    size = p.size || \"medium\"\n    slotProps = p.slotProps\n    rest.sx = (rest as any).sx || {};\n\n    const cornerCss = useCorner(corner)\n    const template = useColorTemplate(color, variant)\n\n    const sizes: any = {\n        small: {\n            height: 24,\n            gap: .5,\n            px: startIcon || endIcon ? .8 : 1,\n            fontSize: \"small\"\n        },\n        medium: {\n            height: 32,\n            gap: 1,\n            px: startIcon || endIcon ? .8 : 1.5,\n            fontSize: 'button',\n        },\n        large: {\n            height: 40,\n            fontSize: 'text',\n            gap: 1,\n            px: startIcon || endIcon ? .8 : 1.5,\n        }\n    }\n\n    return (\n        <Tag\n            {...cornerCss}\n            {...template.main}\n            {...(sizes[size as any] || {})}\n            {...rest}\n            sxr={{\n                display: \"inline-flex\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                transition: \"background .3s\",\n                overflow: \"hidden\",\n\n                \"&  > *\": {\n                    flex: \"0 0 auto\",\n                    textOverflow: \"ellipsis\",\n                    whiteSpace: \"nowrap\",\n                    overflow: \"hidden\",\n                },\n            }}\n            baseClass='chip'\n            ref={ref}\n        >\n            {startIcon}\n            <Tag\n                {...slotProps?.label}\n                baseClass='chip-label'\n                sxr={{\n                    alignItems: \"center\",\n                    flexBox: true,\n                    color: template.main.color + \"!important\"\n                }}\n            >{label}</Tag>\n            {endIcon}\n        </Tag>\n    )\n})\n\nexport default Chip\n"],"names":[],"mappings":";;;;;;;;;AAsBA;AACI;;AAEA;AAAW;AACX;AAAe;AACf;AAAa;AACb;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAAU;AACV;AAAe;AACf;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;;AAGA;AACI;AACI;AACA;;AAEA;AACH;AACD;AACI;AACA;;AAEA;AACH;AACD;AACI;AACA;AACA;;AAEH;;;AAUO;AACA;AACA;AACA;AACA;AAEA;AACI;AACA;AACA;AACA;AACH;;AAUG;AACA;AACA;AACH;AAKjB;;"}

package/Chip/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React__default, { ReactElement } from 'react';
 import { TagComponentType, TagProps, useBreakpointPropsType, UseColorTemplateColor, UseColorTemplateType } from '@xanui/core';
 import { UseCornerTypes } from '../useCorner/index.js';
 
@@ -14,7 +14,7 @@ type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, "color" |
         label?: Omit<TagProps<"div">, "children">;
     };
 };
-declare const Chip: React.ForwardRefExoticComponent<Omit<ChipProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+declare const Chip: React__default.ForwardRefExoticComponent<Omit<ChipProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
 
 export { Chip as default };
 export type { ChipProps };

package/Chip/index.js

@@ -28,7 +28,7 @@ const Chip = React.forwardRef((props, ref) => {
     label = p.label;
     startIcon = p.startIcon;
     endIcon = p.endIcon;
-    color = p.color || "brand";
+    color = p.color || "primary";
     variant = p.variant || "fill";
     corner = p.corner || "circle";
     size = p.size || "medium";
@@ -56,7 +56,7 @@ const Chip = React.forwardRef((props, ref) => {
             px: startIcon || endIcon ? .8 : 1.5,
         }
     };
-    return (jsxs(Tag, Object.assign({}, cornerCss, template.primary, (sizes[size] || {}), rest, { sxr: {
+    return (jsxs(Tag, Object.assign({}, cornerCss, template.main, (sizes[size] || {}), rest, { sxr: {
             display: "inline-flex",
             flexDirection: "row",
             alignItems: "center",
@@ -71,7 +71,7 @@ const Chip = React.forwardRef((props, ref) => {
         }, baseClass: 'chip', ref: ref, children: [startIcon, jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.label, { baseClass: 'chip-label', sxr: {
                     alignItems: "center",
                     flexBox: true,
-                    color: template.primary.color + "!important"
+                    color: template.main.color + "!important"
                 }, children: label })), endIcon] })));
 });
 

package/Chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Chip/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\n\n\n\nexport type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, \"color\" | \"children\" | \"size\"> & {\n    label: useBreakpointPropsType<string | ReactElement>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n    slotProps?: {\n        label?: Omit<TagProps<\"div\">, \"children\">\n    }\n}\n\n\nconst Chip = React.forwardRef(<T extends TagComponentType = 'div'>(props: ChipProps<T>, ref: React.Ref<any>) => {\n    let [{ label, variant, startIcon, endIcon, color, corner, size, slotProps, ...rest }] = useInterface<any>(\"Chip\", props, {})\n    const _p: any = {}\n    if (label) _p.label = label\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    if (size) _p.size = size\n    if (slotProps) _p.slotProps = slotProps\n    const p: any = useBreakpointProps(_p)\n\n    label = p.label\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    color = p.color || \"brand\"\n    variant = p.variant || \"fill\"\n    corner = p.corner || \"circle\"\n    size = p.size || \"medium\"\n    slotProps = p.slotProps\n    rest.sx = (rest as any).sx || {};\n\n    const cornerCss = useCorner(corner)\n    const template = useColorTemplate(color, variant)\n\n    const sizes: any = {\n        small: {\n            height: 24,\n            gap: .5,\n            px: startIcon || endIcon ? .8 : 1,\n            fontSize: \"small\"\n        },\n        medium: {\n            height: 32,\n            gap: 1,\n            px: startIcon || endIcon ? .8 : 1.5,\n            fontSize: 'button',\n        },\n        large: {\n            height: 40,\n            fontSize: 'text',\n            gap: 1,\n            px: startIcon || endIcon ? .8 : 1.5,\n        }\n    }\n\n    return (\n        <Tag\n            {...cornerCss}\n            {...template.primary}\n            {...(sizes[size as any] || {})}\n            {...rest}\n            sxr={{\n                display: \"inline-flex\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                transition: \"background .3s\",\n                overflow: \"hidden\",\n\n                \"&  > *\": {\n                    flex: \"0 0 auto\",\n                    textOverflow: \"ellipsis\",\n                    whiteSpace: \"nowrap\",\n                    overflow: \"hidden\",\n                },\n            }}\n            baseClass='chip'\n            ref={ref}\n        >\n            {startIcon}\n            <Tag\n                {...slotProps?.label}\n                baseClass='chip-label'\n                sxr={{\n                    alignItems: \"center\",\n                    flexBox: true,\n                    color: template.primary.color + \"!important\"\n                }}\n            >{label}</Tag>\n            {endIcon}\n        </Tag>\n    )\n})\n\nexport default Chip\n"],"names":[],"mappings":";;;;;;;AAsBA;AACI;;AAEA;AAAW;AACX;AAAe;AACf;AAAa;AACb;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAAU;AACV;AAAe;AACf;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;;AAGA;AACI;AACI;AACA;;AAEA;AACH;AACD;AACI;AACA;;AAEA;AACH;AACD;AACI;AACA;AACA;;AAEH;;;AAUO;AACA;AACA;AACA;AACA;AAEA;AACI;AACA;AACA;AACA;AACH;;AAUG;AACA;AACA;AACH;AAKjB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Chip/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\n\n\n\nexport type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, \"color\" | \"children\" | \"size\"> & {\n    label: useBreakpointPropsType<string | ReactElement>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n    slotProps?: {\n        label?: Omit<TagProps<\"div\">, \"children\">\n    }\n}\n\n\nconst Chip = React.forwardRef(<T extends TagComponentType = 'div'>(props: ChipProps<T>, ref: React.Ref<any>) => {\n    let [{ label, variant, startIcon, endIcon, color, corner, size, slotProps, ...rest }] = useInterface<any>(\"Chip\", props, {})\n    const _p: any = {}\n    if (label) _p.label = label\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    if (size) _p.size = size\n    if (slotProps) _p.slotProps = slotProps\n    const p: any = useBreakpointProps(_p)\n\n    label = p.label\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    color = p.color || \"primary\"\n    variant = p.variant || \"fill\"\n    corner = p.corner || \"circle\"\n    size = p.size || \"medium\"\n    slotProps = p.slotProps\n    rest.sx = (rest as any).sx || {};\n\n    const cornerCss = useCorner(corner)\n    const template = useColorTemplate(color, variant)\n\n    const sizes: any = {\n        small: {\n            height: 24,\n            gap: .5,\n            px: startIcon || endIcon ? .8 : 1,\n            fontSize: \"small\"\n        },\n        medium: {\n            height: 32,\n            gap: 1,\n            px: startIcon || endIcon ? .8 : 1.5,\n            fontSize: 'button',\n        },\n        large: {\n            height: 40,\n            fontSize: 'text',\n            gap: 1,\n            px: startIcon || endIcon ? .8 : 1.5,\n        }\n    }\n\n    return (\n        <Tag\n            {...cornerCss}\n            {...template.main}\n            {...(sizes[size as any] || {})}\n            {...rest}\n            sxr={{\n                display: \"inline-flex\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                transition: \"background .3s\",\n                overflow: \"hidden\",\n\n                \"&  > *\": {\n                    flex: \"0 0 auto\",\n                    textOverflow: \"ellipsis\",\n                    whiteSpace: \"nowrap\",\n                    overflow: \"hidden\",\n                },\n            }}\n            baseClass='chip'\n            ref={ref}\n        >\n            {startIcon}\n            <Tag\n                {...slotProps?.label}\n                baseClass='chip-label'\n                sxr={{\n                    alignItems: \"center\",\n                    flexBox: true,\n                    color: template.main.color + \"!important\"\n                }}\n            >{label}</Tag>\n            {endIcon}\n        </Tag>\n    )\n})\n\nexport default Chip\n"],"names":[],"mappings":";;;;;;;AAsBA;AACI;;AAEA;AAAW;AACX;AAAe;AACf;AAAa;AACb;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAAU;AACV;AAAe;AACf;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;;AAGA;AACI;AACI;AACA;;AAEA;AACH;AACD;AACI;AACA;;AAEA;AACH;AACD;AACI;AACA;AACA;;AAEH;;;AAUO;AACA;AACA;AACA;AACA;AAEA;AACI;AACA;AACA;AACA;AACH;;AAUG;AACA;AACA;AACH;AAKjB;;"}

package/CircleProgress/index.cjs

@@ -32,7 +32,7 @@ const CircleProgress = React.forwardRef((_a, ref) => {
     if (speed)
         _p.speed = speed;
     const p = core.useBreakpointProps(_p);
-    color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
+    color = (_b = p.color) !== null && _b !== void 0 ? _b : "primary";
     trackColor = p.trackColor;
     thumbColor = p.thumbColor;
     size = (_c = p.size) !== null && _c !== void 0 ? _c : "medium";
@@ -41,16 +41,16 @@ const CircleProgress = React.forwardRef((_a, ref) => {
     value = p.value;
     hideTrack = p.hideTrack;
     showPercentage = p.showPercentage;
-    speed = (_e = p.speed) !== null && _e !== void 0 ? _e : 1.3;
-    if (trackColor === 'default') {
-        trackColor = "divider";
+    speed = (_e = p.speed) !== null && _e !== void 0 ? _e : 1.5;
+    if (trackColor === 'surface') {
+        trackColor = "surface.divider";
     }
-    if (thumbColor === 'default') {
-        thumbColor = "divider.secondary";
+    if (thumbColor === 'surface') {
+        thumbColor = "surface.contrast";
     }
     let sizes = {
         small: 24,
-        medium: 32,
+        medium: 34,
         large: 44
     };
     if (typeof size === 'string' && sizes[size]) {
@@ -65,7 +65,7 @@ const CircleProgress = React.forwardRef((_a, ref) => {
     const percent = circumference - ((value || 0) / 100) * circumference;
     if (showPercentage && !children) {
         children = jsxRuntime.jsxs(core.Tag, { sxr: {
-                color: color === 'default' ? "text.primary" : `${color}.primary`,
+                color: color === 'surface' ? "surface.contrast" : `${color}.main`,
                 fontSize: size / 4
             }, children: [value, "%"] });
     }
@@ -91,7 +91,7 @@ const CircleProgress = React.forwardRef((_a, ref) => {
                 "& circle.circle-progress-thumb": {
                     strokeDasharray: circumference,
                     strokeDashoffset: percent,
-                    stroke: thumbColor || (color === 'default' ? `divider` : `${color}.primary`),
+                    stroke: thumbColor || (color === 'surface' ? `surface.contrast` : `${color}.main`),
                     fill: "none",
                     strokeWidth: thumbSize,
                     strokeLinecap: "round",
@@ -104,7 +104,7 @@ const CircleProgress = React.forwardRef((_a, ref) => {
                 },
                 "& circle.circle-progress-track": {
                     fill: "none",
-                    stroke: trackColor || (color === 'default' ? `text.primary` : `${color}.soft.secondary`),
+                    stroke: trackColor || (`surface.divider`),
                     strokeWidth: trackSize !== null && trackSize !== void 0 ? trackSize : thumbSize,
                 }
             },

package/CircleProgress/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/CircleProgress/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\nexport type CircleProgressProps = {\n    children?: ReactElement;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    trackColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    thumbColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    thumbSize?: useBreakpointPropsType<number>;\n    trackSize?: useBreakpointPropsType<number>;\n    value?: useBreakpointPropsType<number>;\n    hideTrack?: useBreakpointPropsType<boolean>;\n    showPercentage?: useBreakpointPropsType<boolean>;\n    speed?: useBreakpointPropsType<number>;\n}\n\nconst CircleProgress = React.forwardRef(({ children, ...props }: CircleProgressProps, ref: React.Ref<any>) => {\n    let [{ color, trackColor, thumbColor, size, value, thumbSize, hideTrack, trackSize, showPercentage, speed }] = useInterface<any>(\"CircleProgress\", props, {})\n    const _p: any = {}\n    if (color) _p.color = color\n    if (trackColor) _p.trackColor = trackColor\n    if (thumbColor) _p.thumbColor = thumbColor\n    if (size) _p.size = size\n    if (thumbSize) _p.thumbSize = thumbSize\n    if (trackSize) _p.trackSize = trackSize\n    if (value) _p.value = value\n    if (hideTrack) _p.hideTrack = hideTrack\n    if (showPercentage) _p.showPercentage = showPercentage\n    if (speed) _p.speed = speed\n    const p: any = useBreakpointProps(_p)\n\n    color = p.color ?? \"brand\"\n    trackColor = p.trackColor\n    thumbColor = p.thumbColor\n    size = p.size ?? \"medium\"\n    thumbSize = p.thumbSize ?? 4\n    trackSize = p.trackSize\n    value = p.value\n    hideTrack = p.hideTrack\n    showPercentage = p.showPercentage\n    speed = p.speed ?? 1.3\n\n    if (trackColor === 'default') {\n        trackColor = \"divider\"\n    }\n\n    if (thumbColor === 'default') {\n        thumbColor = \"divider.secondary\"\n    }\n\n\n    let sizes: any = {\n        small: 24,\n        medium: 32,\n        large: 44\n    }\n    if (typeof size === 'string' && sizes[size]) {\n        size = sizes[size]\n    }\n\n    let isVal = typeof value === 'number'\n    const animrotate = \"anim\" + useId().replace(\":\", \"\")\n    const animdash = \"anim\" + useId().replace(\":\", \"\")\n    if (isVal && (value as number) > 100) value = 100\n    const circumference = 125.66370614359172 //radius * 2 * Math.PI\n    const percent = circumference - ((value || 0) / 100) * circumference\n\n    if (showPercentage && !children) {\n        children = <Tag\n            sxr={{\n                color: color === 'default' ? \"text.primary\" : `${color}.primary`,\n                fontSize: size / 4\n            }}\n        >{value}%</Tag>\n    }\n\n    return (\n        <Tag\n            baseClass='circle-progress'\n            sxr={{\n                display: \"inline-flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                \"& svg[class='circle-progress-svg']\": {\n                    zIndex: 1,\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    width: \"100%\",\n                    height: \"100%\",\n                    transform: isVal ? \"rotate(-90deg)\" : \"none\",\n                    transformOrigin: isVal ? \"center\" : \"initial\",\n                    animation: isVal ? \"none\" : `${animrotate} ${speed}s linear infinite`,\n                    [`@keyframes ${animrotate}`]: {\n                        \"100%\": {\n                            transform: \"rotate(360deg)\"\n                        }\n                    },\n                    \"& circle.circle-progress-thumb\": {\n\n                        strokeDasharray: circumference,\n                        strokeDashoffset: percent,\n                        stroke: thumbColor || (color === 'default' ? `divider` : `${color}.primary`),\n                        fill: \"none\",\n                        strokeWidth: thumbSize,\n                        strokeLinecap: \"round\",\n                        animation: isVal ? \"none\" : `${animdash} ${speed}s ease-in-out infinite`,\n                        [`@keyframes ${animdash}`]: {\n                            \"0%\": { strokeDasharray: \"1, 150\", strokeDashoffset: 0 },\n                            \"50%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -35 },\n                            \"100%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -124 }\n                        }\n                    },\n                    \"& circle.circle-progress-track\": {\n                        fill: \"none\",\n                        stroke: trackColor || (color === 'default' ? `text.primary` : `${color}.soft.secondary`),\n                        strokeWidth: trackSize ?? thumbSize,\n                    }\n                },\n                width: size,\n                height: size,\n                position: \"relative\"\n            }}\n            ref={ref}\n        >\n            <svg viewBox=\"0 0 50 50\" className=\"circle-progress-svg\">\n                {!hideTrack && <circle className=\"circle-progress-track\" cx=\"25\" cy=\"25\" r={20} />}\n                <circle className=\"circle-progress-thumb\" cx=\"25\" cy=\"25\" r={20} />\n            </svg>\n            {!!children && <Tag\n                baseClass=\"circle-progress-content\"\n                sxr={{\n                    zIndex: 2,\n                    width: size - thumbSize,\n                    height: size - thumbSize,\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    '& *': {\n                        maxWidth: size - (thumbSize + 8),\n                        maxHeight: size - (thumbSize + 8),\n                    }\n                }}\n            >\n                {children}\n            </Tag>}\n        </Tag >\n    )\n})\n\nexport default CircleProgress\n\n"],"names":[],"mappings":";;;;;;;;AAkBA;;AAAyC;AACrC;;AAEA;AAAW;AACX;AAAgB;AAChB;AAAgB;AAChB;AAAU;AACV;AAAe;AACf;AAAe;AACf;AAAW;AACX;AAAe;AACf;AAAoB;AACpB;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAIA;;;AAKA;AACI;AACA;AACA;;;AAGA;;AAGJ;AACA;AACA;AACA;;AACA;AACA;AAEA;AACI;AAEQ;;;;;AAUA;AACA;AACA;AACA;AACI;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACI;AACI;AACH;AACJ;AACD;AAEI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIC;AACJ;AACD;AACI;AACA;AACA;AACH;AACJ;AACD;AACA;AACA;AACH;AAUO;;;AAGA;AACA;AACA;AACA;AACI;AACA;AACH;AACJ;AAMjB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/CircleProgress/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\nexport type CircleProgressProps = {\n    children?: ReactElement;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    trackColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    thumbColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    thumbSize?: useBreakpointPropsType<number>;\n    trackSize?: useBreakpointPropsType<number>;\n    value?: useBreakpointPropsType<number>;\n    hideTrack?: useBreakpointPropsType<boolean>;\n    showPercentage?: useBreakpointPropsType<boolean>;\n    speed?: useBreakpointPropsType<number>;\n}\n\nconst CircleProgress = React.forwardRef(({ children, ...props }: CircleProgressProps, ref: React.Ref<any>) => {\n    let [{ color, trackColor, thumbColor, size, value, thumbSize, hideTrack, trackSize, showPercentage, speed }] = useInterface<any>(\"CircleProgress\", props, {})\n    const _p: any = {}\n    if (color) _p.color = color\n    if (trackColor) _p.trackColor = trackColor\n    if (thumbColor) _p.thumbColor = thumbColor\n    if (size) _p.size = size\n    if (thumbSize) _p.thumbSize = thumbSize\n    if (trackSize) _p.trackSize = trackSize\n    if (value) _p.value = value\n    if (hideTrack) _p.hideTrack = hideTrack\n    if (showPercentage) _p.showPercentage = showPercentage\n    if (speed) _p.speed = speed\n    const p: any = useBreakpointProps(_p)\n\n    color = p.color ?? \"primary\"\n    trackColor = p.trackColor\n    thumbColor = p.thumbColor\n    size = p.size ?? \"medium\"\n    thumbSize = p.thumbSize ?? 4\n    trackSize = p.trackSize\n    value = p.value\n    hideTrack = p.hideTrack\n    showPercentage = p.showPercentage\n    speed = p.speed ?? 1.5\n\n    if (trackColor === 'surface') {\n        trackColor = \"surface.divider\"\n    }\n\n    if (thumbColor === 'surface') {\n        thumbColor = \"surface.contrast\"\n    }\n\n\n    let sizes: any = {\n        small: 24,\n        medium: 34,\n        large: 44\n    }\n    if (typeof size === 'string' && sizes[size]) {\n        size = sizes[size]\n    }\n\n    let isVal = typeof value === 'number'\n    const animrotate = \"anim\" + useId().replace(\":\", \"\")\n    const animdash = \"anim\" + useId().replace(\":\", \"\")\n    if (isVal && (value as number) > 100) value = 100\n    const circumference = 125.66370614359172 //radius * 2 * Math.PI\n    const percent = circumference - ((value || 0) / 100) * circumference\n\n    if (showPercentage && !children) {\n        children = <Tag\n            sxr={{\n                color: color === 'surface' ? \"surface.contrast\" : `${color}.main`,\n                fontSize: size / 4\n            }}\n        >{value}%</Tag>\n    }\n\n    return (\n        <Tag\n            baseClass='circle-progress'\n            sxr={{\n                display: \"inline-flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                \"& svg[class='circle-progress-svg']\": {\n                    zIndex: 1,\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    width: \"100%\",\n                    height: \"100%\",\n                    transform: isVal ? \"rotate(-90deg)\" : \"none\",\n                    transformOrigin: isVal ? \"center\" : \"initial\",\n                    animation: isVal ? \"none\" : `${animrotate} ${speed}s linear infinite`,\n                    [`@keyframes ${animrotate}`]: {\n                        \"100%\": {\n                            transform: \"rotate(360deg)\"\n                        }\n                    },\n                    \"& circle.circle-progress-thumb\": {\n                        strokeDasharray: circumference,\n                        strokeDashoffset: percent,\n                        stroke: thumbColor || (color === 'surface' ? `surface.contrast` : `${color}.main`),\n                        fill: \"none\",\n                        strokeWidth: thumbSize,\n                        strokeLinecap: \"round\",\n                        animation: isVal ? \"none\" : `${animdash} ${speed}s ease-in-out infinite`,\n                        [`@keyframes ${animdash}`]: {\n                            \"0%\": { strokeDasharray: \"1, 150\", strokeDashoffset: 0 },\n                            \"50%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -35 },\n                            \"100%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -124 }\n                        }\n                    },\n                    \"& circle.circle-progress-track\": {\n                        fill: \"none\",\n                        stroke: trackColor || (`surface.divider`),\n                        strokeWidth: trackSize ?? thumbSize,\n                    }\n                },\n                width: size,\n                height: size,\n                position: \"relative\"\n            }}\n            ref={ref}\n        >\n            <svg viewBox=\"0 0 50 50\" className=\"circle-progress-svg\">\n                {!hideTrack && <circle className=\"circle-progress-track\" cx=\"25\" cy=\"25\" r={20} />}\n                <circle className=\"circle-progress-thumb\" cx=\"25\" cy=\"25\" r={20} />\n            </svg>\n            {!!children && <Tag\n                baseClass=\"circle-progress-content\"\n                sxr={{\n                    zIndex: 2,\n                    width: size - thumbSize,\n                    height: size - thumbSize,\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    '& *': {\n                        maxWidth: size - (thumbSize + 8),\n                        maxHeight: size - (thumbSize + 8),\n                    }\n                }}\n            >\n                {children}\n            </Tag>}\n        </Tag >\n    )\n})\n\nexport default CircleProgress\n\n"],"names":[],"mappings":";;;;;;;;AAkBA;;AAAyC;AACrC;;AAEA;AAAW;AACX;AAAgB;AAChB;AAAgB;AAChB;AAAU;AACV;AAAe;AACf;AAAe;AACf;AAAW;AACX;AAAe;AACf;AAAoB;AACpB;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAIA;;;AAKA;AACI;AACA;AACA;;;AAGA;;AAGJ;AACA;AACA;AACA;;AACA;AACA;AAEA;AACI;AAEQ;;;;;AAUA;AACA;AACA;AACA;AACI;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACI;AACI;AACH;AACJ;AACD;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIC;AACJ;AACD;AACI;AACA;AACA;AACH;AACJ;AACD;AACA;AACA;AACH;AAUO;;;AAGA;AACA;AACA;AACA;AACI;AACA;AACH;AACJ;AAMjB;;"}

package/CircleProgress/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React__default, { ReactElement } from 'react';
 import { useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';
 
 type CircleProgressProps = {
@@ -14,7 +14,7 @@ type CircleProgressProps = {
     showPercentage?: useBreakpointPropsType<boolean>;
     speed?: useBreakpointPropsType<number>;
 };
-declare const CircleProgress: React.ForwardRefExoticComponent<CircleProgressProps & React.RefAttributes<any>>;
+declare const CircleProgress: React__default.ForwardRefExoticComponent<CircleProgressProps & React__default.RefAttributes<any>>;
 
 export { CircleProgress as default };
 export type { CircleProgressProps };

package/CircleProgress/index.js

@@ -30,7 +30,7 @@ const CircleProgress = React.forwardRef((_a, ref) => {
     if (speed)
         _p.speed = speed;
     const p = useBreakpointProps(_p);
-    color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
+    color = (_b = p.color) !== null && _b !== void 0 ? _b : "primary";
     trackColor = p.trackColor;
     thumbColor = p.thumbColor;
     size = (_c = p.size) !== null && _c !== void 0 ? _c : "medium";
@@ -39,16 +39,16 @@ const CircleProgress = React.forwardRef((_a, ref) => {
     value = p.value;
     hideTrack = p.hideTrack;
     showPercentage = p.showPercentage;
-    speed = (_e = p.speed) !== null && _e !== void 0 ? _e : 1.3;
-    if (trackColor === 'default') {
-        trackColor = "divider";
+    speed = (_e = p.speed) !== null && _e !== void 0 ? _e : 1.5;
+    if (trackColor === 'surface') {
+        trackColor = "surface.divider";
     }
-    if (thumbColor === 'default') {
-        thumbColor = "divider.secondary";
+    if (thumbColor === 'surface') {
+        thumbColor = "surface.contrast";
     }
     let sizes = {
         small: 24,
-        medium: 32,
+        medium: 34,
         large: 44
     };
     if (typeof size === 'string' && sizes[size]) {
@@ -63,7 +63,7 @@ const CircleProgress = React.forwardRef((_a, ref) => {
     const percent = circumference - ((value || 0) / 100) * circumference;
     if (showPercentage && !children) {
         children = jsxs(Tag, { sxr: {
-                color: color === 'default' ? "text.primary" : `${color}.primary`,
+                color: color === 'surface' ? "surface.contrast" : `${color}.main`,
                 fontSize: size / 4
             }, children: [value, "%"] });
     }
@@ -89,7 +89,7 @@ const CircleProgress = React.forwardRef((_a, ref) => {
                 "& circle.circle-progress-thumb": {
                     strokeDasharray: circumference,
                     strokeDashoffset: percent,
-                    stroke: thumbColor || (color === 'default' ? `divider` : `${color}.primary`),
+                    stroke: thumbColor || (color === 'surface' ? `surface.contrast` : `${color}.main`),
                     fill: "none",
                     strokeWidth: thumbSize,
                     strokeLinecap: "round",
@@ -102,7 +102,7 @@ const CircleProgress = React.forwardRef((_a, ref) => {
                 },
                 "& circle.circle-progress-track": {
                     fill: "none",
-                    stroke: trackColor || (color === 'default' ? `text.primary` : `${color}.soft.secondary`),
+                    stroke: trackColor || (`surface.divider`),
                     strokeWidth: trackSize !== null && trackSize !== void 0 ? trackSize : thumbSize,
                 }
             },

package/CircleProgress/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/CircleProgress/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\nexport type CircleProgressProps = {\n    children?: ReactElement;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    trackColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    thumbColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    thumbSize?: useBreakpointPropsType<number>;\n    trackSize?: useBreakpointPropsType<number>;\n    value?: useBreakpointPropsType<number>;\n    hideTrack?: useBreakpointPropsType<boolean>;\n    showPercentage?: useBreakpointPropsType<boolean>;\n    speed?: useBreakpointPropsType<number>;\n}\n\nconst CircleProgress = React.forwardRef(({ children, ...props }: CircleProgressProps, ref: React.Ref<any>) => {\n    let [{ color, trackColor, thumbColor, size, value, thumbSize, hideTrack, trackSize, showPercentage, speed }] = useInterface<any>(\"CircleProgress\", props, {})\n    const _p: any = {}\n    if (color) _p.color = color\n    if (trackColor) _p.trackColor = trackColor\n    if (thumbColor) _p.thumbColor = thumbColor\n    if (size) _p.size = size\n    if (thumbSize) _p.thumbSize = thumbSize\n    if (trackSize) _p.trackSize = trackSize\n    if (value) _p.value = value\n    if (hideTrack) _p.hideTrack = hideTrack\n    if (showPercentage) _p.showPercentage = showPercentage\n    if (speed) _p.speed = speed\n    const p: any = useBreakpointProps(_p)\n\n    color = p.color ?? \"brand\"\n    trackColor = p.trackColor\n    thumbColor = p.thumbColor\n    size = p.size ?? \"medium\"\n    thumbSize = p.thumbSize ?? 4\n    trackSize = p.trackSize\n    value = p.value\n    hideTrack = p.hideTrack\n    showPercentage = p.showPercentage\n    speed = p.speed ?? 1.3\n\n    if (trackColor === 'default') {\n        trackColor = \"divider\"\n    }\n\n    if (thumbColor === 'default') {\n        thumbColor = \"divider.secondary\"\n    }\n\n\n    let sizes: any = {\n        small: 24,\n        medium: 32,\n        large: 44\n    }\n    if (typeof size === 'string' && sizes[size]) {\n        size = sizes[size]\n    }\n\n    let isVal = typeof value === 'number'\n    const animrotate = \"anim\" + useId().replace(\":\", \"\")\n    const animdash = \"anim\" + useId().replace(\":\", \"\")\n    if (isVal && (value as number) > 100) value = 100\n    const circumference = 125.66370614359172 //radius * 2 * Math.PI\n    const percent = circumference - ((value || 0) / 100) * circumference\n\n    if (showPercentage && !children) {\n        children = <Tag\n            sxr={{\n                color: color === 'default' ? \"text.primary\" : `${color}.primary`,\n                fontSize: size / 4\n            }}\n        >{value}%</Tag>\n    }\n\n    return (\n        <Tag\n            baseClass='circle-progress'\n            sxr={{\n                display: \"inline-flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                \"& svg[class='circle-progress-svg']\": {\n                    zIndex: 1,\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    width: \"100%\",\n                    height: \"100%\",\n                    transform: isVal ? \"rotate(-90deg)\" : \"none\",\n                    transformOrigin: isVal ? \"center\" : \"initial\",\n                    animation: isVal ? \"none\" : `${animrotate} ${speed}s linear infinite`,\n                    [`@keyframes ${animrotate}`]: {\n                        \"100%\": {\n                            transform: \"rotate(360deg)\"\n                        }\n                    },\n                    \"& circle.circle-progress-thumb\": {\n\n                        strokeDasharray: circumference,\n                        strokeDashoffset: percent,\n                        stroke: thumbColor || (color === 'default' ? `divider` : `${color}.primary`),\n                        fill: \"none\",\n                        strokeWidth: thumbSize,\n                        strokeLinecap: \"round\",\n                        animation: isVal ? \"none\" : `${animdash} ${speed}s ease-in-out infinite`,\n                        [`@keyframes ${animdash}`]: {\n                            \"0%\": { strokeDasharray: \"1, 150\", strokeDashoffset: 0 },\n                            \"50%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -35 },\n                            \"100%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -124 }\n                        }\n                    },\n                    \"& circle.circle-progress-track\": {\n                        fill: \"none\",\n                        stroke: trackColor || (color === 'default' ? `text.primary` : `${color}.soft.secondary`),\n                        strokeWidth: trackSize ?? thumbSize,\n                    }\n                },\n                width: size,\n                height: size,\n                position: \"relative\"\n            }}\n            ref={ref}\n        >\n            <svg viewBox=\"0 0 50 50\" className=\"circle-progress-svg\">\n                {!hideTrack && <circle className=\"circle-progress-track\" cx=\"25\" cy=\"25\" r={20} />}\n                <circle className=\"circle-progress-thumb\" cx=\"25\" cy=\"25\" r={20} />\n            </svg>\n            {!!children && <Tag\n                baseClass=\"circle-progress-content\"\n                sxr={{\n                    zIndex: 2,\n                    width: size - thumbSize,\n                    height: size - thumbSize,\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    '& *': {\n                        maxWidth: size - (thumbSize + 8),\n                        maxHeight: size - (thumbSize + 8),\n                    }\n                }}\n            >\n                {children}\n            </Tag>}\n        </Tag >\n    )\n})\n\nexport default CircleProgress\n\n"],"names":[],"mappings":";;;;;;AAkBA;;AAAyC;AACrC;;AAEA;AAAW;AACX;AAAgB;AAChB;AAAgB;AAChB;AAAU;AACV;AAAe;AACf;AAAe;AACf;AAAW;AACX;AAAe;AACf;AAAoB;AACpB;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAIA;;;AAKA;AACI;AACA;AACA;;;AAGA;;AAGJ;AACA;AACA;AACA;;AACA;AACA;AAEA;AACI;AAEQ;;;;;AAUA;AACA;AACA;AACA;AACI;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACI;AACI;AACH;AACJ;AACD;AAEI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIC;AACJ;AACD;AACI;AACA;AACA;AACH;AACJ;AACD;AACA;AACA;AACH;AAUO;;;AAGA;AACA;AACA;AACA;AACI;AACA;AACH;AACJ;AAMjB;;"}
+{"version":3,"file":"index.js","sources":["../../src/CircleProgress/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\nexport type CircleProgressProps = {\n    children?: ReactElement;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    trackColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    thumbColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    thumbSize?: useBreakpointPropsType<number>;\n    trackSize?: useBreakpointPropsType<number>;\n    value?: useBreakpointPropsType<number>;\n    hideTrack?: useBreakpointPropsType<boolean>;\n    showPercentage?: useBreakpointPropsType<boolean>;\n    speed?: useBreakpointPropsType<number>;\n}\n\nconst CircleProgress = React.forwardRef(({ children, ...props }: CircleProgressProps, ref: React.Ref<any>) => {\n    let [{ color, trackColor, thumbColor, size, value, thumbSize, hideTrack, trackSize, showPercentage, speed }] = useInterface<any>(\"CircleProgress\", props, {})\n    const _p: any = {}\n    if (color) _p.color = color\n    if (trackColor) _p.trackColor = trackColor\n    if (thumbColor) _p.thumbColor = thumbColor\n    if (size) _p.size = size\n    if (thumbSize) _p.thumbSize = thumbSize\n    if (trackSize) _p.trackSize = trackSize\n    if (value) _p.value = value\n    if (hideTrack) _p.hideTrack = hideTrack\n    if (showPercentage) _p.showPercentage = showPercentage\n    if (speed) _p.speed = speed\n    const p: any = useBreakpointProps(_p)\n\n    color = p.color ?? \"primary\"\n    trackColor = p.trackColor\n    thumbColor = p.thumbColor\n    size = p.size ?? \"medium\"\n    thumbSize = p.thumbSize ?? 4\n    trackSize = p.trackSize\n    value = p.value\n    hideTrack = p.hideTrack\n    showPercentage = p.showPercentage\n    speed = p.speed ?? 1.5\n\n    if (trackColor === 'surface') {\n        trackColor = \"surface.divider\"\n    }\n\n    if (thumbColor === 'surface') {\n        thumbColor = \"surface.contrast\"\n    }\n\n\n    let sizes: any = {\n        small: 24,\n        medium: 34,\n        large: 44\n    }\n    if (typeof size === 'string' && sizes[size]) {\n        size = sizes[size]\n    }\n\n    let isVal = typeof value === 'number'\n    const animrotate = \"anim\" + useId().replace(\":\", \"\")\n    const animdash = \"anim\" + useId().replace(\":\", \"\")\n    if (isVal && (value as number) > 100) value = 100\n    const circumference = 125.66370614359172 //radius * 2 * Math.PI\n    const percent = circumference - ((value || 0) / 100) * circumference\n\n    if (showPercentage && !children) {\n        children = <Tag\n            sxr={{\n                color: color === 'surface' ? \"surface.contrast\" : `${color}.main`,\n                fontSize: size / 4\n            }}\n        >{value}%</Tag>\n    }\n\n    return (\n        <Tag\n            baseClass='circle-progress'\n            sxr={{\n                display: \"inline-flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                \"& svg[class='circle-progress-svg']\": {\n                    zIndex: 1,\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    width: \"100%\",\n                    height: \"100%\",\n                    transform: isVal ? \"rotate(-90deg)\" : \"none\",\n                    transformOrigin: isVal ? \"center\" : \"initial\",\n                    animation: isVal ? \"none\" : `${animrotate} ${speed}s linear infinite`,\n                    [`@keyframes ${animrotate}`]: {\n                        \"100%\": {\n                            transform: \"rotate(360deg)\"\n                        }\n                    },\n                    \"& circle.circle-progress-thumb\": {\n                        strokeDasharray: circumference,\n                        strokeDashoffset: percent,\n                        stroke: thumbColor || (color === 'surface' ? `surface.contrast` : `${color}.main`),\n                        fill: \"none\",\n                        strokeWidth: thumbSize,\n                        strokeLinecap: \"round\",\n                        animation: isVal ? \"none\" : `${animdash} ${speed}s ease-in-out infinite`,\n                        [`@keyframes ${animdash}`]: {\n                            \"0%\": { strokeDasharray: \"1, 150\", strokeDashoffset: 0 },\n                            \"50%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -35 },\n                            \"100%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -124 }\n                        }\n                    },\n                    \"& circle.circle-progress-track\": {\n                        fill: \"none\",\n                        stroke: trackColor || (`surface.divider`),\n                        strokeWidth: trackSize ?? thumbSize,\n                    }\n                },\n                width: size,\n                height: size,\n                position: \"relative\"\n            }}\n            ref={ref}\n        >\n            <svg viewBox=\"0 0 50 50\" className=\"circle-progress-svg\">\n                {!hideTrack && <circle className=\"circle-progress-track\" cx=\"25\" cy=\"25\" r={20} />}\n                <circle className=\"circle-progress-thumb\" cx=\"25\" cy=\"25\" r={20} />\n            </svg>\n            {!!children && <Tag\n                baseClass=\"circle-progress-content\"\n                sxr={{\n                    zIndex: 2,\n                    width: size - thumbSize,\n                    height: size - thumbSize,\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    '& *': {\n                        maxWidth: size - (thumbSize + 8),\n                        maxHeight: size - (thumbSize + 8),\n                    }\n                }}\n            >\n                {children}\n            </Tag>}\n        </Tag >\n    )\n})\n\nexport default CircleProgress\n\n"],"names":[],"mappings":";;;;;;AAkBA;;AAAyC;AACrC;;AAEA;AAAW;AACX;AAAgB;AAChB;AAAgB;AAChB;AAAU;AACV;AAAe;AACf;AAAe;AACf;AAAW;AACX;AAAe;AACf;AAAoB;AACpB;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAIA;;;AAKA;AACI;AACA;AACA;;;AAGA;;AAGJ;AACA;AACA;AACA;;AACA;AACA;AAEA;AACI;AAEQ;;;;;AAUA;AACA;AACA;AACA;AACI;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACI;AACI;AACH;AACJ;AACD;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIC;AACJ;AACD;AACI;AACA;AACA;AACH;AACJ;AACD;AACA;AACA;AACH;AAUO;;;AAGA;AACA;AACA;AACA;AACI;AACA;AACH;AACJ;AAMjB;;"}

package/ClickOutside/index.cjs

@@ -6,19 +6,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var core = require('@xanui/core');
 var React = require('react');
 
-const ClickOutside = React.forwardRef((_a, forwardedRef) => {
+const ClickOutside = React.forwardRef((_a, ref) => {
     var { children, onClickOutside } = _a, props = tslib.__rest(_a, ["children", "onClickOutside"]);
     const innerRef = React.useRef(null);
-    // merge refs
-    const setRefs = (el) => {
-        innerRef.current = el;
-        if (typeof forwardedRef === "function") {
-            forwardedRef(el);
-        }
-        else if (forwardedRef) {
-            forwardedRef.current = el;
-        }
-    };
+    const mergeRef = core.useMergeRefs(ref, innerRef);
     React.useEffect(() => {
         const handler = (e) => {
             if (!innerRef.current)
@@ -30,7 +21,7 @@ const ClickOutside = React.forwardRef((_a, forwardedRef) => {
         document.addEventListener("mousedown", handler);
         return () => document.removeEventListener("mousedown", handler);
     }, [onClickOutside]);
-    return (jsxRuntime.jsx(core.Tag, Object.assign({ component: "div", display: "inline-block" }, props, { baseClass: 'click-outside', ref: setRefs, children: children })));
+    return (jsxRuntime.jsx(core.Tag, Object.assign({ component: "div", display: "inline-block" }, props, { baseClass: 'click-outside', ref: mergeRef, children: children })));
 });
 
 module.exports = ClickOutside;

package/ClickOutside/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagComponentType, TagProps } from '@xanui/core';\nimport React, { useEffect, useRef } from 'react';\n\nexport type ClickOutsideProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    onClickOutside: (e: MouseEvent) => void;\n    children: React.ReactElement\n};\n\nconst ClickOutside = React.forwardRef(<T extends TagComponentType = \"div\">({ children, onClickOutside, ...props }: ClickOutsideProps<T>, forwardedRef: any) => {\n\n    const innerRef = useRef<HTMLElement | null>(null);\n\n    // merge refs\n    const setRefs = (el: HTMLElement) => {\n        innerRef.current = el;\n        if (typeof forwardedRef === \"function\") {\n            forwardedRef(el);\n        } else if (forwardedRef) {\n            forwardedRef.current = el;\n        }\n    };\n\n    useEffect(() => {\n        const handler = (e: MouseEvent) => {\n            if (!innerRef.current) return;\n            if (!innerRef.current.contains(e.target as Node)) {\n                onClickOutside(e);\n            }\n        };\n\n        document.addEventListener(\"mousedown\", handler);\n        return () => document.removeEventListener(\"mousedown\", handler);\n    }, [onClickOutside]);\n\n    return (\n        <Tag\n            component=\"div\"\n            display=\"inline-block\"\n            {...props}\n            baseClass='click-outside'\n            ref={setRefs}\n        >\n            {children}\n        </Tag>\n    )\n});\n\nexport default ClickOutside;\n"],"names":[],"mappings":";;;;;;;;AASA;;AAEI;;AAGA;AACI;AACA;;;;AAGI;;AAER;;AAGI;;;AAEI;;;AAGJ;AAEA;;AAEJ;;AAaJ;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagComponentType, TagProps, useMergeRefs } from '@xanui/core';\nimport React, { useEffect, useRef } from 'react';\n\nexport type ClickOutsideProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    onClickOutside: (e: MouseEvent) => void;\n    children: React.ReactElement\n};\n\nconst ClickOutside = React.forwardRef(<T extends TagComponentType = \"div\">({ children, onClickOutside, ...props }: ClickOutsideProps<T>, ref: any) => {\n\n    const innerRef = useRef<HTMLElement | null>(null);\n    const mergeRef = useMergeRefs(ref, innerRef)\n\n    useEffect(() => {\n        const handler = (e: MouseEvent) => {\n\n            if (!innerRef.current) return;\n\n            if (!innerRef.current.contains(e.target as Node)) {\n                onClickOutside(e);\n            }\n        };\n\n        document.addEventListener(\"mousedown\", handler);\n        return () => document.removeEventListener(\"mousedown\", handler);\n    }, [onClickOutside]);\n\n    return (\n        <Tag\n            component=\"div\"\n            display=\"inline-block\"\n            {...props}\n            baseClass='click-outside'\n            ref={mergeRef}\n        >\n            {children}\n        </Tag>\n    )\n});\n\nexport default ClickOutside;\n"],"names":[],"mappings":";;;;;;;;AASA;;AAEI;;;AAII;;;AAII;;;AAGJ;AAEA;;AAEJ;;AAaJ;;"}

package/ClickOutside/index.d.ts

@@ -1,11 +1,11 @@
 import { TagComponentType, TagProps } from '@xanui/core';
-import React from 'react';
+import React__default from 'react';
 
 type ClickOutsideProps<T extends TagComponentType = "div"> = TagProps<T> & {
     onClickOutside: (e: MouseEvent) => void;
-    children: React.ReactElement;
+    children: React__default.ReactElement;
 };
-declare const ClickOutside: React.ForwardRefExoticComponent<Omit<ClickOutsideProps<TagComponentType>, "ref"> & React.RefAttributes<unknown>>;
+declare const ClickOutside: React__default.ForwardRefExoticComponent<Omit<ClickOutsideProps<TagComponentType>, "ref"> & React__default.RefAttributes<unknown>>;
 
 export { ClickOutside as default };
 export type { ClickOutsideProps };

package/ClickOutside/index.js

@@ -1,22 +1,13 @@
 "use client";
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
-import { Tag } from '@xanui/core';
+import { useMergeRefs, Tag } from '@xanui/core';
 import React, { useRef, useEffect } from 'react';
 
-const ClickOutside = React.forwardRef((_a, forwardedRef) => {
+const ClickOutside = React.forwardRef((_a, ref) => {
     var { children, onClickOutside } = _a, props = __rest(_a, ["children", "onClickOutside"]);
     const innerRef = useRef(null);
-    // merge refs
-    const setRefs = (el) => {
-        innerRef.current = el;
-        if (typeof forwardedRef === "function") {
-            forwardedRef(el);
-        }
-        else if (forwardedRef) {
-            forwardedRef.current = el;
-        }
-    };
+    const mergeRef = useMergeRefs(ref, innerRef);
     useEffect(() => {
         const handler = (e) => {
             if (!innerRef.current)
@@ -28,7 +19,7 @@ const ClickOutside = React.forwardRef((_a, forwardedRef) => {
         document.addEventListener("mousedown", handler);
         return () => document.removeEventListener("mousedown", handler);
     }, [onClickOutside]);
-    return (jsx(Tag, Object.assign({ component: "div", display: "inline-block" }, props, { baseClass: 'click-outside', ref: setRefs, children: children })));
+    return (jsx(Tag, Object.assign({ component: "div", display: "inline-block" }, props, { baseClass: 'click-outside', ref: mergeRef, children: children })));
 });
 
 export { ClickOutside as default };

package/ClickOutside/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagComponentType, TagProps } from '@xanui/core';\nimport React, { useEffect, useRef } from 'react';\n\nexport type ClickOutsideProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    onClickOutside: (e: MouseEvent) => void;\n    children: React.ReactElement\n};\n\nconst ClickOutside = React.forwardRef(<T extends TagComponentType = \"div\">({ children, onClickOutside, ...props }: ClickOutsideProps<T>, forwardedRef: any) => {\n\n    const innerRef = useRef<HTMLElement | null>(null);\n\n    // merge refs\n    const setRefs = (el: HTMLElement) => {\n        innerRef.current = el;\n        if (typeof forwardedRef === \"function\") {\n            forwardedRef(el);\n        } else if (forwardedRef) {\n            forwardedRef.current = el;\n        }\n    };\n\n    useEffect(() => {\n        const handler = (e: MouseEvent) => {\n            if (!innerRef.current) return;\n            if (!innerRef.current.contains(e.target as Node)) {\n                onClickOutside(e);\n            }\n        };\n\n        document.addEventListener(\"mousedown\", handler);\n        return () => document.removeEventListener(\"mousedown\", handler);\n    }, [onClickOutside]);\n\n    return (\n        <Tag\n            component=\"div\"\n            display=\"inline-block\"\n            {...props}\n            baseClass='click-outside'\n            ref={setRefs}\n        >\n            {children}\n        </Tag>\n    )\n});\n\nexport default ClickOutside;\n"],"names":[],"mappings":";;;;;;AASA;;AAEI;;AAGA;AACI;AACA;;;;AAGI;;AAER;;AAGI;;;AAEI;;;AAGJ;AAEA;;AAEJ;;AAaJ;;"}
+{"version":3,"file":"index.js","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagComponentType, TagProps, useMergeRefs } from '@xanui/core';\nimport React, { useEffect, useRef } from 'react';\n\nexport type ClickOutsideProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    onClickOutside: (e: MouseEvent) => void;\n    children: React.ReactElement\n};\n\nconst ClickOutside = React.forwardRef(<T extends TagComponentType = \"div\">({ children, onClickOutside, ...props }: ClickOutsideProps<T>, ref: any) => {\n\n    const innerRef = useRef<HTMLElement | null>(null);\n    const mergeRef = useMergeRefs(ref, innerRef)\n\n    useEffect(() => {\n        const handler = (e: MouseEvent) => {\n\n            if (!innerRef.current) return;\n\n            if (!innerRef.current.contains(e.target as Node)) {\n                onClickOutside(e);\n            }\n        };\n\n        document.addEventListener(\"mousedown\", handler);\n        return () => document.removeEventListener(\"mousedown\", handler);\n    }, [onClickOutside]);\n\n    return (\n        <Tag\n            component=\"div\"\n            display=\"inline-block\"\n            {...props}\n            baseClass='click-outside'\n            ref={mergeRef}\n        >\n            {children}\n        </Tag>\n    )\n});\n\nexport default ClickOutside;\n"],"names":[],"mappings":";;;;;;AASA;;AAEI;;;AAII;;;AAII;;;AAGJ;AAEA;;AAEJ;;AAaJ;;"}

package/Collaps/index.cjs

@@ -8,7 +8,7 @@ var core = require('@xanui/core');
 
 const Collaps = React.forwardRef((_a, ref) => {
     var { children, open } = _a, props = tslib.__rest(_a, ["children", "open"]);
-    let [_b] = core.useInterface("Collaps", props, {}), { ease, easing, duration, delay, onStart, onFinish, onOpen, onOpened, onClose, onClosed } = _b, rest = tslib.__rest(_b, ["ease", "easing", "duration", "delay", "onStart", "onFinish", "onOpen", "onOpened", "onClose", "onClosed"]);
+    let [_b] = core.useInterface("Collaps", props, {}), { ease, easing, duration, delay, onStart, onFinish, onEnter, onEntered, onExit, onExited } = _b, rest = tslib.__rest(_b, ["ease", "easing", "duration", "delay", "onStart", "onFinish", "onEnter", "onEntered", "onExit", "onExited"]);
     open !== null && open !== void 0 ? open : (open = false);
     easing !== null && easing !== void 0 ? easing : (easing = "standard");
     return (jsxRuntime.jsx(core.Transition, { ease,
@@ -17,10 +17,10 @@ const Collaps = React.forwardRef((_a, ref) => {
         delay,
         onStart,
         onFinish,
-        onOpen,
-        onOpened,
-        onClose,
-        onClosed, disableInitialTransition: true, variant: "collapseVertical", open: open, children: jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { baseClass: 'collaps', ref: ref, children: children })) }));
+        onEnter,
+        onEntered,
+        onExit,
+        onExited, initialTransition: false, variant: "collapseVertical", open: open, children: jsxRuntime.jsx(core.Tag, Object.assign({ overflow: "hidden" }, rest, { baseClass: 'collaps', ref: ref, children: children })) }));
 });
 
 module.exports = Collaps;

package/Collaps/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Collaps/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, TransitionProps, Transition } from '@xanui/core';\n\nexport type CollapsProps<T extends TagComponentType = \"div\"> = TagProps<T> & Omit<TransitionProps, \"variant\" | \"children\"> & {\n\n}\n\nconst Collaps = React.forwardRef(<T extends TagComponentType = \"div\">({ children, open, ...props }: CollapsProps<T>, ref: any) => {\n    let [{\n        ease,\n        easing,\n        duration,\n        delay,\n        onStart,\n        onFinish,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        ...rest\n    }] = useInterface<any>(\"Collaps\", props, {})\n\n    open ??= false\n    easing ??= \"standard\"\n\n    return (\n        <Transition\n            {...{\n                ease,\n                easing,\n                duration,\n                delay,\n                onStart,\n                onFinish,\n                onOpen,\n                onOpened,\n                onClose,\n                onClosed\n            }}\n            disableInitialTransition\n            variant=\"collapseVertical\"\n            open={open}\n        >\n            <Tag\n                {...rest}\n                baseClass='collaps'\n                ref={ref}\n            >{children}</Tag>\n        </Transition>\n    )\n})\n\nexport default Collaps\n\n\n"],"names":[],"mappings":";;;;;;;;AAQA;;AACI;;;AAiBA;;;;;;;;;AAYY;AAahB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Collaps/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, TransitionProps, Transition } from '@xanui/core';\n\nexport type CollapsProps<T extends TagComponentType = \"div\"> = TagProps<T> & Omit<TransitionProps, \"variant\" | \"children\"> & {\n\n}\n\nconst Collaps = React.forwardRef(<T extends TagComponentType = \"div\">({ children, open, ...props }: CollapsProps<T>, ref: any) => {\n    let [{\n        ease,\n        easing,\n        duration,\n        delay,\n        onStart,\n        onFinish,\n        onEnter,\n        onEntered,\n        onExit,\n        onExited,\n        ...rest\n    }] = useInterface<any>(\"Collaps\", props, {})\n\n    open ??= false\n    easing ??= \"standard\"\n\n    return (\n        <Transition\n            {...{\n                ease,\n                easing,\n                duration,\n                delay,\n                onStart,\n                onFinish,\n                onEnter,\n                onEntered,\n                onExit,\n                onExited\n            }}\n            initialTransition={false}\n            variant=\"collapseVertical\"\n            open={open}\n        >\n            <Tag\n                overflow={\"hidden\"}\n                {...rest}\n                baseClass='collaps'\n                ref={ref}\n            >{children}</Tag>\n        </Transition>\n    )\n})\n\nexport default Collaps\n\n\n"],"names":[],"mappings":";;;;;;;;AAQA;;AACI;;;AAiBA;;;;;;;;;AAYY;AAchB;;"}