@xanui/ui 1.0.0

package/Checkbox/index.d.ts

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

package/Checkbox/index.js

@@ -0,0 +1,44 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core'),CheckIcon=require('@xanui/icons/CheckBox'),UnCheckIcon=require('@xanui/icons/CheckBoxOutlineBlank'),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, Object.assign({ 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"
+                } }))] }));
+});exports.default=Checkbox;//# sourceMappingURL=index.js.map

package/Checkbox/index.js.map

@@ -0,0 +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":"wWAiBA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAoB,EAAE,GAAoB,KAAI;AAC7E,IAAA,IAAI,CAAA,EAAA,CAAA,GAAiGA,iBAAY,CAAM,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,EAAxI,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAA,EAAW,EAAN,IAAI,GAAAC,YAAA,CAAA,EAAA,EAA1F,CAAA,OAAA,EAAA,MAAA,EAAA,WAAA,EAAA,aAAA,EAAA,SAAA,EAAA,eAAA,EAAA,UAAA,EAAA,UAAA,CAA4F,CAA4C;IAC7I,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,WAAW;AAAE,QAAA,EAAE,CAAC,WAAW,GAAG,WAAW;AAC7C,IAAA,IAAI,aAAa;AAAE,QAAA,EAAE,CAAC,aAAa,GAAG,aAAa;AACnD,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,MAAM,CAAC,GAAQC,uBAAkB,CAAC,EAAE,CAAC;AAErC,IAAA,SAAS,GAAG,CAAC,CAAC,SAAS;AACvB,IAAA,WAAW,GAAG,CAAC,CAAC,WAAW;AAC3B,IAAA,aAAa,GAAG,CAAC,CAAC,aAAa;AAC/B,IAAA,IAAI,GAAG,CAAC,CAAC,IAAI;AACb,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;IAEf,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;IAChC,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAP,OAAO,IAAP,OAAO,GAAK,CAAC,CAAA;IACb,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAJ,IAAI,IAAJ,IAAI,GAAK,QAAQ,CAAA;IACjB,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAL,KAAK,IAAL,KAAK,GAAK,OAAO,CAAA;AAEjB,IAAA,QAAQ,GAAG,QAAQ,KAAK,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AACtC,IAAA,IAAI,aAAa,EAAE;QACf,OAAO,GAAG,IAAI;AACd,QAAA,SAAS,GAAGC,cAAA,CAAC,yBAAyB,EAAA,EAAA,CAAG;AAC5C,IAAA;AAED,IAAA,IAAI,KAAK,GAAQ;AACb,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,KAAK,EAAE;KACV;IAED,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE;AACzC,QAAA,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;AACrB,IAAA;AAED,IAAA,QACIC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,CACIF,cAAA,CAACG,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,UAAU,EACpB,OAAO,EAAE,MAAK;oBACV,QAAQ,IAAI,QAAQ,EAAE;gBAC1B,CAAC,EACD,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACC,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,QAAQ,EACpB,cAAc,EAAE,QAAQ,EACxB,KAAK,EAAE,OAAO,GAAG,KAAK,GAAG,gBAAgB,EACzC,MAAM,EAAE,SAAS,EACjB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE;AACL,wBAAA,QAAQ,EAAE;qBACb,EAAA,EACE,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,EAAE,CAAA,EAAA,EAAA,EAAA,QAAA,EAGd,OAAO,IAAI,SAAS,IAAIH,cAAA,CAAC,SAAS,EAAA,EAAA,CAAG,KAAK,WAAW,IAAIA,cAAA,CAAC,WAAW,KAAG,CAAC,EAAA,CAAA,CACxE,EACNA,cAAA,CAACG,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EACR,QAAQ,EAAA,IAAA,EACR,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE;AACD,oBAAA,OAAO,EAAE;iBACZ,EAAA,CAAA,CACH,CAAA,EAAA,CACH;AAEX,CAAC"}

package/Checkbox/index.mjs

@@ -0,0 +1,44 @@
+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] = 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;
+    if (uncheckIcon)
+        _p.uncheckIcon = uncheckIcon;
+    if (indeterminate)
+        _p.indeterminate = indeterminate;
+    if (size)
+        _p.size = size;
+    if (color)
+        _p.color = color;
+    const p = useBreakpointProps(_p);
+    checkIcon = p.checkIcon;
+    uncheckIcon = p.uncheckIcon;
+    indeterminate = p.indeterminate;
+    size = p.size;
+    color = p.color;
+    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 = jsx(IndeterminateCheckBoxIcon, {});
+    }
+    let sizes = {
+        small: 22,
+        medium: 24,
+        large: 32
+    };
+    if (typeof size === 'string' && sizes[size]) {
+        size = sizes[size];
+    }
+    return (jsxs(Fragment, { children: [jsx(Tag, Object.assign({ 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 || jsx(CheckIcon, {})) : (uncheckIcon || jsx(UnCheckIcon, {})) })), jsx(Tag, Object.assign({}, rest, { component: 'input', ref: ref, readOnly: true, type: "checkbox", checked: checked, sxr: {
+                    display: "none!important"
+                } }))] }));
+});export{Checkbox as default};//# sourceMappingURL=index.mjs.map

package/Checkbox/index.mjs.map

@@ -0,0 +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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"}

package/Chip/index.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactElement } from 'react';
+import { TagComponentType, TagProps, useBreakpointPropsType, ColorTemplateColors, ColorTemplateType } 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>;
+    corner?: useBreakpointPropsType<UseCornerTypes>;
+    size?: useBreakpointPropsType<"small" | "medium" | "large">;
+};
+declare const Chip: React.ForwardRefExoticComponent<Omit<ChipProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+
+export { Chip as default };
+export type { ChipProps };

package/Chip/index.js

@@ -0,0 +1,59 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core'),index=require('../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"]);
+    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.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
+        },
+        medium: {
+            height: 34,
+            gap: 1,
+            fontSize: 14,
+        },
+        large: {
+            height: 38,
+            fontSize: 15,
+            gap: 1,
+        }
+    };
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({}, cornerCss, template, (sizes[size] || {}), rest, { sxr: {
+            display: "inline-flex",
+            flexDirection: "row",
+            alignItems: "center",
+            transition: "background .3s",
+            fontFamily: "default",
+            overflow: "hidden",
+            px: startIcon || endIcon ? 1 : 1.5,
+        }, baseClass: 'chip', ref: ref }, { children: [startIcon, jsxRuntime.jsx(core.Tag, Object.assign({ sxr: {
+                    alignItems: "center",
+                    flexBox: true
+                } }, { children: label })), endIcon] })));
+});exports.default=Chip;//# sourceMappingURL=index.js.map

package/Chip/index.js.map

@@ -0,0 +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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"}

package/Chip/index.mjs

@@ -0,0 +1,59 @@
+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.mjs';const Chip = React.forwardRef((props, ref) => {
+    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;
+    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 = 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 = 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
+        },
+        medium: {
+            height: 34,
+            gap: 1,
+            fontSize: 14,
+        },
+        large: {
+            height: 38,
+            fontSize: 15,
+            gap: 1,
+        }
+    };
+    return (jsxs(Tag, Object.assign({}, cornerCss, template, (sizes[size] || {}), rest, { sxr: {
+            display: "inline-flex",
+            flexDirection: "row",
+            alignItems: "center",
+            transition: "background .3s",
+            fontFamily: "default",
+            overflow: "hidden",
+            px: startIcon || endIcon ? 1 : 1.5,
+        }, baseClass: 'chip', ref: ref }, { children: [startIcon, jsx(Tag, Object.assign({ sxr: {
+                    alignItems: "center",
+                    flexBox: true
+                } }, { children: label })), endIcon] })));
+});export{Chip as default};//# sourceMappingURL=index.mjs.map

package/Chip/index.mjs.map

@@ -0,0 +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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"}

package/CircleProgress/index.d.ts

@@ -0,0 +1,20 @@
+import React, { ReactElement } from 'react';
+import { useBreakpointPropsType, ColorTemplateColors } from '@xanui/core';
+
+type CircleProgressProps = {
+    children?: ReactElement;
+    color?: useBreakpointPropsType<ColorTemplateColors>;
+    trackColor?: useBreakpointPropsType<ColorTemplateColors>;
+    thumbColor?: useBreakpointPropsType<ColorTemplateColors>;
+    size?: useBreakpointPropsType<number | "small" | "medium" | "large">;
+    thumbSize?: useBreakpointPropsType<number>;
+    trackSize?: useBreakpointPropsType<number>;
+    value?: useBreakpointPropsType<number>;
+    hideTrack?: useBreakpointPropsType<boolean>;
+    showPercentage?: useBreakpointPropsType<boolean>;
+    speed?: useBreakpointPropsType<number>;
+};
+declare const CircleProgress: React.ForwardRefExoticComponent<CircleProgressProps & React.RefAttributes<any>>;
+
+export { CircleProgress as default };
+export type { CircleProgressProps };

package/CircleProgress/index.js

@@ -0,0 +1,118 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),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 = "background.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, Object.assign({ sxr: {
+                color: color === 'default' ? "text.primary" : `${color}.primary`,
+                fontSize: size / 4
+            } }, { children: [value, "%"] }));
+    }
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({ 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' ? `background.secondary` : `${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' ? `divider` : `${color}.alpha`),
+                    strokeWidth: trackSize !== null && trackSize !== void 0 ? trackSize : thumbSize,
+                }
+            },
+            width: size,
+            height: size,
+            position: "relative"
+        }, ref: ref }, { children: [jsxRuntime.jsxs("svg", Object.assign({ 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, Object.assign({ 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 }))] })));
+});exports.default=CircleProgress;//# sourceMappingURL=index.js.map

package/CircleProgress/index.js.map

@@ -0,0 +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                        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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"}

package/CircleProgress/index.mjs

@@ -0,0 +1,118 @@
+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 = __rest(_a, ["children"]);
+    let [{ color, trackColor, thumbColor, size, value, thumbSize, hideTrack, trackSize, showPercentage, speed }] = 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 = 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 = "background.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" + 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 = jsxs(Tag, Object.assign({ sxr: {
+                color: color === 'default' ? "text.primary" : `${color}.primary`,
+                fontSize: size / 4
+            } }, { children: [value, "%"] }));
+    }
+    return (jsxs(Tag, Object.assign({ 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' ? `background.secondary` : `${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' ? `divider` : `${color}.alpha`),
+                    strokeWidth: trackSize !== null && trackSize !== void 0 ? trackSize : thumbSize,
+                }
+            },
+            width: size,
+            height: size,
+            position: "relative"
+        }, ref: ref }, { children: [jsxs("svg", Object.assign({ 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, Object.assign({ 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 }))] })));
+});export{CircleProgress as default};//# sourceMappingURL=index.mjs.map

package/CircleProgress/index.mjs.map

@@ -0,0 +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                        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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"}

package/ClickOutside/index.d.ts

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