@xanui/ui 1.2.6 → 1.2.8

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;;"}

package/Switch/index.d.ts

@@ -1,10 +1,10 @@
-import React, { ReactElement } from 'react';
+import React__default, { ReactElement } from 'react';
 import { TagProps, useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';
 
 type SwitchProps = Omit<TagProps<"input">, "color" | "size" | "component" | "type" | "checked"> & {
     checked?: boolean;
     size?: useBreakpointPropsType<number | "small" | "medium" | "large">;
-    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, "default">>;
+    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, 'surface'>>;
     disabled?: useBreakpointPropsType<boolean>;
     trackSize?: useBreakpointPropsType<number>;
     icon?: useBreakpointPropsType<ReactElement>;
@@ -13,7 +13,7 @@ type SwitchProps = Omit<TagProps<"input">, "color" | "size" | "component" | "typ
         track?: Omit<TagProps, 'children'>;
     };
 };
-declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & React.RefAttributes<any>>;
+declare const Switch: React__default.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & React__default.RefAttributes<any>>;
 
 export { Switch as default };
 export type { SwitchProps };

package/Switch/index.js

@@ -20,7 +20,7 @@ const Switch = React.forwardRef((props, ref) => {
         _p.icon = icon;
     const p = 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;
@@ -53,7 +53,7 @@ const Switch = React.forwardRef((props, ref) => {
                     position: 'absolute',
                     top: "50%",
                     transform: "translateY(-50%)",
-                    bgcolor: checked ? color : "divider",
+                    bgcolor: checked ? color : 'surface.divider',
                 } })), jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.thumb, { baseClass: 'switch-thumb', sxr: {
                     transition: "all .25s",
                     width: height,

package/Switch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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.js","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;;"}

package/Tab/index.cjs

@@ -6,11 +6,32 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var core = require('@xanui/core');
 var index = require('../Button/index.cjs');
+var context = require('../Tabs/context.cjs');
 
 const Tab = React.forwardRef((_a, ref) => {
-    var { children } = _a, props = tslib.__rest(_a, ["children"]);
+    var { children, value } = _a, props = tslib.__rest(_a, ["children", "value"]);
     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 })));
+    const container = context.useTabs();
+    if (!container)
+        throw new Error("Tabs component must be used within a <Tabs>.");
+    const btnRef = React.useRef(null);
+    const mergeRef = core.useMergeRefs(ref, btnRef);
+    React.useEffect(() => {
+        if (value === container.value) {
+            const e = {
+                type: "click",
+                target: btnRef.current,
+                currentTarget: btnRef.current,
+                preventDefault: () => { },
+                stopPropagation: () => { },
+            };
+            container.onChange(value, e);
+        }
+    }, [container.variant, container.color]);
+    const isSelected = value === container.value;
+    return (jsxRuntime.jsx(index, Object.assign({}, _props, { color: container.variant === "text" && isSelected ? container.color : 'surface', variant: "text", onClick: (e) => {
+            container.onChange(value, e);
+        }, classNames: ["tab", ...((_props === null || _props === void 0 ? void 0 : _props.classNames) || [])], ref: mergeRef, children: children })));
 });
 
 module.exports = Tab;

package/Tab/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Tab/index.tsx"],"sourcesContent":["\"use client\";\nimport React from 'react'\nimport { TagComponentType, useInterface } from '@xanui/core';\nimport Button, { ButtonProps } from '../Button';\n\nexport type TabProps<T extends TagComponentType = \"button\"> = ButtonProps<T> & {\n    value?: string | number\n}\n\nconst Tab = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: TabProps<T>, ref: React.Ref<any>) => {\n    let [_props] = useInterface<any>(\"Tab\", props, {})\n    return (\n        <Button\n            {..._props}\n            classNames={[\"tab\", ...(_props?.classNames || [])]}\n            ref={ref}\n        >\n            {children}\n        </Button>\n    )\n})\n\nexport default Tab"],"names":[],"mappings":";;;;;;;;;AASA;AAAkE;AAC9D;AACA;AASJ;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Tab/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useRef } from 'react'\nimport { TagComponentType, useInterface, useMergeRefs } from '@xanui/core';\nimport Button, { ButtonProps } from '../Button';\nimport { useTabs } from '../Tabs/context';\nimport { TabsProps } from '../Tabs/types';\n\nexport type TabProps<T extends TagComponentType = \"button\"> = ButtonProps<T> & {\n    value?: string | number\n}\n\nconst Tab = React.forwardRef(<T extends TagComponentType = \"div\">({ children, value, ...props }: TabProps<T>, ref: React.Ref<any>) => {\n    let [_props] = useInterface<any>(\"Tab\", props, {})\n    const container = useTabs() as TabsProps\n    if (!container) throw new Error(\"Tabs component must be used within a <Tabs>.\");\n    const btnRef = useRef<HTMLElement>(null)\n    const mergeRef = useMergeRefs(ref, btnRef)\n\n    useEffect(() => {\n        if (value === container.value) {\n            const e = {\n                type: \"click\",\n                target: btnRef.current,\n                currentTarget: btnRef.current,\n                preventDefault: () => { },\n                stopPropagation: () => { },\n            };\n\n            (container as any).onChange(value, e)\n        }\n    }, [container.variant, container.color])\n    const isSelected = value === container.value\n    return (\n        <Button\n            {..._props}\n            color={container.variant === \"text\" && isSelected ? container.color : 'surface'}\n            variant={\"text\"}\n            onClick={(e) => {\n                (container as any).onChange(value, e)\n            }}\n            classNames={[\"tab\", ...(_props?.classNames || [])]}\n            ref={mergeRef}\n        >\n            {children}\n        </Button>\n    )\n})\n\nexport default Tab"],"names":[],"mappings":";;;;;;;;;;AAWA;;AACI;AACA;AACA;AAAgB;AAChB;;;AAII;AACI;AACI;;;AAGA;AACA;;AAGH;;;AAGT;AACA;AAMa;AACL;AAOZ;;"}

package/Tab/index.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
+import React__default from 'react';
 import { TagComponentType } from '@xanui/core';
 import { ButtonProps } from '../Button/index.js';
 
 type TabProps<T extends TagComponentType = "button"> = ButtonProps<T> & {
     value?: string | number;
 };
-declare const Tab: React.ForwardRefExoticComponent<Omit<TabProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+declare const Tab: React__default.ForwardRefExoticComponent<Omit<TabProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
 
 export { Tab as default };
 export type { TabProps };