@xanui/ui 1.1.37 → 1.1.40

package/Checkbox/index.cjs

@@ -0,0 +1,58 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+var CheckIcon = require('@xanui/icons/CheckBox');
+var UnCheckIcon = require('@xanui/icons/CheckBoxOutlineBlank');
+var IndeterminateCheckBoxIcon = require('@xanui/icons/IndeterminateCheckBox');
+
+const Checkbox = React.forwardRef((props, ref) => {
+    let [_a] = core.useInterface("Checkbox", props, {}), { color, size, checkIcon, uncheckIcon, checked, indeterminate, disabled, onChange } = _a, rest = tslib.__rest(_a, ["color", "size", "checkIcon", "uncheckIcon", "checked", "indeterminate", "disabled", "onChange"]);
+    const _p = {};
+    if (checkIcon)
+        _p.checkIcon = checkIcon;
+    if (uncheckIcon)
+        _p.uncheckIcon = uncheckIcon;
+    if (indeterminate)
+        _p.indeterminate = indeterminate;
+    if (size)
+        _p.size = size;
+    if (color)
+        _p.color = color;
+    const p = core.useBreakpointProps(_p);
+    checkIcon = p.checkIcon;
+    uncheckIcon = p.uncheckIcon;
+    indeterminate = p.indeterminate;
+    size = p.size;
+    color = p.color;
+    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");
+    onChange = onChange || (() => set(!c));
+    if (indeterminate) {
+        checked = true;
+        checkIcon = jsxRuntime.jsx(IndeterminateCheckBoxIcon, {});
+    }
+    let sizes = {
+        small: 22,
+        medium: 24,
+        large: 32
+    };
+    if (typeof size === 'string' && sizes[size]) {
+        size = sizes[size];
+    }
+    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": {
+                        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"
+                } }))] }));
+});
+
+module.exports = Checkbox;
+//# sourceMappingURL=index.cjs.map

package/Checkbox/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Checkbox/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { useState, ReactElement } from 'react';\r\nimport { Tag, useInterface, UseColorTemplateColor, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport CheckIcon from '@xanui/icons/CheckBox'\r\nimport UnCheckIcon from '@xanui/icons/CheckBoxOutlineBlank'\r\nimport IndeterminateCheckBoxIcon from '@xanui/icons/IndeterminateCheckBox';\r\n\r\n\r\nexport type CheckboxProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\r\n    checkIcon?: useBreakpointPropsType<ReactElement>;\r\n    uncheckIcon?: useBreakpointPropsType<ReactElement>;\r\n    indeterminate?: useBreakpointPropsType<boolean>;\r\n    checked?: boolean;\r\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n}\r\n\r\nconst Checkbox = React.forwardRef((props: CheckboxProps, ref?: React.Ref<any>) => {\r\n    let [{ color, size, checkIcon, uncheckIcon, checked, indeterminate, disabled, onChange, ...rest }] = useInterface<any>(\"Checkbox\", props, {})\r\n    const _p: any = {}\r\n    if (checkIcon) _p.checkIcon = checkIcon\r\n    if (uncheckIcon) _p.uncheckIcon = uncheckIcon\r\n    if (indeterminate) _p.indeterminate = indeterminate\r\n    if (size) _p.size = size\r\n    if (color) _p.color = color\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    checkIcon = p.checkIcon\r\n    uncheckIcon = p.uncheckIcon\r\n    indeterminate = p.indeterminate\r\n    size = p.size\r\n    color = p.color\r\n\r\n    const [c, set] = useState(false)\r\n    checked ??= c\r\n    size ??= \"medium\"\r\n    color ??= \"brand\"\r\n\r\n    onChange = onChange || (() => set(!c));\r\n    if (indeterminate) {\r\n        checked = true\r\n        checkIcon = <IndeterminateCheckBoxIcon />\r\n    }\r\n\r\n    let sizes: any = {\r\n        small: 22,\r\n        medium: 24,\r\n        large: 32\r\n    }\r\n\r\n    if (typeof size === 'string' && sizes[size]) {\r\n        size = sizes[size]\r\n    }\r\n\r\n    return (\r\n        <>\r\n            <Tag\r\n                baseClass='checkbox'\r\n                onClick={() => {\r\n                    onChange && onChange()\r\n                }}\r\n                sxr={{\r\n                    height: size,\r\n                    width: size,\r\n                    display: \"flex\",\r\n                    alignItems: \"center\",\r\n                    justifyContent: \"center\",\r\n                    color: checked ? color : \"text.secondary\",\r\n                    cursor: \"pointer\",\r\n                    disabled: disabled,\r\n                    \"& svg\": {\r\n                        fontSize: size\r\n                    },\r\n                    ...rest?.sx\r\n                }}\r\n            >\r\n                {checked ? (checkIcon || <CheckIcon />) : (uncheckIcon || <UnCheckIcon />)}\r\n            </Tag>\r\n            <Tag\r\n                {...rest}\r\n                component='input'\r\n                ref={ref}\r\n                readOnly\r\n                type=\"checkbox\"\r\n                checked={checked}\r\n                sxr={{\r\n                    display: \"none!important\"\r\n                }}\r\n            />\r\n        </>\r\n    )\r\n})\r\n\r\nexport default Checkbox\r\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.js

@@ -1,16 +1,14 @@
 "use client";
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@xanui/core');
-var CheckIcon = require('@xanui/icons/CheckBox');
-var UnCheckIcon = require('@xanui/icons/CheckBoxOutlineBlank');
-var IndeterminateCheckBoxIcon = require('@xanui/icons/IndeterminateCheckBox');
+import { __rest } from 'tslib';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useState } from 'react';
+import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
+import CheckIcon from '@xanui/icons/CheckBox';
+import UnCheckIcon from '@xanui/icons/CheckBoxOutlineBlank';
+import IndeterminateCheckBoxIcon from '@xanui/icons/IndeterminateCheckBox';
 
 const Checkbox = React.forwardRef((props, ref) => {
-    let [_a] = core.useInterface("Checkbox", props, {}), { color, size, checkIcon, uncheckIcon, checked, indeterminate, disabled, onChange } = _a, rest = tslib.__rest(_a, ["color", "size", "checkIcon", "uncheckIcon", "checked", "indeterminate", "disabled", "onChange"]);
+    let [_a] = useInterface("Checkbox", props, {}), { color, size, checkIcon, uncheckIcon, checked, indeterminate, disabled, onChange } = _a, rest = __rest(_a, ["color", "size", "checkIcon", "uncheckIcon", "checked", "indeterminate", "disabled", "onChange"]);
     const _p = {};
     if (checkIcon)
         _p.checkIcon = checkIcon;
@@ -22,20 +20,20 @@ const Checkbox = React.forwardRef((props, ref) => {
         _p.size = size;
     if (color)
         _p.color = color;
-    const p = core.useBreakpointProps(_p);
+    const p = useBreakpointProps(_p);
     checkIcon = p.checkIcon;
     uncheckIcon = p.uncheckIcon;
     indeterminate = p.indeterminate;
     size = p.size;
     color = p.color;
-    const [c, set] = React.useState(false);
+    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");
     onChange = onChange || (() => set(!c));
     if (indeterminate) {
         checked = true;
-        checkIcon = jsxRuntime.jsx(IndeterminateCheckBoxIcon, {});
+        checkIcon = jsx(IndeterminateCheckBoxIcon, {});
     }
     let sizes = {
         small: 22,
@@ -45,14 +43,14 @@ const Checkbox = React.forwardRef((props, ref) => {
     if (typeof size === 'string' && sizes[size]) {
         size = sizes[size];
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(core.Tag, { baseClass: 'checkbox', onClick: () => {
+    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": {
                         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: {
+                    } }, 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"
                 } }))] }));
 });
 
-module.exports = Checkbox;
+export { Checkbox as default };
 //# sourceMappingURL=index.js.map

package/Checkbox/index.js.map

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

@@ -0,0 +1,76 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+var index = require('../useCorner/index.cjs');
+
+const Chip = React.forwardRef((props, ref) => {
+    let [_a] = core.useInterface("Chip", props, {}), { label, variant, startIcon, endIcon, color, corner, size } = _a, rest = tslib.__rest(_a, ["label", "variant", "startIcon", "endIcon", "color", "corner", "size"]);
+    const _p = {};
+    if (label)
+        _p.label = label;
+    if (startIcon)
+        _p.startIcon = startIcon;
+    if (endIcon)
+        _p.endIcon = endIcon;
+    if (color)
+        _p.color = color;
+    if (variant)
+        _p.variant = variant;
+    if (corner)
+        _p.corner = corner;
+    if (size)
+        _p.size = size;
+    const p = core.useBreakpointProps(_p);
+    label = p.label;
+    startIcon = p.startIcon;
+    endIcon = p.endIcon;
+    color = p.color || "brand";
+    variant = p.variant || "fill";
+    corner = p.corner || "circle";
+    size = p.size || "medium";
+    rest.sx = rest.sx || {};
+    const cornerCss = index(corner);
+    const template = core.useColorTemplate(color, variant);
+    const sizes = {
+        small: {
+            height: 24,
+            gap: .5,
+            px: startIcon || endIcon ? .8 : 1,
+            fontSize: "small"
+        },
+        medium: {
+            height: 32,
+            gap: 1,
+            px: startIcon || endIcon ? .8 : 1.5,
+            fontSize: 'button',
+        },
+        large: {
+            height: 40,
+            fontSize: 'text',
+            gap: 1,
+            px: startIcon || endIcon ? .8 : 1.5,
+        }
+    };
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({}, cornerCss, template.primary, (sizes[size] || {}), rest, { sxr: {
+            display: "inline-flex",
+            flexDirection: "row",
+            alignItems: "center",
+            transition: "background .3s",
+            overflow: "hidden",
+            "&  > *": {
+                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
+                }, children: label }), endIcon] })));
+});
+
+module.exports = Chip;
+//# sourceMappingURL=index.cjs.map

package/Chip/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport useCorner, { UseCornerTypes } from '../useCorner'\r\n\r\n\r\n\r\nexport type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, \"color\" | \"children\" | \"size\"> & {\r\n    label: useBreakpointPropsType<string | ReactElement>;\r\n    startIcon?: useBreakpointPropsType<ReactElement>;\r\n    endIcon?: useBreakpointPropsType<ReactElement>;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    corner?: useBreakpointPropsType<UseCornerTypes>;\r\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n}\r\n\r\n\r\nconst Chip = React.forwardRef(<T extends TagComponentType = 'div'>(props: ChipProps<T>, ref: React.Ref<any>) => {\r\n    let [{ label, variant, startIcon, endIcon, color, corner, size, ...rest }] = useInterface<any>(\"Chip\", props, {})\r\n    const _p: any = {}\r\n    if (label) _p.label = label\r\n    if (startIcon) _p.startIcon = startIcon\r\n    if (endIcon) _p.endIcon = endIcon\r\n    if (color) _p.color = color\r\n    if (variant) _p.variant = variant\r\n    if (corner) _p.corner = corner\r\n    if (size) _p.size = size\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    label = p.label\r\n    startIcon = p.startIcon\r\n    endIcon = p.endIcon\r\n    color = p.color || \"brand\"\r\n    variant = p.variant || \"fill\"\r\n    corner = p.corner || \"circle\"\r\n    size = p.size || \"medium\"\r\n    rest.sx = (rest as any).sx || {};\r\n\r\n    const cornerCss = useCorner(corner)\r\n    const template = useColorTemplate(color, variant)\r\n\r\n    const sizes: any = {\r\n        small: {\r\n            height: 24,\r\n            gap: .5,\r\n            px: startIcon || endIcon ? .8 : 1,\r\n            fontSize: \"small\"\r\n        },\r\n        medium: {\r\n            height: 32,\r\n            gap: 1,\r\n            px: startIcon || endIcon ? .8 : 1.5,\r\n            fontSize: 'button',\r\n        },\r\n        large: {\r\n            height: 40,\r\n            fontSize: 'text',\r\n            gap: 1,\r\n            px: startIcon || endIcon ? .8 : 1.5,\r\n        }\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            {...cornerCss}\r\n            {...template.primary}\r\n            {...(sizes[size as any] || {})}\r\n            {...rest}\r\n            sxr={{\r\n                display: \"inline-flex\",\r\n                flexDirection: \"row\",\r\n                alignItems: \"center\",\r\n                transition: \"background .3s\",\r\n                overflow: \"hidden\",\r\n\r\n                \"&  > *\": {\r\n                    flex: \"0 0 auto\",\r\n                    textOverflow: \"ellipsis\",\r\n                    whiteSpace: \"nowrap\",\r\n                    overflow: \"hidden\",\r\n                },\r\n            }}\r\n            baseClass='chip'\r\n            ref={ref}\r\n        >\r\n            {startIcon}\r\n            <Tag\r\n                sxr={{\r\n                    alignItems: \"center\",\r\n                    flexBox: true\r\n                }}\r\n            >{label}</Tag>\r\n            {endIcon}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Chip\r\n"],"names":["useInterface","__rest","useBreakpointProps","useCorner","useColorTemplate","_jsxs","Tag","_jsx"],"mappings":"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"}

package/Chip/index.js

@@ -1,13 +1,11 @@
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@xanui/core');
-var index = require('../useCorner/index.js');
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { useInterface, useBreakpointProps, useColorTemplate, Tag } from '@xanui/core';
+import useCorner from '../useCorner/index.js';
 
 const Chip = React.forwardRef((props, ref) => {
-    let [_a] = core.useInterface("Chip", props, {}), { label, variant, startIcon, endIcon, color, corner, size } = _a, rest = tslib.__rest(_a, ["label", "variant", "startIcon", "endIcon", "color", "corner", "size"]);
+    let [_a] = useInterface("Chip", props, {}), { label, variant, startIcon, endIcon, color, corner, size } = _a, rest = __rest(_a, ["label", "variant", "startIcon", "endIcon", "color", "corner", "size"]);
     const _p = {};
     if (label)
         _p.label = label;
@@ -23,7 +21,7 @@ const Chip = React.forwardRef((props, ref) => {
         _p.corner = corner;
     if (size)
         _p.size = size;
-    const p = core.useBreakpointProps(_p);
+    const p = useBreakpointProps(_p);
     label = p.label;
     startIcon = p.startIcon;
     endIcon = p.endIcon;
@@ -32,8 +30,8 @@ const Chip = React.forwardRef((props, ref) => {
     corner = p.corner || "circle";
     size = p.size || "medium";
     rest.sx = rest.sx || {};
-    const cornerCss = index(corner);
-    const template = core.useColorTemplate(color, variant);
+    const cornerCss = useCorner(corner);
+    const template = useColorTemplate(color, variant);
     const sizes = {
         small: {
             height: 24,
@@ -54,7 +52,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 (jsxs(Tag, Object.assign({}, cornerCss, template.primary, (sizes[size] || {}), rest, { sxr: {
             display: "inline-flex",
             flexDirection: "row",
             alignItems: "center",
@@ -66,11 +64,11 @@ const Chip = React.forwardRef((props, ref) => {
                 whiteSpace: "nowrap",
                 overflow: "hidden",
             },
-        }, baseClass: 'chip', ref: ref, children: [startIcon, jsxRuntime.jsx(core.Tag, { sxr: {
+        }, baseClass: 'chip', ref: ref, children: [startIcon, jsx(Tag, { sxr: {
                     alignItems: "center",
                     flexBox: true
                 }, children: label }), endIcon] })));
 });
 
-module.exports = Chip;
+export { Chip as default };
 //# sourceMappingURL=index.js.map

package/Chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport useCorner, { UseCornerTypes } from '../useCorner'\r\n\r\n\r\n\r\nexport type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, \"color\" | \"children\" | \"size\"> & {\r\n    label: useBreakpointPropsType<string | ReactElement>;\r\n    startIcon?: useBreakpointPropsType<ReactElement>;\r\n    endIcon?: useBreakpointPropsType<ReactElement>;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    corner?: useBreakpointPropsType<UseCornerTypes>;\r\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n}\r\n\r\n\r\nconst Chip = React.forwardRef(<T extends TagComponentType = 'div'>(props: ChipProps<T>, ref: React.Ref<any>) => {\r\n    let [{ label, variant, startIcon, endIcon, color, corner, size, ...rest }] = useInterface<any>(\"Chip\", props, {})\r\n    const _p: any = {}\r\n    if (label) _p.label = label\r\n    if (startIcon) _p.startIcon = startIcon\r\n    if (endIcon) _p.endIcon = endIcon\r\n    if (color) _p.color = color\r\n    if (variant) _p.variant = variant\r\n    if (corner) _p.corner = corner\r\n    if (size) _p.size = size\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    label = p.label\r\n    startIcon = p.startIcon\r\n    endIcon = p.endIcon\r\n    color = p.color || \"brand\"\r\n    variant = p.variant || \"fill\"\r\n    corner = p.corner || \"circle\"\r\n    size = p.size || \"medium\"\r\n    rest.sx = (rest as any).sx || {};\r\n\r\n    const cornerCss = useCorner(corner)\r\n    const template = useColorTemplate(color, variant)\r\n\r\n    const sizes: any = {\r\n        small: {\r\n            height: 24,\r\n            gap: .5,\r\n            px: startIcon || endIcon ? .8 : 1,\r\n            fontSize: \"small\"\r\n        },\r\n        medium: {\r\n            height: 32,\r\n            gap: 1,\r\n            px: startIcon || endIcon ? .8 : 1.5,\r\n            fontSize: 'button',\r\n        },\r\n        large: {\r\n            height: 40,\r\n            fontSize: 'text',\r\n            gap: 1,\r\n            px: startIcon || endIcon ? .8 : 1.5,\r\n        }\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            {...cornerCss}\r\n            {...template.primary}\r\n            {...(sizes[size as any] || {})}\r\n            {...rest}\r\n            sxr={{\r\n                display: \"inline-flex\",\r\n                flexDirection: \"row\",\r\n                alignItems: \"center\",\r\n                transition: \"background .3s\",\r\n                overflow: \"hidden\",\r\n\r\n                \"&  > *\": {\r\n                    flex: \"0 0 auto\",\r\n                    textOverflow: \"ellipsis\",\r\n                    whiteSpace: \"nowrap\",\r\n                    overflow: \"hidden\",\r\n                },\r\n            }}\r\n            baseClass='chip'\r\n            ref={ref}\r\n        >\r\n            {startIcon}\r\n            <Tag\r\n                sxr={{\r\n                    alignItems: \"center\",\r\n                    flexBox: true\r\n                }}\r\n            >{label}</Tag>\r\n            {endIcon}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Chip\r\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":["import React, { ReactElement } from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport useCorner, { UseCornerTypes } from '../useCorner'\r\n\r\n\r\n\r\nexport type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, \"color\" | \"children\" | \"size\"> & {\r\n    label: useBreakpointPropsType<string | ReactElement>;\r\n    startIcon?: useBreakpointPropsType<ReactElement>;\r\n    endIcon?: useBreakpointPropsType<ReactElement>;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    corner?: useBreakpointPropsType<UseCornerTypes>;\r\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n}\r\n\r\n\r\nconst Chip = React.forwardRef(<T extends TagComponentType = 'div'>(props: ChipProps<T>, ref: React.Ref<any>) => {\r\n    let [{ label, variant, startIcon, endIcon, color, corner, size, ...rest }] = useInterface<any>(\"Chip\", props, {})\r\n    const _p: any = {}\r\n    if (label) _p.label = label\r\n    if (startIcon) _p.startIcon = startIcon\r\n    if (endIcon) _p.endIcon = endIcon\r\n    if (color) _p.color = color\r\n    if (variant) _p.variant = variant\r\n    if (corner) _p.corner = corner\r\n    if (size) _p.size = size\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    label = p.label\r\n    startIcon = p.startIcon\r\n    endIcon = p.endIcon\r\n    color = p.color || \"brand\"\r\n    variant = p.variant || \"fill\"\r\n    corner = p.corner || \"circle\"\r\n    size = p.size || \"medium\"\r\n    rest.sx = (rest as any).sx || {};\r\n\r\n    const cornerCss = useCorner(corner)\r\n    const template = useColorTemplate(color, variant)\r\n\r\n    const sizes: any = {\r\n        small: {\r\n            height: 24,\r\n            gap: .5,\r\n            px: startIcon || endIcon ? .8 : 1,\r\n            fontSize: \"small\"\r\n        },\r\n        medium: {\r\n            height: 32,\r\n            gap: 1,\r\n            px: startIcon || endIcon ? .8 : 1.5,\r\n            fontSize: 'button',\r\n        },\r\n        large: {\r\n            height: 40,\r\n            fontSize: 'text',\r\n            gap: 1,\r\n            px: startIcon || endIcon ? .8 : 1.5,\r\n        }\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            {...cornerCss}\r\n            {...template.primary}\r\n            {...(sizes[size as any] || {})}\r\n            {...rest}\r\n            sxr={{\r\n                display: \"inline-flex\",\r\n                flexDirection: \"row\",\r\n                alignItems: \"center\",\r\n                transition: \"background .3s\",\r\n                overflow: \"hidden\",\r\n\r\n                \"&  > *\": {\r\n                    flex: \"0 0 auto\",\r\n                    textOverflow: \"ellipsis\",\r\n                    whiteSpace: \"nowrap\",\r\n                    overflow: \"hidden\",\r\n                },\r\n            }}\r\n            baseClass='chip'\r\n            ref={ref}\r\n        >\r\n            {startIcon}\r\n            <Tag\r\n                sxr={{\r\n                    alignItems: \"center\",\r\n                    flexBox: true\r\n                }}\r\n            >{label}</Tag>\r\n            {endIcon}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Chip\r\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/CircleProgress/index.cjs

@@ -0,0 +1,129 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+
+const CircleProgress = React.forwardRef((_a, ref) => {
+    var _b, _c, _d, _e;
+    var { children } = _a, props = tslib.__rest(_a, ["children"]);
+    let [{ color, trackColor, thumbColor, size, value, thumbSize, hideTrack, trackSize, showPercentage, speed }] = core.useInterface("CircleProgress", props, {});
+    const _p = {};
+    if (color)
+        _p.color = color;
+    if (trackColor)
+        _p.trackColor = trackColor;
+    if (thumbColor)
+        _p.thumbColor = thumbColor;
+    if (size)
+        _p.size = size;
+    if (thumbSize)
+        _p.thumbSize = thumbSize;
+    if (trackSize)
+        _p.trackSize = trackSize;
+    if (value)
+        _p.value = value;
+    if (hideTrack)
+        _p.hideTrack = hideTrack;
+    if (showPercentage)
+        _p.showPercentage = showPercentage;
+    if (speed)
+        _p.speed = speed;
+    const p = core.useBreakpointProps(_p);
+    color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
+    trackColor = p.trackColor;
+    thumbColor = p.thumbColor;
+    size = (_c = p.size) !== null && _c !== void 0 ? _c : "medium";
+    thumbSize = (_d = p.thumbSize) !== null && _d !== void 0 ? _d : 4;
+    trackSize = p.trackSize;
+    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";
+    }
+    if (thumbColor === 'default') {
+        thumbColor = "divider.secondary";
+    }
+    let sizes = {
+        small: 24,
+        medium: 32,
+        large: 44
+    };
+    if (typeof size === 'string' && sizes[size]) {
+        size = sizes[size];
+    }
+    let isVal = typeof value === 'number';
+    const animrotate = "anim" + React.useId().replace(":", "");
+    const animdash = "anim" + React.useId().replace(":", "");
+    if (isVal && value > 100)
+        value = 100;
+    const circumference = 125.66370614359172; //radius * 2 * Math.PI
+    const percent = circumference - ((value || 0) / 100) * circumference;
+    if (showPercentage && !children) {
+        children = jsxRuntime.jsxs(core.Tag, { sxr: {
+                color: color === 'default' ? "text.primary" : `${color}.primary`,
+                fontSize: size / 4
+            }, children: [value, "%"] });
+    }
+    return (jsxRuntime.jsxs(core.Tag, { baseClass: 'circle-progress', sxr: {
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            "& svg[class='circle-progress-svg']": {
+                zIndex: 1,
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                transform: isVal ? "rotate(-90deg)" : "none",
+                transformOrigin: isVal ? "center" : "initial",
+                animation: isVal ? "none" : `${animrotate} ${speed}s linear infinite`,
+                [`@keyframes ${animrotate}`]: {
+                    "100%": {
+                        transform: "rotate(360deg)"
+                    }
+                },
+                "& circle.circle-progress-thumb": {
+                    strokeDasharray: circumference,
+                    strokeDashoffset: percent,
+                    stroke: thumbColor || (color === 'default' ? `divider` : `${color}.primary`),
+                    fill: "none",
+                    strokeWidth: thumbSize,
+                    strokeLinecap: "round",
+                    animation: isVal ? "none" : `${animdash} ${speed}s ease-in-out infinite`,
+                    [`@keyframes ${animdash}`]: {
+                        "0%": { strokeDasharray: "1, 150", strokeDashoffset: 0 },
+                        "50%": { strokeDasharray: "90, 150", strokeDashoffset: -35 },
+                        "100%": { strokeDasharray: "90, 150", strokeDashoffset: -124 }
+                    }
+                },
+                "& circle.circle-progress-track": {
+                    fill: "none",
+                    stroke: trackColor || (color === 'default' ? `text.primary` : `${color}.soft.secondary`),
+                    strokeWidth: trackSize !== null && trackSize !== void 0 ? trackSize : thumbSize,
+                }
+            },
+            width: size,
+            height: size,
+            position: "relative"
+        }, ref: ref, children: [jsxRuntime.jsxs("svg", { viewBox: "0 0 50 50", className: "circle-progress-svg", children: [!hideTrack && jsxRuntime.jsx("circle", { className: "circle-progress-track", cx: "25", cy: "25", r: 20 }), jsxRuntime.jsx("circle", { className: "circle-progress-thumb", cx: "25", cy: "25", r: 20 })] }), !!children && jsxRuntime.jsx(core.Tag, { baseClass: "circle-progress-content", sxr: {
+                    zIndex: 2,
+                    width: size - thumbSize,
+                    height: size - thumbSize,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    '& *': {
+                        maxWidth: size - (thumbSize + 8),
+                        maxHeight: size - (thumbSize + 8),
+                    }
+                }, children: children })] }));
+});
+
+module.exports = CircleProgress;
+//# sourceMappingURL=index.cjs.map

package/CircleProgress/index.cjs.map

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

package/CircleProgress/index.js

@@ -1,15 +1,13 @@
 "use client";
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@xanui/core');
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useId } from 'react';
+import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
 
 const CircleProgress = React.forwardRef((_a, ref) => {
     var _b, _c, _d, _e;
-    var { children } = _a, props = tslib.__rest(_a, ["children"]);
-    let [{ color, trackColor, thumbColor, size, value, thumbSize, hideTrack, trackSize, showPercentage, speed }] = core.useInterface("CircleProgress", props, {});
+    var { children } = _a, props = __rest(_a, ["children"]);
+    let [{ color, trackColor, thumbColor, size, value, thumbSize, hideTrack, trackSize, showPercentage, speed }] = useInterface("CircleProgress", props, {});
     const _p = {};
     if (color)
         _p.color = color;
@@ -31,7 +29,7 @@ const CircleProgress = React.forwardRef((_a, ref) => {
         _p.showPercentage = showPercentage;
     if (speed)
         _p.speed = speed;
-    const p = core.useBreakpointProps(_p);
+    const p = useBreakpointProps(_p);
     color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
     trackColor = p.trackColor;
     thumbColor = p.thumbColor;
@@ -57,19 +55,19 @@ const CircleProgress = React.forwardRef((_a, ref) => {
         size = sizes[size];
     }
     let isVal = typeof value === 'number';
-    const animrotate = "anim" + React.useId().replace(":", "");
-    const animdash = "anim" + React.useId().replace(":", "");
+    const animrotate = "anim" + useId().replace(":", "");
+    const animdash = "anim" + useId().replace(":", "");
     if (isVal && value > 100)
         value = 100;
     const circumference = 125.66370614359172; //radius * 2 * Math.PI
     const percent = circumference - ((value || 0) / 100) * circumference;
     if (showPercentage && !children) {
-        children = jsxRuntime.jsxs(core.Tag, { sxr: {
+        children = jsxs(Tag, { sxr: {
                 color: color === 'default' ? "text.primary" : `${color}.primary`,
                 fontSize: size / 4
             }, children: [value, "%"] });
     }
-    return (jsxRuntime.jsxs(core.Tag, { baseClass: 'circle-progress', sxr: {
+    return (jsxs(Tag, { baseClass: 'circle-progress', sxr: {
             display: "inline-flex",
             alignItems: "center",
             justifyContent: "center",
@@ -111,7 +109,7 @@ const CircleProgress = React.forwardRef((_a, ref) => {
             width: size,
             height: size,
             position: "relative"
-        }, ref: ref, children: [jsxRuntime.jsxs("svg", { viewBox: "0 0 50 50", className: "circle-progress-svg", children: [!hideTrack && jsxRuntime.jsx("circle", { className: "circle-progress-track", cx: "25", cy: "25", r: 20 }), jsxRuntime.jsx("circle", { className: "circle-progress-thumb", cx: "25", cy: "25", r: 20 })] }), !!children && jsxRuntime.jsx(core.Tag, { baseClass: "circle-progress-content", sxr: {
+        }, ref: ref, children: [jsxs("svg", { viewBox: "0 0 50 50", className: "circle-progress-svg", children: [!hideTrack && jsx("circle", { className: "circle-progress-track", cx: "25", cy: "25", r: 20 }), jsx("circle", { className: "circle-progress-thumb", cx: "25", cy: "25", r: 20 })] }), !!children && jsx(Tag, { baseClass: "circle-progress-content", sxr: {
                     zIndex: 2,
                     width: size - thumbSize,
                     height: size - thumbSize,
@@ -125,5 +123,5 @@ const CircleProgress = React.forwardRef((_a, ref) => {
                 }, children: children })] }));
 });
 
-module.exports = CircleProgress;
+export { CircleProgress as default };
 //# sourceMappingURL=index.js.map

package/CircleProgress/index.js.map

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