@xanui/ui 1.1.37 → 1.1.40

package/Select/index.js

@@ -1,32 +1,30 @@
 "use client";
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var index = require('../Input/index.js');
-var index$3 = require('../List/index.js');
-var index$2 = require('../Menu/index.js');
-var index$1 = require('../Stack/index.js');
-var DownIcon = require('@xanui/icons/KeyboardArrowDown');
-var UpIcon = require('@xanui/icons/KeyboardArrowUp');
-var core = require('@xanui/core');
+import { __rest } from 'tslib';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React, { useState, useRef, useMemo, Children, cloneElement } from 'react';
+import Input from '../Input/index.js';
+import List from '../List/index.js';
+import Menu from '../Menu/index.js';
+import Stack from '../Stack/index.js';
+import DownIcon from '@xanui/icons/KeyboardArrowDown';
+import UpIcon from '@xanui/icons/KeyboardArrowUp';
+import { useInterface, useMergeRefs } from '@xanui/core';
 
 const Select = React.forwardRef((_a, ref) => {
     var _b, _c, _d, _e, _f, _g;
-    var { onChange, value, children, error, helperText, name, refs } = _a, props = tslib.__rest(_a, ["onChange", "value", "children", "error", "helperText", "name", "refs"]);
-    let [_h] = core.useInterface("Select", props, {}), { slotProps, color, variant } = _h, inputProps = tslib.__rest(_h, ["slotProps", "color", "variant"]);
+    var { onChange, value, children, error, helperText, name, refs } = _a, props = __rest(_a, ["onChange", "value", "children", "error", "helperText", "name", "refs"]);
+    let [_h] = useInterface("Select", props, {}), { slotProps, color, variant } = _h, inputProps = __rest(_h, ["slotProps", "color", "variant"]);
     color !== null && color !== void 0 ? color : (color = "brand");
     variant !== null && variant !== void 0 ? variant : (variant = "fill");
-    const [target, setTarget] = React.useState();
-    const conRef = React.useRef(null);
-    const { childs, selectedProps } = React.useMemo(() => {
+    const [target, setTarget] = useState();
+    const conRef = useRef(null);
+    const { childs, selectedProps } = useMemo(() => {
         let sProps = {};
-        const c = React.Children.map(children, (child) => {
+        const c = Children.map(children, (child) => {
             let selected = child.props.value === value;
             if (selected)
                 sProps = child.props;
-            return React.cloneElement(child, {
+            return cloneElement(child, {
                 value: undefined,
                 selected,
                 onClick: () => {
@@ -40,20 +38,20 @@ const Select = React.forwardRef((_a, ref) => {
             selectedProps: sProps
         };
     }, [children, value]);
-    const mergeRefs = core.useMergeRefs(ref, conRef);
+    const mergeRefs = useMergeRefs(ref, conRef);
     const toggleMenu = () => setTarget(target ? null : conRef.current);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index, Object.assign({ ref: mergeRefs, color: color, variant: variant === "soft" ? "fill" : variant, endIcon: jsxRuntime.jsxs(index$1, { flexDirection: "row", component: "span", children: [" ", (target ? jsxRuntime.jsx(UpIcon, {}) : jsxRuntime.jsx(DownIcon, {}))] }), readOnly: true, value: typeof selectedProps.children === 'string' ? selectedProps.children : value, cursor: "pointer", userSelect: "none", startIcon: selectedProps.startIcon, focused: !!target, error: error, helperText: helperText, name: name }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, inputProps, { refs: Object.assign({ input: refs === null || refs === void 0 ? void 0 : refs.input }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _b === void 0 ? void 0 : _b.refs), slotProps: {
+    return (jsxs(Fragment, { children: [jsx(Input, Object.assign({ ref: mergeRefs, color: color, variant: variant === "soft" ? "fill" : variant, endIcon: jsxs(Stack, { flexDirection: "row", component: "span", children: [" ", (target ? jsx(UpIcon, {}) : jsx(DownIcon, {}))] }), readOnly: true, value: typeof selectedProps.children === 'string' ? selectedProps.children : value, cursor: "pointer", userSelect: "none", startIcon: selectedProps.startIcon, focused: !!target, error: error, helperText: helperText, name: name }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, inputProps, { refs: Object.assign({ input: refs === null || refs === void 0 ? void 0 : refs.input }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _b === void 0 ? void 0 : _b.refs), slotProps: {
                     rootContainer: Object.assign(Object.assign({ cursor: "pointer", userSelect: "none" }, (((_d = (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _c === void 0 ? void 0 : _c.slotProps) === null || _d === void 0 ? void 0 : _d.container) || {})), { onClick: () => {
                             if (!target) {
                                 toggleMenu();
                             }
                         } })
-                } })), jsxRuntime.jsx(index$2, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.menu, target: target, placement: "bottom-left" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { slotProps: Object.assign(Object.assign({}, (_e = slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu) === null || _e === void 0 ? void 0 : _e.slotProps), { content: Object.assign(Object.assign({ mt: .5 }, (_f = slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu) === null || _f === void 0 ? void 0 : _f.content), { width: conRef && ((_g = conRef === null || conRef === void 0 ? void 0 : conRef.current) === null || _g === void 0 ? void 0 : _g.clientWidth) }) }), onClickOutside: (e) => {
+                } })), jsx(Menu, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.menu, target: target, placement: "bottom-left" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { slotProps: Object.assign(Object.assign({}, (_e = slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu) === null || _e === void 0 ? void 0 : _e.slotProps), { content: Object.assign(Object.assign({ mt: .5 }, (_f = slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu) === null || _f === void 0 ? void 0 : _f.content), { width: conRef && ((_g = conRef === null || conRef === void 0 ? void 0 : conRef.current) === null || _g === void 0 ? void 0 : _g.clientWidth) }) }), onClickOutside: (e) => {
                     if (conRef.current.contains(e.target))
                         return;
                     toggleMenu();
-                }, children: jsxRuntime.jsx(index$3, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.list }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant === "outline" ? "fill" : variant, children: childs })) }))] }));
+                }, children: jsx(List, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.list }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant === "outline" ? "fill" : variant, children: childs })) }))] }));
 });
 
-module.exports = Select;
+export { Select as default };
 //# sourceMappingURL=index.js.map

package/Select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\r\nimport Input, { InputProps } from '../Input'\r\nimport List, { ListProps } from '../List'\r\nimport Menu, { MenuProps } from '../Menu'\r\nimport Stack from '../Stack'\r\nimport { OptionProps } from '../Option'\r\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\r\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\r\nimport { useInterface, useMergeRefs } from '@xanui/core'\r\n\r\n\r\nexport type SelectProps = Omit<InputProps, \"onChange\" | \"value\" | \"children\" | \"slotProps\"> & {\r\n    value?: string | number;\r\n    onChange?: (value: string | number) => void;\r\n    children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\r\n\r\n    refs?: {\r\n        input?: React.Ref<any>;\r\n        menu?: React.Ref<any>;\r\n        list?: React.Ref<any>;\r\n    };\r\n    slotProps?: {\r\n        menu?: Omit<MenuProps, 'children' | 'target'>;\r\n        input?: Omit<InputProps, \"onChange\" | \"value\">;\r\n        list?: Omit<ListProps, \"children\">\r\n    }\r\n}\r\n\r\nconst Select = React.forwardRef(({ onChange, value, children, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\r\n    let [{ slotProps, color, variant, ...inputProps }] = useInterface<any>(\"Select\", props, {})\r\n    color ??= \"brand\"\r\n    variant ??= \"fill\"\r\n    const [target, setTarget] = useState<any>()\r\n    const conRef = useRef(null)\r\n    const { childs, selectedProps } = useMemo(() => {\r\n        let sProps: any = {}\r\n        const c = Children.map(children, (child: any) => {\r\n            let selected = child.props.value === value\r\n            if (selected) sProps = child.props\r\n            return cloneElement(child, {\r\n                value: undefined,\r\n                selected,\r\n                onClick: () => {\r\n                    setTarget(null)\r\n                    onChange && onChange(child.props.value)\r\n                }\r\n            })\r\n        })\r\n        return {\r\n            childs: c,\r\n            selectedProps: sProps as OptionProps\r\n        }\r\n    }, [children, value])\r\n\r\n    const mergeRefs = useMergeRefs(ref, conRef)\r\n    const toggleMenu = () => setTarget(target ? null : conRef.current)\r\n\r\n    return (\r\n        <>\r\n            <Input\r\n                ref={mergeRefs}\r\n                color={color}\r\n                variant={variant === \"soft\" ? \"fill\" : variant}\r\n                endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\r\n                readOnly\r\n                value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\r\n                cursor=\"pointer\"\r\n                userSelect=\"none\"\r\n                startIcon={selectedProps.startIcon}\r\n                focused={!!target}\r\n                error={error}\r\n                helperText={helperText}\r\n                name={name}\r\n                {...slotProps?.input}\r\n                {...inputProps}\r\n                refs={{\r\n                    input: refs?.input,\r\n                    ...slotProps?.input?.refs\r\n                }}\r\n                slotProps={{\r\n                    rootContainer: {\r\n                        cursor: \"pointer\",\r\n                        userSelect: \"none\",\r\n                        ...(slotProps?.input?.slotProps?.container || {}),\r\n                        onClick: () => {\r\n                            if (!target) {\r\n                                toggleMenu()\r\n                            }\r\n                        },\r\n                    }\r\n                }}\r\n            />\r\n            <Menu\r\n                ref={refs?.menu}\r\n                target={target}\r\n                placement=\"bottom-left\"\r\n                {...slotProps?.menu}\r\n                slotProps={{\r\n                    ...slotProps?.menu?.slotProps,\r\n                    content: {\r\n                        mt: .5,\r\n                        ...slotProps?.menu?.content,\r\n                        width: conRef && (conRef?.current as any)?.clientWidth,\r\n                    }\r\n                }}\r\n                onClickOutside={(e) => {\r\n                    if ((conRef.current as any).contains(e.target)) return;\r\n                    toggleMenu()\r\n                }}\r\n            >\r\n                <List\r\n                    ref={refs?.list}\r\n                    {...slotProps?.list}\r\n                    color={color}\r\n                    variant={variant === \"outline\" ? \"fill\" : variant}\r\n                >\r\n                    {childs}\r\n                </List>\r\n            </Menu>\r\n        </>\r\n    )\r\n})\r\n\r\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;;;AA8BA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAuBgB;;AAMY;;AAER;AAEP;;;AAiBG;;AAcpB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Select/index.tsx"],"sourcesContent":["'use client'\r\n\r\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\r\nimport Input, { InputProps } from '../Input'\r\nimport List, { ListProps } from '../List'\r\nimport Menu, { MenuProps } from '../Menu'\r\nimport Stack from '../Stack'\r\nimport { OptionProps } from '../Option'\r\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\r\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\r\nimport { useInterface, useMergeRefs } from '@xanui/core'\r\n\r\n\r\nexport type SelectProps = Omit<InputProps, \"onChange\" | \"value\" | \"children\" | \"slotProps\"> & {\r\n    value?: string | number;\r\n    onChange?: (value: string | number) => void;\r\n    children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\r\n\r\n    refs?: {\r\n        input?: React.Ref<any>;\r\n        menu?: React.Ref<any>;\r\n        list?: React.Ref<any>;\r\n    };\r\n    slotProps?: {\r\n        menu?: Omit<MenuProps, 'children' | 'target'>;\r\n        input?: Omit<InputProps, \"onChange\" | \"value\">;\r\n        list?: Omit<ListProps, \"children\">\r\n    }\r\n}\r\n\r\nconst Select = React.forwardRef(({ onChange, value, children, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\r\n    let [{ slotProps, color, variant, ...inputProps }] = useInterface<any>(\"Select\", props, {})\r\n    color ??= \"brand\"\r\n    variant ??= \"fill\"\r\n    const [target, setTarget] = useState<any>()\r\n    const conRef = useRef(null)\r\n    const { childs, selectedProps } = useMemo(() => {\r\n        let sProps: any = {}\r\n        const c = Children.map(children, (child: any) => {\r\n            let selected = child.props.value === value\r\n            if (selected) sProps = child.props\r\n            return cloneElement(child, {\r\n                value: undefined,\r\n                selected,\r\n                onClick: () => {\r\n                    setTarget(null)\r\n                    onChange && onChange(child.props.value)\r\n                }\r\n            })\r\n        })\r\n        return {\r\n            childs: c,\r\n            selectedProps: sProps as OptionProps\r\n        }\r\n    }, [children, value])\r\n\r\n    const mergeRefs = useMergeRefs(ref, conRef)\r\n    const toggleMenu = () => setTarget(target ? null : conRef.current)\r\n\r\n    return (\r\n        <>\r\n            <Input\r\n                ref={mergeRefs}\r\n                color={color}\r\n                variant={variant === \"soft\" ? \"fill\" : variant}\r\n                endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\r\n                readOnly\r\n                value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\r\n                cursor=\"pointer\"\r\n                userSelect=\"none\"\r\n                startIcon={selectedProps.startIcon}\r\n                focused={!!target}\r\n                error={error}\r\n                helperText={helperText}\r\n                name={name}\r\n                {...slotProps?.input}\r\n                {...inputProps}\r\n                refs={{\r\n                    input: refs?.input,\r\n                    ...slotProps?.input?.refs\r\n                }}\r\n                slotProps={{\r\n                    rootContainer: {\r\n                        cursor: \"pointer\",\r\n                        userSelect: \"none\",\r\n                        ...(slotProps?.input?.slotProps?.container || {}),\r\n                        onClick: () => {\r\n                            if (!target) {\r\n                                toggleMenu()\r\n                            }\r\n                        },\r\n                    }\r\n                }}\r\n            />\r\n            <Menu\r\n                ref={refs?.menu}\r\n                target={target}\r\n                placement=\"bottom-left\"\r\n                {...slotProps?.menu}\r\n                slotProps={{\r\n                    ...slotProps?.menu?.slotProps,\r\n                    content: {\r\n                        mt: .5,\r\n                        ...slotProps?.menu?.content,\r\n                        width: conRef && (conRef?.current as any)?.clientWidth,\r\n                    }\r\n                }}\r\n                onClickOutside={(e) => {\r\n                    if ((conRef.current as any).contains(e.target)) return;\r\n                    toggleMenu()\r\n                }}\r\n            >\r\n                <List\r\n                    ref={refs?.list}\r\n                    {...slotProps?.list}\r\n                    color={color}\r\n                    variant={variant === \"outline\" ? \"fill\" : variant}\r\n                >\r\n                    {childs}\r\n                </List>\r\n            </Menu>\r\n        </>\r\n    )\r\n})\r\n\r\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;AA8BA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAuBgB;;AAMY;;AAER;AAEP;;;AAiBG;;AAcpB;;"}

package/Skeleton/index.cjs

@@ -0,0 +1,60 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+
+const Skeleton = React.forwardRef((_a, ref) => {
+    var { children, loading, color, animation } = _a, props = tslib.__rest(_a, ["children", "loading", "color", "animation"]);
+    if (!children)
+        loading = true;
+    if (loading) {
+        animation !== null && animation !== void 0 ? animation : (animation = 'pulse');
+        color !== null && color !== void 0 ? color : (color = "default");
+        let sxr = {};
+        switch (animation) {
+            case 'pulse':
+                sxr = {
+                    bgcolor: "divider.primary",
+                    width: "100%",
+                    animation: 'skpulse 1.5s infinite',
+                    "@keyframes skpulse": {
+                        '0%, 100%': {
+                            opacity: 1,
+                        },
+                        '50%': {
+                            opacity: 0.4,
+                        },
+                    }
+                };
+                break;
+            case 'wave':
+                sxr = {
+                    position: 'relative',
+                    overflow: 'hidden',
+                    bgcolor: "divider.primary",
+                    "&::after": {
+                        content: '""',
+                        position: 'absolute',
+                        top: 0,
+                        left: "0%",
+                        width: '100%',
+                        height: '100%',
+                        animation: 'skwave 2s infinite',
+                        background: `linear-gradient(90deg, transparent 0%, var(--color-divider-secondary) 50%, transparent 100%)`,
+                    },
+                    "@keyframes skwave": {
+                        '0%': { left: '-100%' },
+                        '100%': { left: '100%' }
+                    }
+                };
+                break;
+        }
+        return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, { baseClass: 'skeleton', ref: ref, sxr: sxr })));
+    }
+    return children;
+});
+
+module.exports = Skeleton;
+//# sourceMappingURL=index.cjs.map

package/Skeleton/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type SkeletonProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n   animation?: 'pulse' | 'wave' | 'none';\r\n   loading?: boolean;\r\n}\r\n\r\nconst Skeleton = React.forwardRef(<T extends TagComponentType = \"div\">({ children, loading, color, animation, ...props }: SkeletonProps<T>, ref: React.Ref<any>) => {\r\n\r\n   if (!children) loading = true\r\n\r\n   if (loading) {\r\n      animation ??= 'pulse'\r\n      color ??= \"default\"\r\n      let sxr: any = {}\r\n      switch (animation) {\r\n         case 'pulse':\r\n            sxr = {\r\n               bgcolor: \"divider.primary\",\r\n               width: \"100%\",\r\n               animation: 'skpulse 1.5s infinite',\r\n               \"@keyframes skpulse\": {\r\n                  '0%, 100%': {\r\n                     opacity: 1,\r\n                  },\r\n                  '50%': {\r\n                     opacity: 0.4,\r\n                  },\r\n               }\r\n            }\r\n            break;\r\n         case 'wave':\r\n            sxr = {\r\n               position: 'relative',\r\n               overflow: 'hidden',\r\n               bgcolor: \"divider.primary\",\r\n               \"&::after\": {\r\n                  content: '\"\"',\r\n                  position: 'absolute',\r\n                  top: 0,\r\n                  left: \"0%\",\r\n                  width: '100%',\r\n                  height: '100%',\r\n                  animation: 'skwave 2s infinite',\r\n                  background: `linear-gradient(90deg, transparent 0%, var(--color-divider-secondary) 50%, transparent 100%)`,\r\n               },\r\n               \"@keyframes skwave\": {\r\n                  '0%': { left: '-100%' },\r\n                  '100%': { left: '100%' }\r\n               }\r\n            }\r\n            break;\r\n      }\r\n      return (\r\n         <Tag\r\n            {...props}\r\n            baseClass='skeleton'\r\n            ref={ref}\r\n            sxr={sxr}\r\n         />\r\n      )\r\n   }\r\n\r\n   return children\r\n})\r\n\r\nexport default Skeleton\r\n\r\n"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAQA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAmE,EAAE,GAAmB,KAAI;AAA5F,IAAA,IAAA,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAA,GAAA,EAA8B,EAAzB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA/C,CAAA,UAAA,EAAA,SAAA,EAAA,OAAA,EAAA,WAAA,CAAiD,CAAF;AAEnH,IAAA,IAAI,CAAC,QAAQ;QAAE,OAAO,GAAG,IAAI;IAE7B,IAAI,OAAO,EAAE;QACV,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAT,SAAS,IAAT,SAAS,GAAK,OAAO,CAAA;QACrB,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAL,KAAK,IAAL,KAAK,GAAK,SAAS,CAAA;QACnB,IAAI,GAAG,GAAQ,EAAE;QACjB,QAAQ,SAAS;AACd,YAAA,KAAK,OAAO;AACT,gBAAA,GAAG,GAAG;AACH,oBAAA,OAAO,EAAE,iBAAiB;AAC1B,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,SAAS,EAAE,uBAAuB;AAClC,oBAAA,oBAAoB,EAAE;AACnB,wBAAA,UAAU,EAAE;AACT,4BAAA,OAAO,EAAE,CAAC;AACZ,yBAAA;AACD,wBAAA,KAAK,EAAE;AACJ,4BAAA,OAAO,EAAE,GAAG;AACd,yBAAA;AACH;iBACH;gBACD;AACH,YAAA,KAAK,MAAM;AACR,gBAAA,GAAG,GAAG;AACH,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,OAAO,EAAE,iBAAiB;AAC1B,oBAAA,UAAU,EAAE;AACT,wBAAA,OAAO,EAAE,IAAI;AACb,wBAAA,QAAQ,EAAE,UAAU;AACpB,wBAAA,GAAG,EAAE,CAAC;AACN,wBAAA,IAAI,EAAE,IAAI;AACV,wBAAA,KAAK,EAAE,MAAM;AACb,wBAAA,MAAM,EAAE,MAAM;AACd,wBAAA,SAAS,EAAE,oBAAoB;AAC/B,wBAAA,UAAU,EAAE,CAAA,4FAAA,CAA8F;AAC5G,qBAAA;AACD,oBAAA,mBAAmB,EAAE;AAClB,wBAAA,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;AACvB,wBAAA,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM;AACxB;iBACH;gBACD;;AAEN,QAAA,QACGC,cAAA,CAACC,QAAG,oBACG,KAAK,EAAA,EACT,SAAS,EAAC,UAAU,EACpB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EAAA,CAAA,CACT;IAER;AAEA,IAAA,OAAO,QAAQ;AAClB,CAAC;;;;"}

package/Skeleton/index.js

@@ -1,12 +1,10 @@
-'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 { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Tag } from '@xanui/core';
 
 const Skeleton = React.forwardRef((_a, ref) => {
-    var { children, loading, color, animation } = _a, props = tslib.__rest(_a, ["children", "loading", "color", "animation"]);
+    var { children, loading, color, animation } = _a, props = __rest(_a, ["children", "loading", "color", "animation"]);
     if (!children)
         loading = true;
     if (loading) {
@@ -51,10 +49,10 @@ const Skeleton = React.forwardRef((_a, ref) => {
                 };
                 break;
         }
-        return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, { baseClass: 'skeleton', ref: ref, sxr: sxr })));
+        return (jsx(Tag, Object.assign({}, props, { baseClass: 'skeleton', ref: ref, sxr: sxr })));
     }
     return children;
 });
 
-module.exports = Skeleton;
+export { Skeleton as default };
 //# sourceMappingURL=index.js.map

package/Skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type SkeletonProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n   animation?: 'pulse' | 'wave' | 'none';\r\n   loading?: boolean;\r\n}\r\n\r\nconst Skeleton = React.forwardRef(<T extends TagComponentType = \"div\">({ children, loading, color, animation, ...props }: SkeletonProps<T>, ref: React.Ref<any>) => {\r\n\r\n   if (!children) loading = true\r\n\r\n   if (loading) {\r\n      animation ??= 'pulse'\r\n      color ??= \"default\"\r\n      let sxr: any = {}\r\n      switch (animation) {\r\n         case 'pulse':\r\n            sxr = {\r\n               bgcolor: \"divider.primary\",\r\n               width: \"100%\",\r\n               animation: 'skpulse 1.5s infinite',\r\n               \"@keyframes skpulse\": {\r\n                  '0%, 100%': {\r\n                     opacity: 1,\r\n                  },\r\n                  '50%': {\r\n                     opacity: 0.4,\r\n                  },\r\n               }\r\n            }\r\n            break;\r\n         case 'wave':\r\n            sxr = {\r\n               position: 'relative',\r\n               overflow: 'hidden',\r\n               bgcolor: \"divider.primary\",\r\n               \"&::after\": {\r\n                  content: '\"\"',\r\n                  position: 'absolute',\r\n                  top: 0,\r\n                  left: \"0%\",\r\n                  width: '100%',\r\n                  height: '100%',\r\n                  animation: 'skwave 2s infinite',\r\n                  background: `linear-gradient(90deg, transparent 0%, var(--color-divider-secondary) 50%, transparent 100%)`,\r\n               },\r\n               \"@keyframes skwave\": {\r\n                  '0%': { left: '-100%' },\r\n                  '100%': { left: '100%' }\r\n               }\r\n            }\r\n            break;\r\n      }\r\n      return (\r\n         <Tag\r\n            {...props}\r\n            baseClass='skeleton'\r\n            ref={ref}\r\n            sxr={sxr}\r\n         />\r\n      )\r\n   }\r\n\r\n   return children\r\n})\r\n\r\nexport default Skeleton\r\n\r\n"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAQA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAmE,EAAE,GAAmB,KAAI;AAA5F,IAAA,IAAA,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAA,GAAA,EAA8B,EAAzB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA/C,CAAA,UAAA,EAAA,SAAA,EAAA,OAAA,EAAA,WAAA,CAAiD,CAAF;AAEnH,IAAA,IAAI,CAAC,QAAQ;QAAE,OAAO,GAAG,IAAI;IAE7B,IAAI,OAAO,EAAE;QACV,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAT,SAAS,IAAT,SAAS,GAAK,OAAO,CAAA;QACrB,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAL,KAAK,IAAL,KAAK,GAAK,SAAS,CAAA;QACnB,IAAI,GAAG,GAAQ,EAAE;QACjB,QAAQ,SAAS;AACd,YAAA,KAAK,OAAO;AACT,gBAAA,GAAG,GAAG;AACH,oBAAA,OAAO,EAAE,iBAAiB;AAC1B,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,SAAS,EAAE,uBAAuB;AAClC,oBAAA,oBAAoB,EAAE;AACnB,wBAAA,UAAU,EAAE;AACT,4BAAA,OAAO,EAAE,CAAC;AACZ,yBAAA;AACD,wBAAA,KAAK,EAAE;AACJ,4BAAA,OAAO,EAAE,GAAG;AACd,yBAAA;AACH;iBACH;gBACD;AACH,YAAA,KAAK,MAAM;AACR,gBAAA,GAAG,GAAG;AACH,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,OAAO,EAAE,iBAAiB;AAC1B,oBAAA,UAAU,EAAE;AACT,wBAAA,OAAO,EAAE,IAAI;AACb,wBAAA,QAAQ,EAAE,UAAU;AACpB,wBAAA,GAAG,EAAE,CAAC;AACN,wBAAA,IAAI,EAAE,IAAI;AACV,wBAAA,KAAK,EAAE,MAAM;AACb,wBAAA,MAAM,EAAE,MAAM;AACd,wBAAA,SAAS,EAAE,oBAAoB;AAC/B,wBAAA,UAAU,EAAE,CAAA,4FAAA,CAA8F;AAC5G,qBAAA;AACD,oBAAA,mBAAmB,EAAE;AAClB,wBAAA,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;AACvB,wBAAA,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM;AACxB;iBACH;gBACD;;AAEN,QAAA,QACGC,cAAA,CAACC,QAAG,oBACG,KAAK,EAAA,EACT,SAAS,EAAC,UAAU,EACpB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EAAA,CAAA,CACT;IAER;AAEA,IAAA,OAAO,QAAQ;AAClB,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type SkeletonProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n   animation?: 'pulse' | 'wave' | 'none';\r\n   loading?: boolean;\r\n}\r\n\r\nconst Skeleton = React.forwardRef(<T extends TagComponentType = \"div\">({ children, loading, color, animation, ...props }: SkeletonProps<T>, ref: React.Ref<any>) => {\r\n\r\n   if (!children) loading = true\r\n\r\n   if (loading) {\r\n      animation ??= 'pulse'\r\n      color ??= \"default\"\r\n      let sxr: any = {}\r\n      switch (animation) {\r\n         case 'pulse':\r\n            sxr = {\r\n               bgcolor: \"divider.primary\",\r\n               width: \"100%\",\r\n               animation: 'skpulse 1.5s infinite',\r\n               \"@keyframes skpulse\": {\r\n                  '0%, 100%': {\r\n                     opacity: 1,\r\n                  },\r\n                  '50%': {\r\n                     opacity: 0.4,\r\n                  },\r\n               }\r\n            }\r\n            break;\r\n         case 'wave':\r\n            sxr = {\r\n               position: 'relative',\r\n               overflow: 'hidden',\r\n               bgcolor: \"divider.primary\",\r\n               \"&::after\": {\r\n                  content: '\"\"',\r\n                  position: 'absolute',\r\n                  top: 0,\r\n                  left: \"0%\",\r\n                  width: '100%',\r\n                  height: '100%',\r\n                  animation: 'skwave 2s infinite',\r\n                  background: `linear-gradient(90deg, transparent 0%, var(--color-divider-secondary) 50%, transparent 100%)`,\r\n               },\r\n               \"@keyframes skwave\": {\r\n                  '0%': { left: '-100%' },\r\n                  '100%': { left: '100%' }\r\n               }\r\n            }\r\n            break;\r\n      }\r\n      return (\r\n         <Tag\r\n            {...props}\r\n            baseClass='skeleton'\r\n            ref={ref}\r\n            sxr={sxr}\r\n         />\r\n      )\r\n   }\r\n\r\n   return children\r\n})\r\n\r\nexport default Skeleton\r\n\r\n"],"names":["_jsx"],"mappings":";;;;;AAQA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAmE,EAAE,GAAmB,KAAI;AAA5F,IAAA,IAAA,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAA,GAAA,EAA8B,EAAzB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA/C,CAAA,UAAA,EAAA,SAAA,EAAA,OAAA,EAAA,WAAA,CAAiD,CAAF;AAEnH,IAAA,IAAI,CAAC,QAAQ;QAAE,OAAO,GAAG,IAAI;IAE7B,IAAI,OAAO,EAAE;QACV,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAT,SAAS,IAAT,SAAS,GAAK,OAAO,CAAA;QACrB,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAL,KAAK,IAAL,KAAK,GAAK,SAAS,CAAA;QACnB,IAAI,GAAG,GAAQ,EAAE;QACjB,QAAQ,SAAS;AACd,YAAA,KAAK,OAAO;AACT,gBAAA,GAAG,GAAG;AACH,oBAAA,OAAO,EAAE,iBAAiB;AAC1B,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,SAAS,EAAE,uBAAuB;AAClC,oBAAA,oBAAoB,EAAE;AACnB,wBAAA,UAAU,EAAE;AACT,4BAAA,OAAO,EAAE,CAAC;AACZ,yBAAA;AACD,wBAAA,KAAK,EAAE;AACJ,4BAAA,OAAO,EAAE,GAAG;AACd,yBAAA;AACH;iBACH;gBACD;AACH,YAAA,KAAK,MAAM;AACR,gBAAA,GAAG,GAAG;AACH,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,OAAO,EAAE,iBAAiB;AAC1B,oBAAA,UAAU,EAAE;AACT,wBAAA,OAAO,EAAE,IAAI;AACb,wBAAA,QAAQ,EAAE,UAAU;AACpB,wBAAA,GAAG,EAAE,CAAC;AACN,wBAAA,IAAI,EAAE,IAAI;AACV,wBAAA,KAAK,EAAE,MAAM;AACb,wBAAA,MAAM,EAAE,MAAM;AACd,wBAAA,SAAS,EAAE,oBAAoB;AAC/B,wBAAA,UAAU,EAAE,CAAA,4FAAA,CAA8F;AAC5G,qBAAA;AACD,oBAAA,mBAAmB,EAAE;AAClB,wBAAA,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;AACvB,wBAAA,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM;AACxB;iBACH;gBACD;;AAEN,QAAA,QACGA,GAAA,CAAC,GAAG,oBACG,KAAK,EAAA,EACT,SAAS,EAAC,UAAU,EACpB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EAAA,CAAA,CACT;IAER;AAEA,IAAA,OAAO,QAAQ;AAClB,CAAC;;;;"}

package/Stack/index.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+
+const Stack = React.forwardRef((_a, ref) => {
+    var { children } = _a, props = tslib.__rest(_a, ["children"]);
+    return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, { sxr: {
+            display: "flex",
+            flexDirection: "column",
+        }, baseClass: 'stack', ref: ref, children: children })));
+});
+
+module.exports = Stack;
+//# sourceMappingURL=index.cjs.map

package/Stack/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Stack/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type StackProps<T extends TagComponentType = \"div\"> = TagProps<T>\r\n\r\nconst Stack = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: StackProps<T>, ref?: React.Ref<any>) => {\r\n    return (\r\n        <Tag\r\n            {...props}\r\n            sxr={{\r\n                display: \"flex\",\r\n                flexDirection: \"column\",\r\n            }}\r\n            baseClass='stack'\r\n            ref={ref}\r\n        >{children}</Tag>\r\n    )\r\n})\r\n\r\nexport default Stack\r\n"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAqC,EAAE,GAAoB,KAAI;AAA/D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA2B,EAAtB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;AACpF,IAAA,QACIC,cAAA,CAACC,QAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;SAC1B,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}

package/Stack/index.js

@@ -1,17 +1,15 @@
-'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 { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Tag } from '@xanui/core';
 
 const Stack = React.forwardRef((_a, ref) => {
-    var { children } = _a, props = tslib.__rest(_a, ["children"]);
-    return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, { sxr: {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (jsx(Tag, Object.assign({}, props, { sxr: {
             display: "flex",
             flexDirection: "column",
         }, baseClass: 'stack', ref: ref, children: children })));
 });
 
-module.exports = Stack;
+export { Stack as default };
 //# sourceMappingURL=index.js.map

package/Stack/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Stack/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type StackProps<T extends TagComponentType = \"div\"> = TagProps<T>\r\n\r\nconst Stack = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: StackProps<T>, ref?: React.Ref<any>) => {\r\n    return (\r\n        <Tag\r\n            {...props}\r\n            sxr={{\r\n                display: \"flex\",\r\n                flexDirection: \"column\",\r\n            }}\r\n            baseClass='stack'\r\n            ref={ref}\r\n        >{children}</Tag>\r\n    )\r\n})\r\n\r\nexport default Stack\r\n"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAqC,EAAE,GAAoB,KAAI;AAA/D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA2B,EAAtB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;AACpF,IAAA,QACIC,cAAA,CAACC,QAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;SAC1B,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/Stack/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type StackProps<T extends TagComponentType = \"div\"> = TagProps<T>\r\n\r\nconst Stack = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: StackProps<T>, ref?: React.Ref<any>) => {\r\n    return (\r\n        <Tag\r\n            {...props}\r\n            sxr={{\r\n                display: \"flex\",\r\n                flexDirection: \"column\",\r\n            }}\r\n            baseClass='stack'\r\n            ref={ref}\r\n        >{children}</Tag>\r\n    )\r\n})\r\n\r\nexport default Stack\r\n"],"names":["_jsx"],"mappings":";;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAqC,EAAE,GAAoB,KAAI;AAA/D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA2B,EAAtB,KAAK,GAAA,MAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;AACpF,IAAA,QACIA,GAAA,CAAC,GAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;SAC1B,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}

package/Switch/index.cjs

@@ -0,0 +1,79 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+
+const Switch = React.forwardRef((props, ref) => {
+    var _a, _b;
+    let [_c] = core.useInterface("Switch", props, {}), { size, checked, color, disabled, icon, onChange, trackSize, slotProps } = _c, rest = tslib.__rest(_c, ["size", "checked", "color", "disabled", "icon", "onChange", "trackSize", "slotProps"]);
+    const _p = {};
+    if (size)
+        _p.size = size;
+    if (color)
+        _p.color = color;
+    if (disabled)
+        _p.disabled = disabled;
+    if (trackSize)
+        _p.trackSize = trackSize;
+    if (icon)
+        _p.icon = icon;
+    const p = core.useBreakpointProps(_p);
+    size = (_a = p.size) !== null && _a !== void 0 ? _a : "medium";
+    color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
+    disabled = p.disabled;
+    trackSize = p.trackSize;
+    icon = p.icon;
+    const [c, set] = React.useState(false);
+    checked !== null && checked !== void 0 ? checked : (checked = c);
+    onChange = onChange || (() => set(!c));
+    let sizes = {
+        small: 32,
+        medium: 48,
+        large: 60
+    };
+    let _size = sizes[size] || size;
+    let height = (_size / 2);
+    trackSize !== null && trackSize !== void 0 ? trackSize : (trackSize = height + 4);
+    let isNormalSize = (height + 4) === trackSize;
+    let transform = checked ? "92%" : "8%";
+    if (!isNormalSize) {
+        transform = checked ? "100%" : "-10%";
+    }
+    return (jsxRuntime.jsxs(core.Tag, { disabled: disabled, sxr: {
+            width: _size,
+            height: height,
+            position: "relative",
+            cursor: "pointer",
+            display: "inline-block"
+        }, onClick: onChange, children: [jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.track, { baseClass: 'switch-track-bar', sxr: {
+                    width: _size,
+                    height: trackSize,
+                    borderRadius: height,
+                    position: 'absolute',
+                    top: "50%",
+                    transform: "translateY(-50%)",
+                    bgcolor: checked ? color : "divider",
+                } })), jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.thumb, { baseClass: 'switch-thumb', sxr: {
+                    transition: "all .25s",
+                    width: height,
+                    height: height,
+                    radius: height,
+                    bgcolor: "#FFFFFF",
+                    position: "absolute",
+                    top: "50%",
+                    border: isNormalSize ? 0 : 1,
+                    left: 0,
+                    transform: `translate(${transform}, -50%)`,
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center"
+                }, children: icon })), jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { component: 'input', ref: ref, type: "radio", readOnly: true, checked: checked, sxr: {
+                    display: "none!important"
+                } }))] }));
+});
+
+module.exports = Switch;
+//# sourceMappingURL=index.cjs.map

package/Switch/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Switch/index.tsx"],"sourcesContent":["'use client'\r\n\r\nimport React, { ReactElement, useState } from 'react';\r\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type SwitchProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\r\n    checked?: boolean;\r\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\r\n    disabled?: useBreakpointPropsType<boolean>;\r\n    trackSize?: useBreakpointPropsType<number>;\r\n    icon?: useBreakpointPropsType<ReactElement>;\r\n    slotProps?: {\r\n        thumb?: Omit<TagProps, 'children'>;\r\n        track?: Omit<TagProps, 'children'>;\r\n    }\r\n}\r\n\r\nconst Switch = React.forwardRef((props: SwitchProps, ref?: React.Ref<any>) => {\r\n    let [{ size, checked, color, disabled, icon, onChange, trackSize, slotProps, ...rest }] = useInterface<any>(\"Switch\", props, {})\r\n    const _p: any = {}\r\n    if (size) _p.size = size\r\n    if (color) _p.color = color\r\n    if (disabled) _p.disabled = disabled\r\n    if (trackSize) _p.trackSize = trackSize\r\n    if (icon) _p.icon = icon\r\n    const p: any = useBreakpointProps(_p)\r\n    size = p.size ?? \"medium\"\r\n    color = p.color ?? \"brand\"\r\n    disabled = p.disabled\r\n    trackSize = p.trackSize\r\n    icon = p.icon\r\n\r\n    const [c, set] = useState(false)\r\n    checked ??= c\r\n\r\n    onChange = onChange || (() => set(!c));\r\n\r\n    let sizes: any = {\r\n        small: 32,\r\n        medium: 48,\r\n        large: 60\r\n    }\r\n    let _size = sizes[size as any] || size\r\n\r\n    let height = (_size / 2)\r\n    trackSize ??= height + 4\r\n    let isNormalSize = (height + 4) === trackSize\r\n    let transform = checked ? \"92%\" : \"8%\"\r\n    if (!isNormalSize) {\r\n        transform = checked ? \"100%\" : \"-10%\"\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            disabled={disabled}\r\n            sxr={{\r\n                width: _size,\r\n                height: height,\r\n                position: \"relative\",\r\n                cursor: \"pointer\",\r\n                display: \"inline-block\"\r\n            }}\r\n            onClick={onChange}\r\n        >\r\n            <Tag\r\n                {...slotProps?.track}\r\n                baseClass='switch-track-bar'\r\n                sxr={{\r\n                    width: _size,\r\n                    height: trackSize,\r\n                    borderRadius: height,\r\n                    position: 'absolute',\r\n                    top: \"50%\",\r\n                    transform: \"translateY(-50%)\",\r\n                    bgcolor: checked ? color : \"divider\",\r\n\r\n                }}\r\n            >\r\n            </Tag>\r\n            <Tag\r\n                {...slotProps?.thumb}\r\n                baseClass='switch-thumb'\r\n                sxr={{\r\n                    transition: \"all .25s\",\r\n                    width: height,\r\n                    height: height,\r\n                    radius: height,\r\n                    bgcolor: \"#FFFFFF\",\r\n                    position: \"absolute\",\r\n                    top: \"50%\",\r\n                    border: isNormalSize ? 0 : 1,\r\n                    left: 0,\r\n                    transform: `translate(${transform}, -50%)`,\r\n                    display: \"flex\",\r\n                    justifyContent: \"center\",\r\n                    alignItems: \"center\"\r\n                }}\r\n            >\r\n                {\r\n                    icon\r\n                }\r\n            </Tag>\r\n            <Tag\r\n                {...rest}\r\n                component='input'\r\n                ref={ref}\r\n                type=\"radio\"\r\n                readOnly\r\n                checked={checked}\r\n                sxr={{\r\n                    display: \"none!important\"\r\n                }}\r\n            />\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Switch\r\n"],"names":[],"mappings":";;;;;;;;AAmBA;;AACI;;AAEA;AAAU;AACV;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAU;AACV;AACA;AACA;AACA;AACA;AACA;;;AAKA;AAEA;AACI;AACA;AACA;;;AAIJ;;;;;;;;AAYY;AACA;AACA;AACA;AACA;;AAQI;AACA;AACA;AACA;AACA;AACA;;AAGH;AAOG;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAeA;;AAKpB;;"}

package/Switch/index.js

@@ -1,14 +1,12 @@
 "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, { useState } from 'react';
+import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
 
 const Switch = React.forwardRef((props, ref) => {
     var _a, _b;
-    let [_c] = core.useInterface("Switch", props, {}), { size, checked, color, disabled, icon, onChange, trackSize, slotProps } = _c, rest = tslib.__rest(_c, ["size", "checked", "color", "disabled", "icon", "onChange", "trackSize", "slotProps"]);
+    let [_c] = useInterface("Switch", props, {}), { size, checked, color, disabled, icon, onChange, trackSize, slotProps } = _c, rest = __rest(_c, ["size", "checked", "color", "disabled", "icon", "onChange", "trackSize", "slotProps"]);
     const _p = {};
     if (size)
         _p.size = size;
@@ -20,13 +18,13 @@ const Switch = React.forwardRef((props, ref) => {
         _p.trackSize = trackSize;
     if (icon)
         _p.icon = icon;
-    const p = core.useBreakpointProps(_p);
+    const p = useBreakpointProps(_p);
     size = (_a = p.size) !== null && _a !== void 0 ? _a : "medium";
     color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
     disabled = p.disabled;
     trackSize = p.trackSize;
     icon = p.icon;
-    const [c, set] = React.useState(false);
+    const [c, set] = useState(false);
     checked !== null && checked !== void 0 ? checked : (checked = c);
     onChange = onChange || (() => set(!c));
     let sizes = {
@@ -42,13 +40,13 @@ const Switch = React.forwardRef((props, ref) => {
     if (!isNormalSize) {
         transform = checked ? "100%" : "-10%";
     }
-    return (jsxRuntime.jsxs(core.Tag, { disabled: disabled, sxr: {
+    return (jsxs(Tag, { disabled: disabled, sxr: {
             width: _size,
             height: height,
             position: "relative",
             cursor: "pointer",
             display: "inline-block"
-        }, onClick: onChange, children: [jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.track, { baseClass: 'switch-track-bar', sxr: {
+        }, onClick: onChange, children: [jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.track, { baseClass: 'switch-track-bar', sxr: {
                     width: _size,
                     height: trackSize,
                     borderRadius: height,
@@ -56,7 +54,7 @@ const Switch = React.forwardRef((props, ref) => {
                     top: "50%",
                     transform: "translateY(-50%)",
                     bgcolor: checked ? color : "divider",
-                } })), jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.thumb, { baseClass: 'switch-thumb', sxr: {
+                } })), jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.thumb, { baseClass: 'switch-thumb', sxr: {
                     transition: "all .25s",
                     width: height,
                     height: height,
@@ -70,10 +68,10 @@ const Switch = React.forwardRef((props, ref) => {
                     display: "flex",
                     justifyContent: "center",
                     alignItems: "center"
-                }, children: icon })), jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { component: 'input', ref: ref, type: "radio", readOnly: true, checked: checked, sxr: {
+                }, children: icon })), jsx(Tag, Object.assign({}, rest, { component: 'input', ref: ref, type: "radio", readOnly: true, checked: checked, sxr: {
                     display: "none!important"
                 } }))] }));
 });
 
-module.exports = Switch;
+export { Switch as default };
 //# sourceMappingURL=index.js.map

package/Switch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Switch/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { ReactElement, useState } from 'react';\r\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type SwitchProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\r\n    checked?: boolean;\r\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\r\n    disabled?: useBreakpointPropsType<boolean>;\r\n    trackSize?: useBreakpointPropsType<number>;\r\n    icon?: useBreakpointPropsType<ReactElement>;\r\n    slotProps?: {\r\n        thumb?: Omit<TagProps, 'children'>;\r\n        track?: Omit<TagProps, 'children'>;\r\n    }\r\n}\r\n\r\nconst Switch = React.forwardRef((props: SwitchProps, ref?: React.Ref<any>) => {\r\n    let [{ size, checked, color, disabled, icon, onChange, trackSize, slotProps, ...rest }] = useInterface<any>(\"Switch\", props, {})\r\n    const _p: any = {}\r\n    if (size) _p.size = size\r\n    if (color) _p.color = color\r\n    if (disabled) _p.disabled = disabled\r\n    if (trackSize) _p.trackSize = trackSize\r\n    if (icon) _p.icon = icon\r\n    const p: any = useBreakpointProps(_p)\r\n    size = p.size ?? \"medium\"\r\n    color = p.color ?? \"brand\"\r\n    disabled = p.disabled\r\n    trackSize = p.trackSize\r\n    icon = p.icon\r\n\r\n    const [c, set] = useState(false)\r\n    checked ??= c\r\n\r\n    onChange = onChange || (() => set(!c));\r\n\r\n    let sizes: any = {\r\n        small: 32,\r\n        medium: 48,\r\n        large: 60\r\n    }\r\n    let _size = sizes[size as any] || size\r\n\r\n    let height = (_size / 2)\r\n    trackSize ??= height + 4\r\n    let isNormalSize = (height + 4) === trackSize\r\n    let transform = checked ? \"92%\" : \"8%\"\r\n    if (!isNormalSize) {\r\n        transform = checked ? \"100%\" : \"-10%\"\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            disabled={disabled}\r\n            sxr={{\r\n                width: _size,\r\n                height: height,\r\n                position: \"relative\",\r\n                cursor: \"pointer\",\r\n                display: \"inline-block\"\r\n            }}\r\n            onClick={onChange}\r\n        >\r\n            <Tag\r\n                {...slotProps?.track}\r\n                baseClass='switch-track-bar'\r\n                sxr={{\r\n                    width: _size,\r\n                    height: trackSize,\r\n                    borderRadius: height,\r\n                    position: 'absolute',\r\n                    top: \"50%\",\r\n                    transform: \"translateY(-50%)\",\r\n                    bgcolor: checked ? color : \"divider\",\r\n\r\n                }}\r\n            >\r\n            </Tag>\r\n            <Tag\r\n                {...slotProps?.thumb}\r\n                baseClass='switch-thumb'\r\n                sxr={{\r\n                    transition: \"all .25s\",\r\n                    width: height,\r\n                    height: height,\r\n                    radius: height,\r\n                    bgcolor: \"#FFFFFF\",\r\n                    position: \"absolute\",\r\n                    top: \"50%\",\r\n                    border: isNormalSize ? 0 : 1,\r\n                    left: 0,\r\n                    transform: `translate(${transform}, -50%)`,\r\n                    display: \"flex\",\r\n                    justifyContent: \"center\",\r\n                    alignItems: \"center\"\r\n                }}\r\n            >\r\n                {\r\n                    icon\r\n                }\r\n            </Tag>\r\n            <Tag\r\n                {...rest}\r\n                component='input'\r\n                ref={ref}\r\n                type=\"radio\"\r\n                readOnly\r\n                checked={checked}\r\n                sxr={{\r\n                    display: \"none!important\"\r\n                }}\r\n            />\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Switch\r\n"],"names":[],"mappings":";;;;;;;;AAmBA;;AACI;;AAEA;AAAU;AACV;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAU;AACV;AACA;AACA;AACA;AACA;AACA;;;AAKA;AAEA;AACI;AACA;AACA;;;AAIJ;;;;;;;;AAYY;AACA;AACA;AACA;AACA;;AAQI;AACA;AACA;AACA;AACA;AACA;;AAGH;AAOG;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAeA;;AAKpB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Switch/index.tsx"],"sourcesContent":["'use client'\r\n\r\nimport React, { ReactElement, useState } from 'react';\r\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type SwitchProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\r\n    checked?: boolean;\r\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\r\n    disabled?: useBreakpointPropsType<boolean>;\r\n    trackSize?: useBreakpointPropsType<number>;\r\n    icon?: useBreakpointPropsType<ReactElement>;\r\n    slotProps?: {\r\n        thumb?: Omit<TagProps, 'children'>;\r\n        track?: Omit<TagProps, 'children'>;\r\n    }\r\n}\r\n\r\nconst Switch = React.forwardRef((props: SwitchProps, ref?: React.Ref<any>) => {\r\n    let [{ size, checked, color, disabled, icon, onChange, trackSize, slotProps, ...rest }] = useInterface<any>(\"Switch\", props, {})\r\n    const _p: any = {}\r\n    if (size) _p.size = size\r\n    if (color) _p.color = color\r\n    if (disabled) _p.disabled = disabled\r\n    if (trackSize) _p.trackSize = trackSize\r\n    if (icon) _p.icon = icon\r\n    const p: any = useBreakpointProps(_p)\r\n    size = p.size ?? \"medium\"\r\n    color = p.color ?? \"brand\"\r\n    disabled = p.disabled\r\n    trackSize = p.trackSize\r\n    icon = p.icon\r\n\r\n    const [c, set] = useState(false)\r\n    checked ??= c\r\n\r\n    onChange = onChange || (() => set(!c));\r\n\r\n    let sizes: any = {\r\n        small: 32,\r\n        medium: 48,\r\n        large: 60\r\n    }\r\n    let _size = sizes[size as any] || size\r\n\r\n    let height = (_size / 2)\r\n    trackSize ??= height + 4\r\n    let isNormalSize = (height + 4) === trackSize\r\n    let transform = checked ? \"92%\" : \"8%\"\r\n    if (!isNormalSize) {\r\n        transform = checked ? \"100%\" : \"-10%\"\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            disabled={disabled}\r\n            sxr={{\r\n                width: _size,\r\n                height: height,\r\n                position: \"relative\",\r\n                cursor: \"pointer\",\r\n                display: \"inline-block\"\r\n            }}\r\n            onClick={onChange}\r\n        >\r\n            <Tag\r\n                {...slotProps?.track}\r\n                baseClass='switch-track-bar'\r\n                sxr={{\r\n                    width: _size,\r\n                    height: trackSize,\r\n                    borderRadius: height,\r\n                    position: 'absolute',\r\n                    top: \"50%\",\r\n                    transform: \"translateY(-50%)\",\r\n                    bgcolor: checked ? color : \"divider\",\r\n\r\n                }}\r\n            >\r\n            </Tag>\r\n            <Tag\r\n                {...slotProps?.thumb}\r\n                baseClass='switch-thumb'\r\n                sxr={{\r\n                    transition: \"all .25s\",\r\n                    width: height,\r\n                    height: height,\r\n                    radius: height,\r\n                    bgcolor: \"#FFFFFF\",\r\n                    position: \"absolute\",\r\n                    top: \"50%\",\r\n                    border: isNormalSize ? 0 : 1,\r\n                    left: 0,\r\n                    transform: `translate(${transform}, -50%)`,\r\n                    display: \"flex\",\r\n                    justifyContent: \"center\",\r\n                    alignItems: \"center\"\r\n                }}\r\n            >\r\n                {\r\n                    icon\r\n                }\r\n            </Tag>\r\n            <Tag\r\n                {...rest}\r\n                component='input'\r\n                ref={ref}\r\n                type=\"radio\"\r\n                readOnly\r\n                checked={checked}\r\n                sxr={{\r\n                    display: \"none!important\"\r\n                }}\r\n            />\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Switch\r\n"],"names":[],"mappings":";;;;;;AAmBA;;AACI;;AAEA;AAAU;AACV;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAU;AACV;AACA;AACA;AACA;AACA;AACA;;;AAKA;AAEA;AACI;AACA;AACA;;;AAIJ;;;;;;;;AAYY;AACA;AACA;AACA;AACA;;AAQI;AACA;AACA;AACA;AACA;AACA;;AAGH;AAOG;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAeA;;AAKpB;;"}

package/Tab/index.cjs

@@ -0,0 +1,17 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+var index = require('../Button/index.cjs');
+
+const Tab = React.forwardRef((_a, ref) => {
+    var { children } = _a, props = tslib.__rest(_a, ["children"]);
+    let [_props] = core.useInterface("Tab", props, {});
+    return (jsxRuntime.jsx(index, Object.assign({}, _props, { classNames: ["tab", ...((_props === null || _props === void 0 ? void 0 : _props.classNames) || [])], ref: ref, children: children })));
+});
+
+module.exports = Tab;
+//# sourceMappingURL=index.cjs.map

package/Tab/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Tab/index.tsx"],"sourcesContent":["'use client'\r\n\r\nimport React from 'react'\r\nimport { TagComponentType, useInterface } from '@xanui/core';\r\nimport Button, { ButtonProps } from '../Button';\r\n\r\nexport type TabProps<T extends TagComponentType = \"button\"> = ButtonProps<T> & {\r\n    value?: string | number\r\n}\r\n\r\nconst Tab = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: TabProps<T>, ref: React.Ref<any>) => {\r\n    let [_props] = useInterface<any>(\"Tab\", props, {})\r\n    return (\r\n        <Button\r\n            {..._props}\r\n            classNames={[\"tab\", ...(_props?.classNames || [])]}\r\n            ref={ref}\r\n        >\r\n            {children}\r\n        </Button>\r\n    )\r\n})\r\n\r\nexport default Tab"],"names":[],"mappings":";;;;;;;;;AAUA;AAAkE;AAC9D;AACA;AASJ;;"}

package/Tab/index.js

@@ -1,17 +1,15 @@
 "use client";
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@xanui/core');
-var index = require('../Button/index.js');
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { useInterface } from '@xanui/core';
+import Button from '../Button/index.js';
 
 const Tab = React.forwardRef((_a, ref) => {
-    var { children } = _a, props = tslib.__rest(_a, ["children"]);
-    let [_props] = core.useInterface("Tab", props, {});
-    return (jsxRuntime.jsx(index, Object.assign({}, _props, { classNames: ["tab", ...((_props === null || _props === void 0 ? void 0 : _props.classNames) || [])], ref: ref, children: children })));
+    var { children } = _a, props = __rest(_a, ["children"]);
+    let [_props] = useInterface("Tab", props, {});
+    return (jsx(Button, Object.assign({}, _props, { classNames: ["tab", ...((_props === null || _props === void 0 ? void 0 : _props.classNames) || [])], ref: ref, children: children })));
 });
 
-module.exports = Tab;
+export { Tab as default };
 //# sourceMappingURL=index.js.map

package/Tab/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Tab/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React from 'react'\r\nimport { TagComponentType, useInterface } from '@xanui/core';\r\nimport Button, { ButtonProps } from '../Button';\r\n\r\nexport type TabProps<T extends TagComponentType = \"button\"> = ButtonProps<T> & {\r\n    value?: string | number\r\n}\r\n\r\nconst Tab = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: TabProps<T>, ref: React.Ref<any>) => {\r\n    let [_props] = useInterface<any>(\"Tab\", props, {})\r\n    return (\r\n        <Button\r\n            {..._props}\r\n            classNames={[\"tab\", ...(_props?.classNames || [])]}\r\n            ref={ref}\r\n        >\r\n            {children}\r\n        </Button>\r\n    )\r\n})\r\n\r\nexport default Tab"],"names":[],"mappings":";;;;;;;;;AAUA;AAAkE;AAC9D;AACA;AASJ;;"}
+{"version":3,"file":"index.js","sources":["../../src/Tab/index.tsx"],"sourcesContent":["'use client'\r\n\r\nimport React from 'react'\r\nimport { TagComponentType, useInterface } from '@xanui/core';\r\nimport Button, { ButtonProps } from '../Button';\r\n\r\nexport type TabProps<T extends TagComponentType = \"button\"> = ButtonProps<T> & {\r\n    value?: string | number\r\n}\r\n\r\nconst Tab = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: TabProps<T>, ref: React.Ref<any>) => {\r\n    let [_props] = useInterface<any>(\"Tab\", props, {})\r\n    return (\r\n        <Button\r\n            {..._props}\r\n            classNames={[\"tab\", ...(_props?.classNames || [])]}\r\n            ref={ref}\r\n        >\r\n            {children}\r\n        </Button>\r\n    )\r\n})\r\n\r\nexport default Tab"],"names":[],"mappings":";;;;;;;AAUA;AAAkE;AAC9D;AACA;AASJ;;"}