@xanui/ui 1.1.5 → 1.1.7

package/Calendar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Calendar/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport Stack from '../Stack'\nimport IconButton from '../IconButton';\nimport IconKeyboardArrowRight from '@xanui/icons/KeyboardArrowRight';\nimport IconKeyboardArrowLeft from '@xanui/icons/KeyboardArrowLeft';\nimport Text from '../Text';\nimport Button from '../Button';\nimport ResetIcon from '@xanui/icons/Replay';\nimport ViewBox from '../ViewBox';\nimport { ColorTemplateColors, useInterface, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\n\nexport type CalendarProps = {\n    value?: Date | null;\n    onChange?: (date: Date | null) => void;\n    viewMode?: useBreakpointPropsType<\"year\" | \"month\" | \"day\">;\n    onButtonClick?: (mode: CalendarProps[\"viewMode\"], value: CalendarProps[\"value\"]) => void;\n    color?: useBreakpointPropsType<ColorTemplateColors>;\n}\n\n\nconst ShowYears = ({ color, year, today, boxWidth, onClick }: any) => {\n    let years: any[] = []\n    const selectedRef: any = useRef(null)\n    for (let y = 1900; y < today.getFullYear() + 40; y++) {\n        const selected = year == y\n        years.push(<Stack\n            key={y}\n            sx={{\n                width: (boxWidth - 12) / 3,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                p: .1\n            }}\n            className='calender-year-item'\n        >\n            <Button\n                color={selected ? color : \"default\"}\n                className='calender-year-button'\n                size='small'\n                corner=\"circle\"\n                ref={selected ? selectedRef : null}\n                onClick={() => onClick(y)}\n                variant={selected ? \"fill\" : \"text\"}\n            >\n                {y}\n            </Button>\n        </Stack>)\n    }\n\n    useEffect(() => {\n        if (selectedRef?.current) {\n            selectedRef?.current.scrollIntoView({ behavior: \"smooth\", block: \"center\", inline: \"nearest\" })\n        }\n    }, [])\n\n    return (\n        <Stack\n            sx={{\n                flexWrap: \"wrap\",\n                flexDirection: \"row\",\n                overflow: \"hidden\",\n                overflowY: \"auto\"\n            }}\n            className='calender-years'\n        >\n            {years}\n        </Stack>\n    )\n}\n\n\nconst Calendar = ({ value, ...rest }: CalendarProps) => {\n    let [{ onChange, viewMode: VMode, onButtonClick, color }] = useInterface<any>(\"Calender\", rest, {})\n    const _p: any = {}\n    if (VMode) _p.VMode = VMode\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color || \"brand\"\n\n    let [viewMode, setViewMode] = useState<any>(p.VMode || \"day\");\n    let [selectedDate, setSelectedDate] = useState(new Date());\n    selectedDate = value instanceof Date ? value : selectedDate\n    const [currentDate, setCurrentDate] = useState(selectedDate);\n    const year = currentDate.getFullYear()\n    const month = currentDate.getMonth()\n    const daysInMonth = 32 - new Date(year, month, 32).getDate()\n    const today = new Date();\n    const btnWidth = 32\n    const boxWidth = btnWidth * 7\n\n    const showCalendar = () => {\n\n        let firstDay = (new Date(year, month)).getDay();\n        let rows = []\n\n        let date = 1;\n        for (let i = 0; i < 6; i++) {\n            let row = []\n            for (let j = 0; j < 7; j++) {\n                if (i === 0 && j < firstDay) {\n                    row.push(<Stack\n                        width={btnWidth}\n                        height={btnWidth}\n                        alignItems=\"center\"\n                        justifyContent=\"center\"\n                        key={date + j + i}\n                    >\n                    </Stack>)\n                } else if (date > daysInMonth) {\n                    break;\n                } else {\n                    let isToday = date === today.getDate() && year === today.getFullYear() && month === today.getMonth()\n                    let isSelected = date === selectedDate.getDate() && year === selectedDate.getFullYear() && month === selectedDate.getMonth()\n\n                    let css: any = {}\n                    if (isToday) {\n                        css = {\n                            variant: \"outline\",\n                            color: color\n                        }\n                    }\n\n                    if (isSelected) {\n                        css = {\n                            variant: \"fill\",\n                            color: color\n                        }\n                    }\n\n                    row.push(<Stack\n                        sx={{\n                            width: btnWidth,\n                            height: btnWidth,\n                            alignItems: \"center\",\n                            justifyContent: \"center\"\n                        }}\n                        key={date + j + i}\n                        className='calender-day-item'\n                    >\n                        <IconButton\n                            className='calender-day-button'\n                            variant={isSelected ? \"fill\" : \"text\"}\n                            color={isToday ? color : \"default\"}\n                            {...css}\n                            data-value={date}\n                            onClick={(e: any) => {\n                                let d = e.target.getAttribute(\"data-value\")\n                                if (!d) return\n                                let selectedDate = new Date(year, month, parseInt(d))\n                                onChange ? onChange(selectedDate) : setSelectedDate(selectedDate)\n                                onButtonClick && onButtonClick(\"day\", selectedDate)\n                            }}\n                        >\n                            {date}\n                        </IconButton>\n                    </Stack>)\n                    date++;\n                }\n            }\n            rows.push(<Stack flexRow key={\"row\" + i} className='calender-day-row'>\n                {row}\n            </Stack>);\n        }\n        return rows\n    }\n\n    const showMonth = () => {\n        let months: any[] = []\n        const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n        for (let m = 0; m < monthNames.length; m++) {\n            const selected = currentDate.getMonth() === m\n\n            months.push(<Stack\n                key={m}\n                width={(boxWidth - 12) / 2}\n                alignItems=\"center\"\n                justifyContent=\"center\"\n                p={.1}\n                className='calender-months-item'\n            >\n                <Button\n                    color={selected ? color : \"default\"}\n                    className='calender-month-button'\n                    size='small'\n                    corner=\"circle\"\n                    variant={selected ? \"fill\" : 'text'}\n                    onClick={() => {\n                        const v = new Date(currentDate.getFullYear(), m)\n                        setCurrentDate(v)\n                        setViewMode(\"day\")\n                        onButtonClick && onButtonClick(\"month\", v)\n                    }}\n                    sx={{\n                        color: selected ? \"brand.text\" : \"text.primary\"\n                    }}\n                >\n                    {monthNames[m]}\n                </Button>\n            </Stack>)\n        }\n\n        return (\n            <Stack\n                className='calender-months'\n                sx={{\n                    flexWrap: \"wrap\",\n                    overflow: \"hidden\",\n                    overflowY: \"auto\",\n                    flexDirection: \"row\"\n                }}\n            >\n                {months}\n            </Stack>\n        )\n    }\n\n    let view: any = null\n    switch (viewMode) {\n        case \"year\":\n            view = <ShowYears\n                color={color}\n                today={today}\n                year={year}\n                boxWidth={boxWidth}\n                onClick={(y: any) => {\n                    currentDate.setFullYear(y)\n                    setCurrentDate(currentDate)\n                    setViewMode(\"month\")\n                    onButtonClick && onButtonClick(\"year\", currentDate)\n                }}\n            />\n            break;\n        case \"month\":\n            view = showMonth()\n            break;\n        default:\n            view = (<>\n                <Stack flexRow className='calender-week-container'>\n                    {\n                        ['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, idx) => (\n                            <Stack\n                                key={day + idx}\n                                width={btnWidth}\n                                height={btnWidth}\n                                alignItems=\"center\"\n                                justifyContent=\"center\"\n                            >\n                                <Text\n                                    fontWeight={500}\n                                    fontSize=\"button\"\n                                    color=\"text.secondary\"\n                                >\n                                    {day}\n                                </Text>\n                            </Stack>\n                        ))\n                    }\n                </Stack>\n                {showCalendar()}\n            </>\n            )\n            break;\n    }\n\n    return (\n        <ViewBox\n            className='calender-root'\n            maxHeight={308}\n            width={250}\n            radius={1}\n            bgcolor=\"background.primary\"\n            startContent={\n                <Stack className='calender-header' flexRow alignItems=\"center\" justifyContent=\"space-between\" p={1}>\n                    <Text\n                        fontWeight=\"bold\"\n                        cursor=\"pointer\"\n                        onClick={() => setViewMode(viewMode !== 'day' ? \"day\" : \"year\")}\n                        flex={1}\n                    >\n                        {currentDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long' })}\n                    </Text>\n                    <IconButton\n                        color=\"default\"\n                        variant='text'\n                        size={28}\n                        onClick={() => {\n                            setCurrentDate(new Date())\n                            onChange ? onChange(new Date()) : setSelectedDate(new Date())\n                        }}\n                    >\n                        <ResetIcon fontSize={20} />\n                    </IconButton>\n                    <IconButton\n                        color=\"default\"\n                        variant='text'\n                        size={28}\n                        onClick={() => {\n                            setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1))\n                        }}\n                    >\n                        <IconKeyboardArrowLeft />\n                    </IconButton>\n                    <IconButton\n                        color=\"default\"\n                        variant='text'\n                        size={28}\n                        onClick={() => {\n                            setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1))\n                        }}\n                    >\n                        <IconKeyboardArrowRight />\n                    </IconButton>\n                </Stack>\n            }\n        >\n            <Stack height=\"100%\" p={.5} className='calender-container'>\n                {view}\n            </Stack>\n        </ViewBox>\n    );\n};\n\nexport default Calendar;"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Calendar/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport Stack from '../Stack'\nimport IconButton from '../IconButton';\nimport IconKeyboardArrowRight from '@xanui/icons/KeyboardArrowRight';\nimport IconKeyboardArrowLeft from '@xanui/icons/KeyboardArrowLeft';\nimport Text from '../Text';\nimport Button from '../Button';\nimport ResetIcon from '@xanui/icons/Replay';\nimport ViewBox from '../ViewBox';\nimport { UseColorTemplateColor, useInterface, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\n\nexport type CalendarProps = {\n    value?: Date | null;\n    onChange?: (date: Date | null) => void;\n    viewMode?: useBreakpointPropsType<\"year\" | \"month\" | \"day\">;\n    onButtonClick?: (mode: CalendarProps[\"viewMode\"], value: CalendarProps[\"value\"]) => void;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n}\n\n\nconst ShowYears = ({ color, year, today, boxWidth, onClick }: any) => {\n    let years: any[] = []\n    const selectedRef: any = useRef(null)\n    for (let y = 1900; y < today.getFullYear() + 40; y++) {\n        const selected = year == y\n        years.push(<Stack\n            key={y}\n            sx={{\n                width: (boxWidth - 12) / 3,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                p: .1\n            }}\n            className='calender-year-item'\n        >\n            <Button\n                color={selected ? color : \"default\"}\n                className='calender-year-button'\n                size='small'\n                corner=\"circle\"\n                ref={selected ? selectedRef : null}\n                onClick={() => onClick(y)}\n                variant={selected ? \"fill\" : \"text\"}\n            >\n                {y}\n            </Button>\n        </Stack>)\n    }\n\n    useEffect(() => {\n        if (selectedRef?.current) {\n            selectedRef?.current.scrollIntoView({ behavior: \"smooth\", block: \"center\", inline: \"nearest\" })\n        }\n    }, [])\n\n    return (\n        <Stack\n            sx={{\n                flexWrap: \"wrap\",\n                flexDirection: \"row\",\n                overflow: \"hidden\",\n                overflowY: \"auto\"\n            }}\n            className='calender-years'\n        >\n            {years}\n        </Stack>\n    )\n}\n\n\nconst Calendar = ({ value, ...rest }: CalendarProps) => {\n    let [{ onChange, viewMode: VMode, onButtonClick, color }] = useInterface<any>(\"Calender\", rest, {})\n    const _p: any = {}\n    if (VMode) _p.VMode = VMode\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color || \"brand\"\n\n    let [viewMode, setViewMode] = useState<any>(p.VMode || \"day\");\n    let [selectedDate, setSelectedDate] = useState(new Date());\n    selectedDate = value instanceof Date ? value : selectedDate\n    const [currentDate, setCurrentDate] = useState(selectedDate);\n    const year = currentDate.getFullYear()\n    const month = currentDate.getMonth()\n    const daysInMonth = 32 - new Date(year, month, 32).getDate()\n    const today = new Date();\n    const btnWidth = 32\n    const boxWidth = btnWidth * 7\n\n    const showCalendar = () => {\n\n        let firstDay = (new Date(year, month)).getDay();\n        let rows = []\n\n        let date = 1;\n        for (let i = 0; i < 6; i++) {\n            let row = []\n            for (let j = 0; j < 7; j++) {\n                if (i === 0 && j < firstDay) {\n                    row.push(<Stack\n                        width={btnWidth}\n                        height={btnWidth}\n                        alignItems=\"center\"\n                        justifyContent=\"center\"\n                        key={date + j + i}\n                    >\n                    </Stack>)\n                } else if (date > daysInMonth) {\n                    break;\n                } else {\n                    let isToday = date === today.getDate() && year === today.getFullYear() && month === today.getMonth()\n                    let isSelected = date === selectedDate.getDate() && year === selectedDate.getFullYear() && month === selectedDate.getMonth()\n\n                    let css: any = {}\n                    if (isToday) {\n                        css = {\n                            variant: \"outline\",\n                            color: color\n                        }\n                    }\n\n                    if (isSelected) {\n                        css = {\n                            variant: \"fill\",\n                            color: color\n                        }\n                    }\n\n                    row.push(<Stack\n                        sx={{\n                            width: btnWidth,\n                            height: btnWidth,\n                            alignItems: \"center\",\n                            justifyContent: \"center\"\n                        }}\n                        key={date + j + i}\n                        className='calender-day-item'\n                    >\n                        <IconButton\n                            className='calender-day-button'\n                            variant={isSelected ? \"fill\" : \"text\"}\n                            color={isToday ? color : \"default\"}\n                            {...css}\n                            data-value={date}\n                            onClick={(e: any) => {\n                                let d = e.target.getAttribute(\"data-value\")\n                                if (!d) return\n                                let selectedDate = new Date(year, month, parseInt(d))\n                                onChange ? onChange(selectedDate) : setSelectedDate(selectedDate)\n                                onButtonClick && onButtonClick(\"day\", selectedDate)\n                            }}\n                        >\n                            {date}\n                        </IconButton>\n                    </Stack>)\n                    date++;\n                }\n            }\n            rows.push(<Stack flexRow key={\"row\" + i} className='calender-day-row'>\n                {row}\n            </Stack>);\n        }\n        return rows\n    }\n\n    const showMonth = () => {\n        let months: any[] = []\n        const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n        for (let m = 0; m < monthNames.length; m++) {\n            const selected = currentDate.getMonth() === m\n\n            months.push(<Stack\n                key={m}\n                width={(boxWidth - 12) / 2}\n                alignItems=\"center\"\n                justifyContent=\"center\"\n                p={.1}\n                className='calender-months-item'\n            >\n                <Button\n                    color={selected ? color : \"default\"}\n                    className='calender-month-button'\n                    size='small'\n                    corner=\"circle\"\n                    variant={selected ? \"fill\" : 'text'}\n                    onClick={() => {\n                        const v = new Date(currentDate.getFullYear(), m)\n                        setCurrentDate(v)\n                        setViewMode(\"day\")\n                        onButtonClick && onButtonClick(\"month\", v)\n                    }}\n                    sx={{\n                        color: selected ? \"brand.text\" : \"text.primary\"\n                    }}\n                >\n                    {monthNames[m]}\n                </Button>\n            </Stack>)\n        }\n\n        return (\n            <Stack\n                className='calender-months'\n                sx={{\n                    flexWrap: \"wrap\",\n                    overflow: \"hidden\",\n                    overflowY: \"auto\",\n                    flexDirection: \"row\"\n                }}\n            >\n                {months}\n            </Stack>\n        )\n    }\n\n    let view: any = null\n    switch (viewMode) {\n        case \"year\":\n            view = <ShowYears\n                color={color}\n                today={today}\n                year={year}\n                boxWidth={boxWidth}\n                onClick={(y: any) => {\n                    currentDate.setFullYear(y)\n                    setCurrentDate(currentDate)\n                    setViewMode(\"month\")\n                    onButtonClick && onButtonClick(\"year\", currentDate)\n                }}\n            />\n            break;\n        case \"month\":\n            view = showMonth()\n            break;\n        default:\n            view = (<>\n                <Stack flexRow className='calender-week-container'>\n                    {\n                        ['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, idx) => (\n                            <Stack\n                                key={day + idx}\n                                width={btnWidth}\n                                height={btnWidth}\n                                alignItems=\"center\"\n                                justifyContent=\"center\"\n                            >\n                                <Text\n                                    fontWeight={500}\n                                    fontSize=\"button\"\n                                    color=\"text.secondary\"\n                                >\n                                    {day}\n                                </Text>\n                            </Stack>\n                        ))\n                    }\n                </Stack>\n                {showCalendar()}\n            </>\n            )\n            break;\n    }\n\n    return (\n        <ViewBox\n            className='calender-root'\n            maxHeight={308}\n            width={250}\n            radius={1}\n            bgcolor=\"background.primary\"\n            startContent={\n                <Stack className='calender-header' flexRow alignItems=\"center\" justifyContent=\"space-between\" p={1}>\n                    <Text\n                        fontWeight=\"bold\"\n                        cursor=\"pointer\"\n                        onClick={() => setViewMode(viewMode !== 'day' ? \"day\" : \"year\")}\n                        flex={1}\n                    >\n                        {currentDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long' })}\n                    </Text>\n                    <IconButton\n                        color=\"default\"\n                        variant='text'\n                        size={28}\n                        onClick={() => {\n                            setCurrentDate(new Date())\n                            onChange ? onChange(new Date()) : setSelectedDate(new Date())\n                        }}\n                    >\n                        <ResetIcon fontSize={20} />\n                    </IconButton>\n                    <IconButton\n                        color=\"default\"\n                        variant='text'\n                        size={28}\n                        onClick={() => {\n                            setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1))\n                        }}\n                    >\n                        <IconKeyboardArrowLeft />\n                    </IconButton>\n                    <IconButton\n                        color=\"default\"\n                        variant='text'\n                        size={28}\n                        onClick={() => {\n                            setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1))\n                        }}\n                    >\n                        <IconKeyboardArrowRight />\n                    </IconButton>\n                </Stack>\n            }\n        >\n            <Stack height=\"100%\" p={.5} className='calender-container'>\n                {view}\n            </Stack>\n        </ViewBox>\n    );\n};\n\nexport default Calendar;"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/Checkbox/index.d.ts

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

package/Checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Checkbox/index.tsx"],"sourcesContent":["\nimport React, { useState, ReactElement } from 'react';\nimport { Tag, useInterface, ColorTemplateColors, 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<ColorTemplateColors>;\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":["useInterface","__rest","useBreakpointProps","useState","_jsx","_jsxs","_Fragment","Tag"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Checkbox/index.tsx"],"sourcesContent":["\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":["useInterface","__rest","useBreakpointProps","useState","_jsx","_jsxs","_Fragment","Tag"],"mappings":"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"}

package/Checkbox/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Checkbox/index.tsx"],"sourcesContent":["\nimport React, { useState, ReactElement } from 'react';\nimport { Tag, useInterface, ColorTemplateColors, 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<ColorTemplateColors>;\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":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Checkbox/index.tsx"],"sourcesContent":["\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":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/Chip/index.d.ts

@@ -1,13 +1,13 @@
 import React, { ReactElement } from 'react';
-import { TagComponentType, TagProps, useBreakpointPropsType, ColorTemplateColors, ColorTemplateType } from '@xanui/core';
+import { TagComponentType, TagProps, useBreakpointPropsType, UseColorTemplateColor, UseColorTemplateType } from '@xanui/core';
 import { UseCornerTypes } from '../useCorner/index.js';
 
 type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, "color" | "children" | "size"> & {
     label: useBreakpointPropsType<string | ReactElement>;
     startIcon?: useBreakpointPropsType<ReactElement>;
     endIcon?: useBreakpointPropsType<ReactElement>;
-    color?: useBreakpointPropsType<ColorTemplateColors>;
-    variant?: useBreakpointPropsType<ColorTemplateType>;
+    color?: useBreakpointPropsType<UseColorTemplateColor>;
+    variant?: useBreakpointPropsType<UseColorTemplateType>;
     corner?: useBreakpointPropsType<UseCornerTypes>;
     size?: useBreakpointPropsType<"small" | "medium" | "large">;
 };

package/Chip/index.js

@@ -26,32 +26,38 @@
     rest.sx = rest.sx || {};
     const cornerCss = index.default(corner);
     const template = core.useColorTemplate(color, variant);
-    template === null || template === void 0 ? true : delete template.hover;
     const sizes = {
         small: {
             height: 24,
             gap: .5,
-            fontSize: 12
+            px: startIcon || endIcon ? .8 : 1,
+            fontSize: "small"
         },
         medium: {
-            height: 34,
+            height: 32,
             gap: 1,
-            fontSize: 14,
+            px: startIcon || endIcon ? .8 : 1.5,
+            fontSize: 'button',
         },
         large: {
-            height: 38,
-            fontSize: 15,
+            height: 40,
+            fontSize: 'text',
             gap: 1,
+            px: startIcon || endIcon ? .8 : 1.5,
         }
     };
-    return (jsxRuntime.jsxs(core.Tag, Object.assign({}, cornerCss, template, (sizes[size] || {}), rest, { sxr: {
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({}, cornerCss, template.primary, (sizes[size] || {}), rest, { sxr: {
             display: "inline-flex",
             flexDirection: "row",
             alignItems: "center",
             transition: "background .3s",
-            fontFamily: "default",
             overflow: "hidden",
-            px: startIcon || endIcon ? 1 : 1.5,
+            "&  > *": {
+                flex: "0 0 auto",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+            },
         }, baseClass: 'chip', ref: ref, children: [startIcon, jsxRuntime.jsx(core.Tag, { sxr: {
                     alignItems: "center",
                     flexBox: true

package/Chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Chip/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, ColorTemplateColors, ColorTemplateType, 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<ColorTemplateColors>;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\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, ...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    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    rest.sx = (rest as any).sx || {};\n\n    const cornerCss = useCorner(corner)\n    const template = useColorTemplate(color, variant)\n    delete template?.hover\n\n    const sizes: any = {\n        small: {\n            height: 24,\n            gap: .5,\n            fontSize: 12\n        },\n        medium: {\n            height: 34,\n            gap: 1,\n            fontSize: 14,\n        },\n        large: {\n            height: 38,\n            fontSize: 15,\n            gap: 1,\n        }\n    }\n\n    return (\n        <Tag\n            {...cornerCss}\n            {...template}\n            {...(sizes[size as any] || {})}\n            {...rest}\n            sxr={{\n                display: \"inline-flex\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                transition: \"background .3s\",\n                fontFamily: \"default\",\n                overflow: \"hidden\",\n                px: startIcon || endIcon ? 1 : 1.5,\n            }}\n            baseClass='chip'\n            ref={ref}\n        >\n            {startIcon}\n            <Tag\n                sxr={{\n                    alignItems: \"center\",\n                    flexBox: true\n                }}\n            >{label}</Tag>\n            {endIcon}\n        </Tag>\n    )\n})\n\nexport default Chip\n"],"names":["useInterface","__rest","useBreakpointProps","useCorner","useColorTemplate","_jsxs","Tag","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Chip/index.tsx"],"sourcesContent":["\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\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, ...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    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    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                sxr={{\n                    alignItems: \"center\",\n                    flexBox: true\n                }}\n            >{label}</Tag>\n            {endIcon}\n        </Tag>\n    )\n})\n\nexport default Chip\n"],"names":["useInterface","__rest","useBreakpointProps","useCorner","useColorTemplate","_jsxs","Tag","_jsx"],"mappings":"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"}

package/Chip/index.mjs

@@ -26,32 +26,38 @@ import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React
     rest.sx = rest.sx || {};
     const cornerCss = useCorner(corner);
     const template = useColorTemplate(color, variant);
-    template === null || template === void 0 ? true : delete template.hover;
     const sizes = {
         small: {
             height: 24,
             gap: .5,
-            fontSize: 12
+            px: startIcon || endIcon ? .8 : 1,
+            fontSize: "small"
         },
         medium: {
-            height: 34,
+            height: 32,
             gap: 1,
-            fontSize: 14,
+            px: startIcon || endIcon ? .8 : 1.5,
+            fontSize: 'button',
         },
         large: {
-            height: 38,
-            fontSize: 15,
+            height: 40,
+            fontSize: 'text',
             gap: 1,
+            px: startIcon || endIcon ? .8 : 1.5,
         }
     };
-    return (jsxs(Tag, Object.assign({}, cornerCss, template, (sizes[size] || {}), rest, { sxr: {
+    return (jsxs(Tag, Object.assign({}, cornerCss, template.primary, (sizes[size] || {}), rest, { sxr: {
             display: "inline-flex",
             flexDirection: "row",
             alignItems: "center",
             transition: "background .3s",
-            fontFamily: "default",
             overflow: "hidden",
-            px: startIcon || endIcon ? 1 : 1.5,
+            "&  > *": {
+                flex: "0 0 auto",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+            },
         }, baseClass: 'chip', ref: ref, children: [startIcon, jsx(Tag, { sxr: {
                     alignItems: "center",
                     flexBox: true

package/Chip/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Chip/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, ColorTemplateColors, ColorTemplateType, 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<ColorTemplateColors>;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\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, ...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    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    rest.sx = (rest as any).sx || {};\n\n    const cornerCss = useCorner(corner)\n    const template = useColorTemplate(color, variant)\n    delete template?.hover\n\n    const sizes: any = {\n        small: {\n            height: 24,\n            gap: .5,\n            fontSize: 12\n        },\n        medium: {\n            height: 34,\n            gap: 1,\n            fontSize: 14,\n        },\n        large: {\n            height: 38,\n            fontSize: 15,\n            gap: 1,\n        }\n    }\n\n    return (\n        <Tag\n            {...cornerCss}\n            {...template}\n            {...(sizes[size as any] || {})}\n            {...rest}\n            sxr={{\n                display: \"inline-flex\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                transition: \"background .3s\",\n                fontFamily: \"default\",\n                overflow: \"hidden\",\n                px: startIcon || endIcon ? 1 : 1.5,\n            }}\n            baseClass='chip'\n            ref={ref}\n        >\n            {startIcon}\n            <Tag\n                sxr={{\n                    alignItems: \"center\",\n                    flexBox: true\n                }}\n            >{label}</Tag>\n            {endIcon}\n        </Tag>\n    )\n})\n\nexport default Chip\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Chip/index.tsx"],"sourcesContent":["\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\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, ...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    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    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                sxr={{\n                    alignItems: \"center\",\n                    flexBox: true\n                }}\n            >{label}</Tag>\n            {endIcon}\n        </Tag>\n    )\n})\n\nexport default Chip\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/CircleProgress/index.d.ts

@@ -1,11 +1,11 @@
 import React, { ReactElement } from 'react';
-import { useBreakpointPropsType, ColorTemplateColors } from '@xanui/core';
+import { useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';
 
 type CircleProgressProps = {
     children?: ReactElement;
-    color?: useBreakpointPropsType<ColorTemplateColors>;
-    trackColor?: useBreakpointPropsType<ColorTemplateColors>;
-    thumbColor?: useBreakpointPropsType<ColorTemplateColors>;
+    color?: useBreakpointPropsType<UseColorTemplateColor>;
+    trackColor?: useBreakpointPropsType<UseColorTemplateColor>;
+    thumbColor?: useBreakpointPropsType<UseColorTemplateColor>;
     size?: useBreakpointPropsType<number | "small" | "medium" | "large">;
     thumbSize?: useBreakpointPropsType<number>;
     trackSize?: useBreakpointPropsType<number>;

package/CircleProgress/index.js

@@ -38,7 +38,7 @@
         trackColor = "divider";
     }
     if (thumbColor === 'default') {
-        thumbColor = "background.secondary";
+        thumbColor = "divider.secondary";
     }
     let sizes = {
         small: 24,
@@ -83,7 +83,7 @@
                 "& circle.circle-progress-thumb": {
                     strokeDasharray: circumference,
                     strokeDashoffset: percent,
-                    stroke: thumbColor || (color === 'default' ? `background.secondary` : `${color}.primary`),
+                    stroke: thumbColor || (color === 'default' ? `divider` : `${color}.primary`),
                     fill: "none",
                     strokeWidth: thumbSize,
                     strokeLinecap: "round",
@@ -96,7 +96,7 @@
                 },
                 "& circle.circle-progress-track": {
                     fill: "none",
-                    stroke: trackColor || (color === 'default' ? `divider` : `${color}.alpha`),
+                    stroke: trackColor || (color === 'default' ? `text.primary` : `${color}.soft.secondary`),
                     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":["\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, ColorTemplateColors, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\nexport type CircleProgressProps = {\n    children?: ReactElement;\n    color?: useBreakpointPropsType<ColorTemplateColors>;\n    trackColor?: useBreakpointPropsType<ColorTemplateColors>;\n    thumbColor?: useBreakpointPropsType<ColorTemplateColors>;\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 = \"background.secondary\"\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' ? `background.secondary` : `${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' ? `divider` : `${color}.alpha`),\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":["__rest","useInterface","useBreakpointProps","useId","_jsxs","Tag","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/CircleProgress/index.tsx"],"sourcesContent":["\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":["__rest","useInterface","useBreakpointProps","useId","_jsxs","Tag","_jsx"],"mappings":"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"}

package/CircleProgress/index.mjs

@@ -38,7 +38,7 @@ import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React
         trackColor = "divider";
     }
     if (thumbColor === 'default') {
-        thumbColor = "background.secondary";
+        thumbColor = "divider.secondary";
     }
     let sizes = {
         small: 24,
@@ -83,7 +83,7 @@ import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React
                 "& circle.circle-progress-thumb": {
                     strokeDasharray: circumference,
                     strokeDashoffset: percent,
-                    stroke: thumbColor || (color === 'default' ? `background.secondary` : `${color}.primary`),
+                    stroke: thumbColor || (color === 'default' ? `divider` : `${color}.primary`),
                     fill: "none",
                     strokeWidth: thumbSize,
                     strokeLinecap: "round",
@@ -96,7 +96,7 @@ import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React
                 },
                 "& circle.circle-progress-track": {
                     fill: "none",
-                    stroke: trackColor || (color === 'default' ? `divider` : `${color}.alpha`),
+                    stroke: trackColor || (color === 'default' ? `text.primary` : `${color}.soft.secondary`),
                     strokeWidth: trackSize !== null && trackSize !== void 0 ? trackSize : thumbSize,
                 }
             },

package/CircleProgress/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/CircleProgress/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, ColorTemplateColors, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\nexport type CircleProgressProps = {\n    children?: ReactElement;\n    color?: useBreakpointPropsType<ColorTemplateColors>;\n    trackColor?: useBreakpointPropsType<ColorTemplateColors>;\n    thumbColor?: useBreakpointPropsType<ColorTemplateColors>;\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 = \"background.secondary\"\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' ? `background.secondary` : `${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' ? `divider` : `${color}.alpha`),\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":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/CircleProgress/index.tsx"],"sourcesContent":["\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":["_jsxs","_jsx"],"mappings":"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"}

package/ClickOutside/index.d.ts

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

package/ClickOutside/index.js

@@ -1,5 +1,4 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),core=require('@xanui/core'),React=require('react');const ClickOutside = React.forwardRef((_a, forwardedRef) => {
-    var { children, onClickOutside } = _a, props = tslib.__rest(_a, ["children", "onClickOutside"]);
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var React=require('react');const ClickOutside = React.forwardRef(({ children, onClickOutside }, forwardedRef) => {
     const innerRef = React.useRef(null);
     // merge refs
     const setRefs = (el) => {
@@ -22,5 +21,7 @@
         document.addEventListener("mousedown", handler);
         return () => document.removeEventListener("mousedown", handler);
     }, [onClickOutside]);
-    return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, { ref: setRefs, children: children })));
+    return React.cloneElement(children, {
+        ref: setRefs
+    });
 });exports.default=ClickOutside;//# sourceMappingURL=index.js.map