@xanui/ui 1.2.5 → 1.2.7

package/RangeSlider/index.js

@@ -0,0 +1,156 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useRef } from 'react';
+import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
+
+const RangeSlider = (props) => {
+    var _a;
+    const { value, defaultValue, onChange, disabled } = props, rest = __rest(props, ["value", "defaultValue", "onChange", "disabled"]);
+    // interface system
+    let [{ color, min = 0, max = 100, step = 1, thumbContent, thumbSize = 16, size = "sm" }] = useInterface("RangeSlider", rest, {});
+    const bp = useBreakpointProps({
+        color,
+        size
+    });
+    color = (_a = bp.color) !== null && _a !== void 0 ? _a : "primary";
+    size = bp.size;
+    const sizesSX = {
+        xs: {
+            track: 2,
+            thumb: 8
+        },
+        sm: {
+            track: 4,
+            thumb: 14
+        },
+        md: {
+            track: 8,
+            thumb: 18
+        },
+        lg: {
+            track: 12,
+            thumb: 24
+        },
+        xl: {
+            track: 16,
+            thumb: 32
+        }
+    };
+    const _size = sizesSX[size];
+    if (thumbSize) {
+        _size.thumb = thumbSize;
+    }
+    if (disabled) {
+        color = 'surface.divider';
+    }
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = useState(() => {
+        if (value !== undefined)
+            return Array.isArray(value) ? value : [value];
+        if (defaultValue !== undefined)
+            return Array.isArray(defaultValue)
+                ? defaultValue
+                : [defaultValue];
+        return [min];
+    });
+    // sync controlled
+    useEffect(() => {
+        if (isControlled) {
+            setInternalValue(Array.isArray(value) ? value : [value]);
+        }
+    }, [value, isControlled]);
+    const containerRef = useRef(null);
+    const isDownRef = useRef(false);
+    const activeHandleRef = useRef(null);
+    const updateValue = (index, clientX) => {
+        if (!containerRef.current)
+            return;
+        const rect = containerRef.current.getBoundingClientRect();
+        let p = (clientX - rect.left) / rect.width;
+        p = Math.max(0, Math.min(1, p));
+        const raw = min + p * (max - min);
+        const stepped = Math.round((raw - min) / step) * step + min;
+        const next = [...internalValue];
+        next[index] = Math.min(max, Math.max(min, stepped));
+        if (!isControlled) {
+            setInternalValue(next);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(next.length === 1 ? next[0] : next);
+    };
+    // global drag system
+    useEffect(() => {
+        const handleMove = (e) => {
+            if (!isDownRef.current || activeHandleRef.current === null)
+                return;
+            updateValue(activeHandleRef.current, e.clientX);
+        };
+        const handleUp = () => {
+            isDownRef.current = false;
+            activeHandleRef.current = null;
+        };
+        window.addEventListener("mousemove", handleMove);
+        window.addEventListener("mouseup", handleUp);
+        return () => {
+            window.removeEventListener("mousemove", handleMove);
+            window.removeEventListener("mouseup", handleUp);
+        };
+    });
+    const sorted = [...internalValue].sort((a, b) => a - b);
+    const startValue = sorted.length === 1 ? min : sorted[0];
+    const endValue = sorted[sorted.length - 1];
+    const startPercent = ((startValue - min) / (max - min)) * 100;
+    const endPercent = ((endValue - min) / (max - min)) * 100;
+    return (jsxs(Tag, { ref: containerRef, onClick: (e) => {
+            if (disabled)
+                return;
+            const rect = e.currentTarget.getBoundingClientRect();
+            const p = (e.clientX - rect.left) / rect.width;
+            const raw = min + p * (max - min);
+            const stepped = Math.round((raw - min) / step) * step + min;
+            let closestIndex = 0;
+            let minDist = Math.abs(internalValue[0] - stepped);
+            for (let i = 1; i < internalValue.length; i++) {
+                const d = Math.abs(internalValue[i] - stepped);
+                if (d < minDist) {
+                    minDist = d;
+                    closestIndex = i;
+                }
+            }
+            updateValue(closestIndex, e.clientX);
+        }, sxr: Object.assign({ position: "relative", width: "100%", display: "flex", alignItems: "center" }, (disabled ? { cursor: "not-allowed" } : {})), children: [jsx(Tag, { sxr: {
+                    position: "absolute",
+                    width: "100%",
+                    height: _size.track,
+                    bgcolor: 'surface.divider',
+                    radius: `${_size.track}px`,
+                } }), jsx(Tag, { sxr: {
+                    position: "absolute",
+                    height: _size.track,
+                    bgcolor: color,
+                    radius: `${_size.track}px`,
+                    left: `${startPercent}%`,
+                    width: `${endPercent - startPercent}%`,
+                } }), internalValue.map((v, i) => {
+                const percent = ((v - min) / (max - min)) * 100;
+                return (jsx(Tag, { sxr: {
+                        position: "absolute",
+                        width: _size.thumb,
+                        height: _size.thumb,
+                        radius: `${_size.thumb}px`,
+                        bgcolor: color,
+                        left: `${percent}%`,
+                        transform: "translateX(-50%)",
+                        cursor: disabled ? "not-allowed" : "initial",
+                    }, onMouseDown: (e) => {
+                        if (disabled)
+                            return;
+                        e.preventDefault();
+                        isDownRef.current = true;
+                        activeHandleRef.current = i;
+                    }, children: thumbContent ? thumbContent({ value: percent }) : "" }, i));
+            })] }));
+};
+
+export { RangeSlider as default };
+//# sourceMappingURL=index.js.map

package/RangeSlider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/RangeSlider/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactElement, useEffect, useRef, useState } from \"react\";\nimport {\n   Tag,\n   useBreakpointProps,\n   useBreakpointPropsType,\n   UseColorTemplateColor,\n   useInterface,\n} from \"@xanui/core\";\n\nexport type RangeSliderValue = number | number[];\n\nexport type RangeSliderProps = {\n   color?: useBreakpointPropsType<UseColorTemplateColor>;\n   min?: number;\n   max?: number;\n   step?: number;\n   value?: RangeSliderValue;\n   defaultValue?: RangeSliderValue;\n   onChange?: (value: RangeSliderValue) => void;\n   disabled?: boolean;\n   thumbContent?: (props: { value: number }) => ReactElement\n   size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n   thumbSize?: number;\n};\n\nconst RangeSlider = (props: RangeSliderProps) => {\n   const { value, defaultValue, onChange, disabled, ...rest } = props;\n\n   // interface system\n   let [{ color, min = 0, max = 100, step = 1, thumbContent, thumbSize = 16, size = \"sm\" }] = useInterface<any>(\n      \"RangeSlider\",\n      rest,\n      {}\n   );\n\n   const bp: any = useBreakpointProps({\n      color,\n      size\n   });\n   color = bp.color ?? \"primary\"\n   size = bp.size;\n\n   const sizesSX: any = {\n      xs: {\n         track: 2,\n         thumb: 8\n      },\n      sm: {\n         track: 4,\n         thumb: 14\n      },\n      md: {\n         track: 8,\n         thumb: 18\n      },\n      lg: {\n         track: 12,\n         thumb: 24\n      },\n      xl: {\n         track: 16,\n         thumb: 32\n      }\n   }\n\n   const _size = sizesSX[size]\n\n\n   if (thumbSize) {\n      _size.thumb = thumbSize\n   }\n\n   if (disabled) {\n      color = 'surface.divider'\n   }\n\n   const isControlled = value !== undefined;\n\n   const [internalValue, setInternalValue] = useState<number[]>(() => {\n      if (value !== undefined) return Array.isArray(value) ? value : [value];\n      if (defaultValue !== undefined)\n         return Array.isArray(defaultValue)\n            ? defaultValue\n            : [defaultValue];\n      return [min];\n   });\n\n   // sync controlled\n   useEffect(() => {\n      if (isControlled) {\n         setInternalValue(Array.isArray(value) ? value : [value!]);\n      }\n   }, [value, isControlled]);\n\n   const containerRef = useRef<HTMLDivElement | null>(null);\n   const isDownRef = useRef(false);\n   const activeHandleRef = useRef<number | null>(null);\n\n   const updateValue = (index: number, clientX: number) => {\n      if (!containerRef.current) return;\n\n      const rect = containerRef.current.getBoundingClientRect();\n      let p = (clientX - rect.left) / rect.width;\n      p = Math.max(0, Math.min(1, p));\n\n      const raw = min + p * (max - min);\n      const stepped = Math.round((raw - min) / step) * step + min;\n\n      const next = [...internalValue];\n      next[index] = Math.min(max, Math.max(min, stepped));\n\n      if (!isControlled) {\n         setInternalValue(next);\n      }\n\n      onChange?.(next.length === 1 ? next[0] : next);\n   };\n\n   // global drag system\n   useEffect(() => {\n      const handleMove = (e: MouseEvent) => {\n         if (!isDownRef.current || activeHandleRef.current === null) return;\n         updateValue(activeHandleRef.current, e.clientX);\n      };\n\n      const handleUp = () => {\n         isDownRef.current = false;\n         activeHandleRef.current = null;\n      };\n\n      window.addEventListener(\"mousemove\", handleMove);\n      window.addEventListener(\"mouseup\", handleUp);\n\n      return () => {\n         window.removeEventListener(\"mousemove\", handleMove);\n         window.removeEventListener(\"mouseup\", handleUp);\n      };\n   });\n\n   const sorted = [...internalValue].sort((a, b) => a - b);\n\n   const startValue = sorted.length === 1 ? min : sorted[0];\n   const endValue = sorted[sorted.length - 1];\n\n   const startPercent = ((startValue - min) / (max - min)) * 100;\n   const endPercent = ((endValue - min) / (max - min)) * 100;\n\n\n\n   return (\n      <Tag\n         ref={containerRef}\n         onClick={(e: any) => {\n            if (disabled) return;\n\n            const rect = e.currentTarget.getBoundingClientRect();\n            const p = (e.clientX - rect.left) / rect.width;\n            const raw = min + p * (max - min);\n            const stepped = Math.round((raw - min) / step) * step + min;\n\n            let closestIndex = 0;\n            let minDist = Math.abs(internalValue[0] - stepped);\n\n            for (let i = 1; i < internalValue.length; i++) {\n               const d = Math.abs(internalValue[i] - stepped);\n               if (d < minDist) {\n                  minDist = d;\n                  closestIndex = i;\n               }\n            }\n\n            updateValue(closestIndex, e.clientX);\n         }}\n         sxr={{\n            position: \"relative\",\n            width: \"100%\",\n            display: \"flex\",\n            alignItems: \"center\",\n            ...(disabled ? { cursor: \"not-allowed\" } : {}),\n         }}\n      >\n         {/* Track */}\n         <Tag\n            sxr={{\n               position: \"absolute\",\n               width: \"100%\",\n               height: _size.track,\n               bgcolor: 'surface.divider',\n               radius: `${_size.track}px`,\n            }}\n         />\n\n         <Tag\n            sxr={{\n               position: \"absolute\",\n               height: _size.track,\n               bgcolor: color,\n               radius: `${_size.track}px`,\n               left: `${startPercent}%`,\n               width: `${endPercent - startPercent}%`,\n            }}\n         />\n\n         {internalValue.map((v, i) => {\n            const percent = ((v - min) / (max - min)) * 100;\n            return (\n               <Tag\n                  key={i}\n                  sxr={{\n                     position: \"absolute\",\n                     width: _size.thumb,\n                     height: _size.thumb,\n                     radius: `${_size.thumb}px`,\n                     bgcolor: color,\n                     left: `${percent}%`,\n                     transform: \"translateX(-50%)\",\n                     cursor: disabled ? \"not-allowed\" : \"initial\",\n                  }}\n                  onMouseDown={(e) => {\n                     if (disabled) return;\n                     e.preventDefault();\n                     isDownRef.current = true;\n                     activeHandleRef.current = i;\n                  }}\n               >\n                  {thumbContent ? thumbContent({ value: percent }) : \"\"}\n               </Tag>\n            );\n         })}\n      </Tag>\n   );\n};\n\nexport default RangeSlider;"],"names":[],"mappings":";;;;;;AA0BA;;AACG;;AAGA;;;;AASC;AACD;AACA;AAEA;AACG;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;;AAGJ;;AAIG;;;;;AAOH;;;AAG4B;;AAEtB;AACG;AACA;;AAET;;;;AAKM;;AAEN;AAEA;AACA;AACA;AAEA;;;;AAIG;AACA;;AAGA;AAEA;AACA;;;;;AAOH;;;AAIG;;;;AAGA;;AAGG;AACA;AACH;AAEA;AACA;AAEA;AACG;AACA;AACH;AACH;;AAIA;;AAGA;AACA;AAIA;AAIS;;;AAGA;;AAEA;;AAGA;AAEA;AACG;AACA;;;;;AAMH;AACH;AAYM;AACA;;AAEA;AACA;AACF;AAKE;;AAEA;AACA;;AAEA;;AAKH;AACA;AAIS;;;AAGA;AACA;;AAEA;;AAEF;AAEE;;;AAEA;AACA;;;AASrB;;"}

package/Scrollbar/index.cjs

@@ -7,7 +7,7 @@ var core = require('@xanui/core');
 var React = require('react');
 
 const Scrollbar = React.forwardRef((_a, ref) => {
-    var { children, thumbSize, thumbColor, trackColor } = _a, rest = tslib.__rest(_a, ["children", "thumbSize", "thumbColor", "trackColor"]);
+    var { children, size, thumbColor, trackColor } = _a, rest = tslib.__rest(_a, ["children", "size", "thumbColor", "trackColor"]);
     let [_b] = core.useInterface("Scrollbar", rest, {}), { onScroll, onScrollEnd } = _b, props = tslib.__rest(_b, ["onScroll", "onScrollEnd"]);
     const innerRef = React.useRef(null);
     React.useImperativeHandle(ref, () => ({
@@ -49,20 +49,20 @@ const Scrollbar = React.forwardRef((_a, ref) => {
         };
     }
     let sxr = {};
-    if (thumbSize) {
+    if (size) {
         sxr['&::-webkit-scrollbar'] = {
-            width: thumbSize,
-            height: thumbSize,
+            width: size,
+            height: size,
         };
     }
     if (thumbColor) {
         sxr['&::-webkit-scrollbar-thumb'] = {
-            backgroundColor: thumbColor,
+            backgroundColor: thumbColor + "!important",
             borderRadius: "6px",
             opacity: 0.6,
         };
         sxr['&::-webkit-scrollbar-thumb:hover'] = {
-            backgroundColor: thumbColor,
+            backgroundColor: thumbColor + "!important",
             opacity: 0.0,
         };
     }

package/Scrollbar/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagComponentType, TagProps, useInterface } from '@xanui/core';\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\n\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    thumbSize?: number;\n    thumbColor?: TagProps['color'];\n    trackColor?: TagProps['color'];\n    children?: ReactNode;\n    onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\n}\n\nexport type ScrollbarHandle = {\n    scrollTo: (pos: number) => void;\n    scrollToBottom: () => void;\n    scrollToTop: () => void;\n};\n\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, thumbSize, thumbColor, trackColor, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\n    let [{ onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\n    const innerRef = useRef<HTMLDivElement>(null);\n\n    useImperativeHandle(ref, () => ({\n        scrollTo(pos: number) {\n            innerRef.current?.scrollTo({\n                top: pos,\n                behavior: \"smooth\"\n            });\n        },\n        scrollToBottom() {\n            if (!innerRef.current) return;\n            const ele = innerRef.current;\n            ele.scrollTo({\n                top: ele.scrollHeight,\n                behavior: \"smooth\"\n            });\n        },\n        scrollToTop() {\n            innerRef.current?.scrollTo({\n                top: 0,\n                behavior: \"smooth\"\n            });\n        }\n    }));\n\n    if (onScroll || onScrollEnd) {\n        props.onScroll = (e: UIEvent<HTMLDivElement>) => {\n            if (onScrollEnd) {\n                const ele: any = e.target\n                const scrollTop = ele.scrollTop\n                const scrollHeight = ele.scrollHeight\n                const clientHeight = ele.clientHeight\n                const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\n                isScrollDown && onScrollEnd(e)\n            }\n            onScroll && onScroll(e)\n        }\n    }\n\n    let sxr: any = {}\n\n    if (thumbSize) {\n        sxr['&::-webkit-scrollbar'] = {\n            width: thumbSize,\n            height: thumbSize,\n        }\n    }\n    if (thumbColor) {\n        sxr['&::-webkit-scrollbar-thumb'] = {\n            backgroundColor: thumbColor,\n            borderRadius: \"6px\",\n            opacity: 0.6,\n        }\n        sxr['&::-webkit-scrollbar-thumb:hover'] = {\n            backgroundColor: thumbColor,\n            opacity: 0.0,\n        }\n    }\n\n    if (trackColor) {\n        sxr['&::-webkit-scrollbar-track'] = {\n            backgroundColor: trackColor,\n            borderRadius: \"6px\",\n        }\n    }\n\n    return (\n        <Tag\n            {...props}\n            ref={innerRef}\n            baseClass='scrollbar'\n            sxr={{\n                height: \"100%\",\n                width: \"100%\",\n                overflow: \"auto\",\n                ...sxr,\n            }}\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default Scrollbar "],"names":[],"mappings":";;;;;;;;AAkBA;AAAwE;;AAEpE;AAEA;AACI;;AACI;AACI;AACA;AACH;;;;;AAID;;;AAGI;AACH;;;;AAGD;AACI;AACA;AACH;;AAER;AAED;AACI;;AAEQ;AACA;AACA;AACA;;AAEA;;AAEJ;AACJ;;;;;AAOI;AACA;;;;;AAKA;AACA;AACA;;;AAGA;AACA;;;;;AAMA;AACA;;;AAIR;AAeJ;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagComponentType, TagProps, useInterface } from '@xanui/core';\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\n\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    size?: number;\n    thumbColor?: TagProps['color'];\n    trackColor?: TagProps['color'];\n    children?: ReactNode;\n    onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\n}\n\nexport type ScrollbarHandle = {\n    scrollTo: (pos: number) => void;\n    scrollToBottom: () => void;\n    scrollToTop: () => void;\n};\n\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, size, thumbColor, trackColor, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\n    let [{ onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\n    const innerRef = useRef<HTMLDivElement>(null);\n\n    useImperativeHandle(ref, () => ({\n        scrollTo(pos: number) {\n            innerRef.current?.scrollTo({\n                top: pos,\n                behavior: \"smooth\"\n            });\n        },\n        scrollToBottom() {\n            if (!innerRef.current) return;\n            const ele = innerRef.current;\n            ele.scrollTo({\n                top: ele.scrollHeight,\n                behavior: \"smooth\"\n            });\n        },\n        scrollToTop() {\n            innerRef.current?.scrollTo({\n                top: 0,\n                behavior: \"smooth\"\n            });\n        }\n    }));\n\n    if (onScroll || onScrollEnd) {\n        props.onScroll = (e: UIEvent<HTMLDivElement>) => {\n            if (onScrollEnd) {\n                const ele: any = e.target\n                const scrollTop = ele.scrollTop\n                const scrollHeight = ele.scrollHeight\n                const clientHeight = ele.clientHeight\n                const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\n                isScrollDown && onScrollEnd(e)\n            }\n            onScroll && onScroll(e)\n        }\n    }\n\n    let sxr: any = {}\n\n    if (size) {\n        sxr['&::-webkit-scrollbar'] = {\n            width: size,\n            height: size,\n        }\n    }\n    if (thumbColor) {\n        sxr['&::-webkit-scrollbar-thumb'] = {\n            backgroundColor: thumbColor + \"!important\",\n            borderRadius: \"6px\",\n            opacity: 0.6,\n        }\n        sxr['&::-webkit-scrollbar-thumb:hover'] = {\n            backgroundColor: thumbColor + \"!important\",\n            opacity: 0.0,\n        }\n    }\n\n    if (trackColor) {\n        sxr['&::-webkit-scrollbar-track'] = {\n            backgroundColor: trackColor,\n            borderRadius: \"6px\",\n        }\n    }\n\n    return (\n        <Tag\n            {...props}\n            ref={innerRef}\n            baseClass='scrollbar'\n            sxr={{\n                height: \"100%\",\n                width: \"100%\",\n                overflow: \"auto\",\n                ...sxr,\n            }}\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default Scrollbar "],"names":[],"mappings":";;;;;;;;AAkBA;AAAwE;;AAEpE;AAEA;AACI;;AACI;AACI;AACA;AACH;;;;;AAID;;;AAGI;AACH;;;;AAGD;AACI;AACA;AACH;;AAER;AAED;AACI;;AAEQ;AACA;AACA;AACA;;AAEA;;AAEJ;AACJ;;;;;AAOI;AACA;;;;;;AAMA;AACA;;;;AAIA;;;;;AAMA;AACA;;;AAIR;AAeJ;;"}

package/Scrollbar/index.d.ts

@@ -1,8 +1,8 @@
 import { TagComponentType, TagProps } from '@xanui/core';
-import React, { ReactNode, UIEvent } from 'react';
+import React__default, { ReactNode, UIEvent } from 'react';
 
 type ScrollbarProps<T extends TagComponentType = "div"> = TagProps<T> & {
-    thumbSize?: number;
+    size?: number;
     thumbColor?: TagProps['color'];
     trackColor?: TagProps['color'];
     children?: ReactNode;
@@ -13,7 +13,7 @@ type ScrollbarHandle = {
     scrollToBottom: () => void;
     scrollToTop: () => void;
 };
-declare const Scrollbar: React.ForwardRefExoticComponent<Omit<ScrollbarProps<TagComponentType>, "ref"> & React.RefAttributes<ScrollbarHandle>>;
+declare const Scrollbar: React__default.ForwardRefExoticComponent<Omit<ScrollbarProps<TagComponentType>, "ref"> & React__default.RefAttributes<ScrollbarHandle>>;
 
 export { Scrollbar as default };
 export type { ScrollbarHandle, ScrollbarProps };

package/Scrollbar/index.js

@@ -5,7 +5,7 @@ import { useInterface, Tag } from '@xanui/core';
 import React, { useRef, useImperativeHandle } from 'react';
 
 const Scrollbar = React.forwardRef((_a, ref) => {
-    var { children, thumbSize, thumbColor, trackColor } = _a, rest = __rest(_a, ["children", "thumbSize", "thumbColor", "trackColor"]);
+    var { children, size, thumbColor, trackColor } = _a, rest = __rest(_a, ["children", "size", "thumbColor", "trackColor"]);
     let [_b] = useInterface("Scrollbar", rest, {}), { onScroll, onScrollEnd } = _b, props = __rest(_b, ["onScroll", "onScrollEnd"]);
     const innerRef = useRef(null);
     useImperativeHandle(ref, () => ({
@@ -47,20 +47,20 @@ const Scrollbar = React.forwardRef((_a, ref) => {
         };
     }
     let sxr = {};
-    if (thumbSize) {
+    if (size) {
         sxr['&::-webkit-scrollbar'] = {
-            width: thumbSize,
-            height: thumbSize,
+            width: size,
+            height: size,
         };
     }
     if (thumbColor) {
         sxr['&::-webkit-scrollbar-thumb'] = {
-            backgroundColor: thumbColor,
+            backgroundColor: thumbColor + "!important",
             borderRadius: "6px",
             opacity: 0.6,
         };
         sxr['&::-webkit-scrollbar-thumb:hover'] = {
-            backgroundColor: thumbColor,
+            backgroundColor: thumbColor + "!important",
             opacity: 0.0,
         };
     }

package/Scrollbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagComponentType, TagProps, useInterface } from '@xanui/core';\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\n\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    thumbSize?: number;\n    thumbColor?: TagProps['color'];\n    trackColor?: TagProps['color'];\n    children?: ReactNode;\n    onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\n}\n\nexport type ScrollbarHandle = {\n    scrollTo: (pos: number) => void;\n    scrollToBottom: () => void;\n    scrollToTop: () => void;\n};\n\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, thumbSize, thumbColor, trackColor, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\n    let [{ onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\n    const innerRef = useRef<HTMLDivElement>(null);\n\n    useImperativeHandle(ref, () => ({\n        scrollTo(pos: number) {\n            innerRef.current?.scrollTo({\n                top: pos,\n                behavior: \"smooth\"\n            });\n        },\n        scrollToBottom() {\n            if (!innerRef.current) return;\n            const ele = innerRef.current;\n            ele.scrollTo({\n                top: ele.scrollHeight,\n                behavior: \"smooth\"\n            });\n        },\n        scrollToTop() {\n            innerRef.current?.scrollTo({\n                top: 0,\n                behavior: \"smooth\"\n            });\n        }\n    }));\n\n    if (onScroll || onScrollEnd) {\n        props.onScroll = (e: UIEvent<HTMLDivElement>) => {\n            if (onScrollEnd) {\n                const ele: any = e.target\n                const scrollTop = ele.scrollTop\n                const scrollHeight = ele.scrollHeight\n                const clientHeight = ele.clientHeight\n                const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\n                isScrollDown && onScrollEnd(e)\n            }\n            onScroll && onScroll(e)\n        }\n    }\n\n    let sxr: any = {}\n\n    if (thumbSize) {\n        sxr['&::-webkit-scrollbar'] = {\n            width: thumbSize,\n            height: thumbSize,\n        }\n    }\n    if (thumbColor) {\n        sxr['&::-webkit-scrollbar-thumb'] = {\n            backgroundColor: thumbColor,\n            borderRadius: \"6px\",\n            opacity: 0.6,\n        }\n        sxr['&::-webkit-scrollbar-thumb:hover'] = {\n            backgroundColor: thumbColor,\n            opacity: 0.0,\n        }\n    }\n\n    if (trackColor) {\n        sxr['&::-webkit-scrollbar-track'] = {\n            backgroundColor: trackColor,\n            borderRadius: \"6px\",\n        }\n    }\n\n    return (\n        <Tag\n            {...props}\n            ref={innerRef}\n            baseClass='scrollbar'\n            sxr={{\n                height: \"100%\",\n                width: \"100%\",\n                overflow: \"auto\",\n                ...sxr,\n            }}\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default Scrollbar "],"names":[],"mappings":";;;;;;AAkBA;AAAwE;;AAEpE;AAEA;AACI;;AACI;AACI;AACA;AACH;;;;;AAID;;;AAGI;AACH;;;;AAGD;AACI;AACA;AACH;;AAER;AAED;AACI;;AAEQ;AACA;AACA;AACA;;AAEA;;AAEJ;AACJ;;;;;AAOI;AACA;;;;;AAKA;AACA;AACA;;;AAGA;AACA;;;;;AAMA;AACA;;;AAIR;AAeJ;;"}
+{"version":3,"file":"index.js","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagComponentType, TagProps, useInterface } from '@xanui/core';\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\n\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    size?: number;\n    thumbColor?: TagProps['color'];\n    trackColor?: TagProps['color'];\n    children?: ReactNode;\n    onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\n}\n\nexport type ScrollbarHandle = {\n    scrollTo: (pos: number) => void;\n    scrollToBottom: () => void;\n    scrollToTop: () => void;\n};\n\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, size, thumbColor, trackColor, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\n    let [{ onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\n    const innerRef = useRef<HTMLDivElement>(null);\n\n    useImperativeHandle(ref, () => ({\n        scrollTo(pos: number) {\n            innerRef.current?.scrollTo({\n                top: pos,\n                behavior: \"smooth\"\n            });\n        },\n        scrollToBottom() {\n            if (!innerRef.current) return;\n            const ele = innerRef.current;\n            ele.scrollTo({\n                top: ele.scrollHeight,\n                behavior: \"smooth\"\n            });\n        },\n        scrollToTop() {\n            innerRef.current?.scrollTo({\n                top: 0,\n                behavior: \"smooth\"\n            });\n        }\n    }));\n\n    if (onScroll || onScrollEnd) {\n        props.onScroll = (e: UIEvent<HTMLDivElement>) => {\n            if (onScrollEnd) {\n                const ele: any = e.target\n                const scrollTop = ele.scrollTop\n                const scrollHeight = ele.scrollHeight\n                const clientHeight = ele.clientHeight\n                const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\n                isScrollDown && onScrollEnd(e)\n            }\n            onScroll && onScroll(e)\n        }\n    }\n\n    let sxr: any = {}\n\n    if (size) {\n        sxr['&::-webkit-scrollbar'] = {\n            width: size,\n            height: size,\n        }\n    }\n    if (thumbColor) {\n        sxr['&::-webkit-scrollbar-thumb'] = {\n            backgroundColor: thumbColor + \"!important\",\n            borderRadius: \"6px\",\n            opacity: 0.6,\n        }\n        sxr['&::-webkit-scrollbar-thumb:hover'] = {\n            backgroundColor: thumbColor + \"!important\",\n            opacity: 0.0,\n        }\n    }\n\n    if (trackColor) {\n        sxr['&::-webkit-scrollbar-track'] = {\n            backgroundColor: trackColor,\n            borderRadius: \"6px\",\n        }\n    }\n\n    return (\n        <Tag\n            {...props}\n            ref={innerRef}\n            baseClass='scrollbar'\n            sxr={{\n                height: \"100%\",\n                width: \"100%\",\n                overflow: \"auto\",\n                ...sxr,\n            }}\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default Scrollbar "],"names":[],"mappings":";;;;;;AAkBA;AAAwE;;AAEpE;AAEA;AACI;;AACI;AACI;AACA;AACH;;;;;AAID;;;AAGI;AACH;;;;AAGD;AACI;AACA;AACH;;AAER;AAED;AACI;;AAEQ;AACA;AACA;AACA;;AAEA;;AAEJ;AACJ;;;;;AAOI;AACA;;;;;;AAMA;AACA;;;;AAIA;;;;;AAMA;AACA;;;AAIR;AAeJ;;"}

package/Select/index.cjs

@@ -16,7 +16,7 @@ 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"]);
-    color !== null && color !== void 0 ? color : (color = "brand");
+    color !== null && color !== void 0 ? color : (color = "primary");
     variant !== null && variant !== void 0 ? variant : (variant = "fill");
     const [target, setTarget] = React.useState();
     const conRef = React.useRef(null);
@@ -42,7 +42,7 @@ const Select = React.forwardRef((_a, ref) => {
     }, [children, value]);
     const mergeRefs = core.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index, Object.assign({ ref: mergeRefs, color: color, variant: variant === "ghost" ? "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: {
                     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();

package/Select/index.cjs.map

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

package/Select/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React__default, { ReactElement } from 'react';
 import { InputProps } from '../Input/index.js';
 import { ListProps } from '../List/index.js';
 import { MenuProps } from '../Menu/index.js';
@@ -9,9 +9,9 @@ type SelectProps = Omit<InputProps, "onChange" | "value" | "children" | "slotPro
     onChange?: (value: string | number) => void;
     children: ReactElement<OptionProps> | ReactElement<OptionProps>[];
     refs?: {
-        input?: React.Ref<any>;
-        menu?: React.Ref<any>;
-        list?: React.Ref<any>;
+        input?: React__default.Ref<any>;
+        menu?: React__default.Ref<any>;
+        list?: React__default.Ref<any>;
     };
     slotProps?: {
         menu?: Omit<MenuProps, 'children' | 'target'>;
@@ -19,7 +19,7 @@ type SelectProps = Omit<InputProps, "onChange" | "value" | "children" | "slotPro
         list?: Omit<ListProps, "children">;
     };
 };
-declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<any>>;
+declare const Select: React__default.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React__default.RefAttributes<any>>;
 
 export { Select as default };
 export type { SelectProps };

package/Select/index.js

@@ -14,7 +14,7 @@ const Select = React.forwardRef((_a, ref) => {
     var _b, _c, _d, _e, _f, _g;
     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");
+    color !== null && color !== void 0 ? color : (color = "primary");
     variant !== null && variant !== void 0 ? variant : (variant = "fill");
     const [target, setTarget] = useState();
     const conRef = useRef(null);
@@ -40,7 +40,7 @@ const Select = React.forwardRef((_a, ref) => {
     }, [children, value]);
     const mergeRefs = useMergeRefs(ref, conRef);
     const toggleMenu = () => setTarget(target ? null : conRef.current);
-    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: {
+    return (jsxs(Fragment, { children: [jsx(Input, Object.assign({ ref: mergeRefs, color: color, variant: variant === "ghost" ? "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();

package/Select/index.js.map

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

package/Skeleton/index.cjs

@@ -12,12 +12,13 @@ const Skeleton = React.forwardRef((_a, ref) => {
         loading = true;
     if (loading) {
         animation !== null && animation !== void 0 ? animation : (animation = 'pulse');
-        color !== null && color !== void 0 ? color : (color = "default");
+        color !== null && color !== void 0 ? color : (color = 'surface');
         let sxr = {};
         switch (animation) {
             case 'pulse':
                 sxr = {
-                    bgcolor: "divider.primary",
+                    radius: 1,
+                    bgcolor: `${color}.divider`,
                     width: "100%",
                     animation: 'skpulse 1.5s infinite',
                     "@keyframes skpulse": {
@@ -32,9 +33,10 @@ const Skeleton = React.forwardRef((_a, ref) => {
                 break;
             case 'wave':
                 sxr = {
+                    radius: 1,
                     position: 'relative',
                     overflow: 'hidden',
-                    bgcolor: "divider.primary",
+                    bgcolor: `${color}.ghost`,
                     "&::after": {
                         content: '""',
                         position: 'absolute',
@@ -42,8 +44,8 @@ const Skeleton = React.forwardRef((_a, ref) => {
                         left: "0%",
                         width: '100%',
                         height: '100%',
-                        animation: 'skwave 2s infinite',
-                        background: `linear-gradient(90deg, transparent 0%, var(--color-divider-secondary) 50%, transparent 100%)`,
+                        animation: 'skwave 2.5s infinite',
+                        background: `linear-gradient(90deg, transparent 0%, var(--color-${color}-divider) 50%, transparent 100%)`,
                     },
                     "@keyframes skwave": {
                         '0%': { left: '-100%' },

package/Skeleton/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type SkeletonProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n   animation?: 'pulse' | 'wave' | 'none';\n   loading?: boolean;\n}\n\nconst Skeleton = React.forwardRef(<T extends TagComponentType = \"div\">({ children, loading, color, animation, ...props }: SkeletonProps<T>, ref: React.Ref<any>) => {\n\n   if (!children) loading = true\n\n   if (loading) {\n      animation ??= 'pulse'\n      color ??= \"default\"\n      let sxr: any = {}\n      switch (animation) {\n         case 'pulse':\n            sxr = {\n               bgcolor: \"divider.primary\",\n               width: \"100%\",\n               animation: 'skpulse 1.5s infinite',\n               \"@keyframes skpulse\": {\n                  '0%, 100%': {\n                     opacity: 1,\n                  },\n                  '50%': {\n                     opacity: 0.4,\n                  },\n               }\n            }\n            break;\n         case 'wave':\n            sxr = {\n               position: 'relative',\n               overflow: 'hidden',\n               bgcolor: \"divider.primary\",\n               \"&::after\": {\n                  content: '\"\"',\n                  position: 'absolute',\n                  top: 0,\n                  left: \"0%\",\n                  width: '100%',\n                  height: '100%',\n                  animation: 'skwave 2s infinite',\n                  background: `linear-gradient(90deg, transparent 0%, var(--color-divider-secondary) 50%, transparent 100%)`,\n               },\n               \"@keyframes skwave\": {\n                  '0%': { left: '-100%' },\n                  '100%': { left: '100%' }\n               }\n            }\n            break;\n      }\n      return (\n         <Tag\n            {...props}\n            baseClass='skeleton'\n            ref={ref}\n            sxr={sxr}\n         />\n      )\n   }\n\n   return children\n})\n\nexport default Skeleton\n\n"],"names":[],"mappings":";;;;;;;;AASA;AAAuE;AAEpE;;;;;;;AAOM;AACG;AACG;AACA;AACA;AACA;AACG;AACG;AACF;AACD;AACG;AACF;AACH;;;AAGP;AACG;AACG;AACA;AACA;AACA;AACG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AACD;AACG;AACA;AACF;;;;AAIV;;AAUH;AACH;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type SkeletonProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n   animation?: 'pulse' | 'wave' | 'none';\n   loading?: boolean;\n}\n\nconst Skeleton = React.forwardRef(<T extends TagComponentType = \"div\">({ children, loading, color, animation, ...props }: SkeletonProps<T>, ref: React.Ref<any>) => {\n\n   if (!children) loading = true\n\n   if (loading) {\n      animation ??= 'pulse'\n      color ??= 'surface'\n      let sxr: any = {}\n      switch (animation) {\n         case 'pulse':\n            sxr = {\n               radius: 1,\n               bgcolor: `${color}.divider`,\n               width: \"100%\",\n               animation: 'skpulse 1.5s infinite',\n               \"@keyframes skpulse\": {\n                  '0%, 100%': {\n                     opacity: 1,\n                  },\n                  '50%': {\n                     opacity: 0.4,\n                  },\n               }\n            }\n            break;\n         case 'wave':\n            sxr = {\n               radius: 1,\n               position: 'relative',\n               overflow: 'hidden',\n               bgcolor: `${color}.ghost`,\n               \"&::after\": {\n                  content: '\"\"',\n                  position: 'absolute',\n                  top: 0,\n                  left: \"0%\",\n                  width: '100%',\n                  height: '100%',\n                  animation: 'skwave 2.5s infinite',\n                  background: `linear-gradient(90deg, transparent 0%, var(--color-${color}-divider) 50%, transparent 100%)`,\n               },\n               \"@keyframes skwave\": {\n                  '0%': { left: '-100%' },\n                  '100%': { left: '100%' }\n               }\n            }\n            break;\n      }\n      return (\n         <Tag\n            {...props}\n            baseClass='skeleton'\n            ref={ref}\n            sxr={sxr}\n         />\n      )\n   }\n\n   return children\n})\n\nexport default Skeleton\n\n"],"names":[],"mappings":";;;;;;;;AASA;AAAuE;AAEpE;;;;;;;AAOM;AACG;AACG;;AAEA;AACA;AACA;AACG;AACG;AACF;AACD;AACG;AACF;AACH;;;AAGP;AACG;AACG;AACA;AACA;;AAEA;AACG;AACA;AACA;AACA;AACA;AACA;AACA;;AAEF;AACD;AACG;AACA;AACF;;;;AAIV;;AAUH;AACH;;"}

package/Skeleton/index.js

@@ -10,12 +10,13 @@ const Skeleton = React.forwardRef((_a, ref) => {
         loading = true;
     if (loading) {
         animation !== null && animation !== void 0 ? animation : (animation = 'pulse');
-        color !== null && color !== void 0 ? color : (color = "default");
+        color !== null && color !== void 0 ? color : (color = 'surface');
         let sxr = {};
         switch (animation) {
             case 'pulse':
                 sxr = {
-                    bgcolor: "divider.primary",
+                    radius: 1,
+                    bgcolor: `${color}.divider`,
                     width: "100%",
                     animation: 'skpulse 1.5s infinite',
                     "@keyframes skpulse": {
@@ -30,9 +31,10 @@ const Skeleton = React.forwardRef((_a, ref) => {
                 break;
             case 'wave':
                 sxr = {
+                    radius: 1,
                     position: 'relative',
                     overflow: 'hidden',
-                    bgcolor: "divider.primary",
+                    bgcolor: `${color}.ghost`,
                     "&::after": {
                         content: '""',
                         position: 'absolute',
@@ -40,8 +42,8 @@ const Skeleton = React.forwardRef((_a, ref) => {
                         left: "0%",
                         width: '100%',
                         height: '100%',
-                        animation: 'skwave 2s infinite',
-                        background: `linear-gradient(90deg, transparent 0%, var(--color-divider-secondary) 50%, transparent 100%)`,
+                        animation: 'skwave 2.5s infinite',
+                        background: `linear-gradient(90deg, transparent 0%, var(--color-${color}-divider) 50%, transparent 100%)`,
                     },
                     "@keyframes skwave": {
                         '0%': { left: '-100%' },

package/Skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type SkeletonProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n   animation?: 'pulse' | 'wave' | 'none';\n   loading?: boolean;\n}\n\nconst Skeleton = React.forwardRef(<T extends TagComponentType = \"div\">({ children, loading, color, animation, ...props }: SkeletonProps<T>, ref: React.Ref<any>) => {\n\n   if (!children) loading = true\n\n   if (loading) {\n      animation ??= 'pulse'\n      color ??= \"default\"\n      let sxr: any = {}\n      switch (animation) {\n         case 'pulse':\n            sxr = {\n               bgcolor: \"divider.primary\",\n               width: \"100%\",\n               animation: 'skpulse 1.5s infinite',\n               \"@keyframes skpulse\": {\n                  '0%, 100%': {\n                     opacity: 1,\n                  },\n                  '50%': {\n                     opacity: 0.4,\n                  },\n               }\n            }\n            break;\n         case 'wave':\n            sxr = {\n               position: 'relative',\n               overflow: 'hidden',\n               bgcolor: \"divider.primary\",\n               \"&::after\": {\n                  content: '\"\"',\n                  position: 'absolute',\n                  top: 0,\n                  left: \"0%\",\n                  width: '100%',\n                  height: '100%',\n                  animation: 'skwave 2s infinite',\n                  background: `linear-gradient(90deg, transparent 0%, var(--color-divider-secondary) 50%, transparent 100%)`,\n               },\n               \"@keyframes skwave\": {\n                  '0%': { left: '-100%' },\n                  '100%': { left: '100%' }\n               }\n            }\n            break;\n      }\n      return (\n         <Tag\n            {...props}\n            baseClass='skeleton'\n            ref={ref}\n            sxr={sxr}\n         />\n      )\n   }\n\n   return children\n})\n\nexport default Skeleton\n\n"],"names":[],"mappings":";;;;;;AASA;AAAuE;AAEpE;;;;;;;AAOM;AACG;AACG;AACA;AACA;AACA;AACG;AACG;AACF;AACD;AACG;AACF;AACH;;;AAGP;AACG;AACG;AACA;AACA;AACA;AACG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AACD;AACG;AACA;AACF;;;;AAIV;;AAUH;AACH;;"}
+{"version":3,"file":"index.js","sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type SkeletonProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n   animation?: 'pulse' | 'wave' | 'none';\n   loading?: boolean;\n}\n\nconst Skeleton = React.forwardRef(<T extends TagComponentType = \"div\">({ children, loading, color, animation, ...props }: SkeletonProps<T>, ref: React.Ref<any>) => {\n\n   if (!children) loading = true\n\n   if (loading) {\n      animation ??= 'pulse'\n      color ??= 'surface'\n      let sxr: any = {}\n      switch (animation) {\n         case 'pulse':\n            sxr = {\n               radius: 1,\n               bgcolor: `${color}.divider`,\n               width: \"100%\",\n               animation: 'skpulse 1.5s infinite',\n               \"@keyframes skpulse\": {\n                  '0%, 100%': {\n                     opacity: 1,\n                  },\n                  '50%': {\n                     opacity: 0.4,\n                  },\n               }\n            }\n            break;\n         case 'wave':\n            sxr = {\n               radius: 1,\n               position: 'relative',\n               overflow: 'hidden',\n               bgcolor: `${color}.ghost`,\n               \"&::after\": {\n                  content: '\"\"',\n                  position: 'absolute',\n                  top: 0,\n                  left: \"0%\",\n                  width: '100%',\n                  height: '100%',\n                  animation: 'skwave 2.5s infinite',\n                  background: `linear-gradient(90deg, transparent 0%, var(--color-${color}-divider) 50%, transparent 100%)`,\n               },\n               \"@keyframes skwave\": {\n                  '0%': { left: '-100%' },\n                  '100%': { left: '100%' }\n               }\n            }\n            break;\n      }\n      return (\n         <Tag\n            {...props}\n            baseClass='skeleton'\n            ref={ref}\n            sxr={sxr}\n         />\n      )\n   }\n\n   return children\n})\n\nexport default Skeleton\n\n"],"names":[],"mappings":";;;;;;AASA;AAAuE;AAEpE;;;;;;;AAOM;AACG;AACG;;AAEA;AACA;AACA;AACG;AACG;AACF;AACD;AACG;AACF;AACH;;;AAGP;AACG;AACG;AACA;AACA;;AAEA;AACG;AACA;AACA;AACA;AACA;AACA;AACA;;AAEF;AACD;AACG;AACA;AACF;;;;AAIV;;AAUH;AACH;;"}

package/Stack/index.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+import React__default from 'react';
 import { TagComponentType, TagProps } from '@xanui/core';
 
 type StackProps<T extends TagComponentType = "div"> = TagProps<T>;
-declare const Stack: React.ForwardRefExoticComponent<Omit<StackProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+declare const Stack: React__default.ForwardRefExoticComponent<Omit<StackProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
 
 export { Stack as default };
 export type { StackProps };

package/Switch/index.cjs

@@ -22,7 +22,7 @@ const Switch = React.forwardRef((props, ref) => {
         _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";
+    color = (_b = p.color) !== null && _b !== void 0 ? _b : "primary";
     disabled = p.disabled;
     trackSize = p.trackSize;
     icon = p.icon;
@@ -55,7 +55,7 @@ const Switch = React.forwardRef((props, ref) => {
                     position: 'absolute',
                     top: "50%",
                     transform: "translateY(-50%)",
-                    bgcolor: checked ? color : "divider",
+                    bgcolor: checked ? color : 'surface.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,

package/Switch/index.cjs.map

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