@sytechui/theme 2.6.2 → 2.6.4

package/dist/components/tabs.d.ts

@@ -22,14 +22,14 @@ declare const tabs: tailwind_variants.TVReturnType<{
     variant: {
         solid: {};
         light: {
-            tabList: string;
+            base: string;
         };
         underlined: {
-            tabList: string;
+            base: string;
             cursor: string;
         };
         bordered: {
-            tabList: string;
+            base: string;
         };
     };
     color: {
@@ -42,16 +42,19 @@ declare const tabs: tailwind_variants.TVReturnType<{
     };
     size: {
         sm: {
+            base: string;
             tabList: string;
             tab: string;
             cursor: string;
         };
         md: {
+            base: string;
             tabList: string;
             tab: string;
             cursor: string;
         };
         lg: {
+            base: string;
             tabList: string;
             tab: string;
             cursor: string;
@@ -59,26 +62,31 @@ declare const tabs: tailwind_variants.TVReturnType<{
     };
     radius: {
         none: {
+            base: string;
             tabList: string;
             tab: string;
             cursor: string;
         };
         sm: {
+            base: string;
             tabList: string;
             tab: string;
             cursor: string;
         };
         md: {
+            base: string;
             tabList: string;
             tab: string;
             cursor: string;
         };
         lg: {
+            base: string;
             tabList: string;
             tab: string;
             cursor: string;
         };
         full: {
+            base: string;
             tabList: string;
             tab: string;
             cursor: string;
@@ -87,7 +95,7 @@ declare const tabs: tailwind_variants.TVReturnType<{
     fullWidth: {
         true: {
             base: string;
-            tabList: string;
+            scroller: string;
         };
     };
     isDisabled: {
@@ -102,24 +110,38 @@ declare const tabs: tailwind_variants.TVReturnType<{
         };
     };
     placement: {
-        top: {};
+        top: {
+            scrollPrev: string;
+            scrollNext: string;
+        };
         start: {
+            scroller: string;
             tabList: string;
             panel: string;
             tabWrapper: string;
+            scrollPrev: string;
+            scrollNext: string;
         };
         end: {
+            scroller: string;
             tabList: string;
             panel: string;
             tabWrapper: string;
+            scrollPrev: string;
+            scrollNext: string;
         };
         bottom: {
             tabWrapper: string;
+            scrollPrev: string;
+            scrollNext: string;
         };
     };
 }, {
     base: string;
+    scroller: string;
     tabList: string[];
+    scrollPrev: string[];
+    scrollNext: string[];
     tab: string[];
     tabContent: string[];
     cursor: string[];
@@ -129,14 +151,14 @@ declare const tabs: tailwind_variants.TVReturnType<{
     variant: {
         solid: {};
         light: {
-            tabList: string;
+            base: string;
         };
         underlined: {
-            tabList: string;
+            base: string;
             cursor: string;
         };
         bordered: {
-            tabList: string;
+            base: string;
         };
     };
     color: {
@@ -149,16 +171,19 @@ declare const tabs: tailwind_variants.TVReturnType<{
     };
     size: {
         sm: {
+            base: string;
             tabList: string;
             tab: string;
             cursor: string;
         };
         md: {
+            base: string;
             tabList: string;
             tab: string;
             cursor: string;
         };
         lg: {
+            base: string;
             tabList: string;
             tab: string;
             cursor: string;
@@ -166,26 +191,31 @@ declare const tabs: tailwind_variants.TVReturnType<{
     };
     radius: {
         none: {
+            base: string;
             tabList: string;
             tab: string;
             cursor: string;
         };
         sm: {
+            base: string;
             tabList: string;
             tab: string;
             cursor: string;
         };
         md: {
+            base: string;
             tabList: string;
             tab: string;
             cursor: string;
         };
         lg: {
+            base: string;
             tabList: string;
             tab: string;
             cursor: string;
         };
         full: {
+            base: string;
             tabList: string;
             tab: string;
             cursor: string;
@@ -194,7 +224,7 @@ declare const tabs: tailwind_variants.TVReturnType<{
     fullWidth: {
         true: {
             base: string;
-            tabList: string;
+            scroller: string;
         };
     };
     isDisabled: {
@@ -209,24 +239,38 @@ declare const tabs: tailwind_variants.TVReturnType<{
         };
     };
     placement: {
-        top: {};
+        top: {
+            scrollPrev: string;
+            scrollNext: string;
+        };
         start: {
+            scroller: string;
             tabList: string;
             panel: string;
             tabWrapper: string;
+            scrollPrev: string;
+            scrollNext: string;
         };
         end: {
+            scroller: string;
             tabList: string;
             panel: string;
             tabWrapper: string;
+            scrollPrev: string;
+            scrollNext: string;
         };
         bottom: {
             tabWrapper: string;
+            scrollPrev: string;
+            scrollNext: string;
         };
     };
 }, {
     base: string;
+    scroller: string;
     tabList: string[];
+    scrollPrev: string[];
+    scrollNext: string[];
     tab: string[];
     tabContent: string[];
     cursor: string[];
@@ -236,14 +280,14 @@ declare const tabs: tailwind_variants.TVReturnType<{
     variant: {
         solid: {};
         light: {
-            tabList: string;
+            base: string;
         };
         underlined: {
-            tabList: string;
+            base: string;
             cursor: string;
         };
         bordered: {
-            tabList: string;
+            base: string;
         };
     };
     color: {
@@ -256,16 +300,19 @@ declare const tabs: tailwind_variants.TVReturnType<{
     };
     size: {
         sm: {
+            base: string;
             tabList: string;
             tab: string;
             cursor: string;
         };
         md: {
+            base: string;
             tabList: string;
             tab: string;
             cursor: string;
         };
         lg: {
+            base: string;
             tabList: string;
             tab: string;
             cursor: string;
@@ -273,26 +320,31 @@ declare const tabs: tailwind_variants.TVReturnType<{
     };
     radius: {
         none: {
+            base: string;
             tabList: string;
             tab: string;
             cursor: string;
         };
         sm: {
+            base: string;
             tabList: string;
             tab: string;
             cursor: string;
         };
         md: {
+            base: string;
             tabList: string;
             tab: string;
             cursor: string;
         };
         lg: {
+            base: string;
             tabList: string;
             tab: string;
             cursor: string;
         };
         full: {
+            base: string;
             tabList: string;
             tab: string;
             cursor: string;
@@ -301,7 +353,7 @@ declare const tabs: tailwind_variants.TVReturnType<{
     fullWidth: {
         true: {
             base: string;
-            tabList: string;
+            scroller: string;
         };
     };
     isDisabled: {
@@ -316,24 +368,38 @@ declare const tabs: tailwind_variants.TVReturnType<{
         };
     };
     placement: {
-        top: {};
+        top: {
+            scrollPrev: string;
+            scrollNext: string;
+        };
         start: {
+            scroller: string;
             tabList: string;
             panel: string;
             tabWrapper: string;
+            scrollPrev: string;
+            scrollNext: string;
         };
         end: {
+            scroller: string;
             tabList: string;
             panel: string;
             tabWrapper: string;
+            scrollPrev: string;
+            scrollNext: string;
         };
         bottom: {
             tabWrapper: string;
+            scrollPrev: string;
+            scrollNext: string;
         };
     };
 }, {
     base: string;
+    scroller: string;
     tabList: string[];
+    scrollPrev: string[];
+    scrollNext: string[];
     tab: string[];
     tabContent: string[];
     cursor: string[];

package/dist/components/tabs.js

@@ -114,6 +114,19 @@ var custom_default = {
 
 // src/utilities/scrollbar-hide.ts
 var scrollbar_hide_default = {
+  /**
+   * Theme-aware scrollbar
+   */
+  ".scrollbar": {
+    "scrollbar-width": "var(--scrollbar-width)",
+    "scrollbar-color": "var(--scrollbar-color)",
+    "scrollbar-gutter": "var(--scrollbar-gutter)"
+  },
+  ".scrollbar-thin": {
+    "scrollbar-width": "thin",
+    "scrollbar-color": "var(--scrollbar-thumb) var(--scrollbar-track)",
+    "scrollbar-gutter": "auto"
+  },
   /**
    * Scroll Hide
    */
@@ -132,10 +145,18 @@ var scrollbar_hide_default = {
     "-ms-overflow-style": "auto",
     /* Firefox */
     "scrollbar-width": "auto",
+    "scrollbar-color": "auto",
+    "scrollbar-gutter": "auto",
     /* Safari and Chrome */
     "&::-webkit-scrollbar": {
       display: "block"
     }
+  },
+  ".scrollbar-none": {
+    "-ms-overflow-style": "none",
+    "scrollbar-width": "none",
+    "scrollbar-color": "auto",
+    "scrollbar-gutter": "auto"
   }
 };
 
@@ -358,18 +379,58 @@ var colorVariants = {
 // src/components/tabs.ts
 var tabs = tv({
   slots: {
-    base: "inline-flex",
+    base: "group relative inline-flex max-w-full bg-default-100",
+    scroller: "max-w-full",
     tabList: [
       "relative",
-      "flex",
+      "inline-flex",
       "p-1",
       "h-fit",
       "gap-2",
       "items-center",
       "flex-nowrap",
-      "overflow-x-scroll",
-      "scrollbar-hide",
-      "bg-default-100"
+      "w-max",
+      "min-w-full"
+    ],
+    scrollPrev: [
+      "absolute",
+      "z-20",
+      "hidden",
+      "size-4",
+      "items-center",
+      "justify-center",
+      "rounded-full",
+      "bg-transparent",
+      "outline-none",
+      "text-foreground",
+      "transition-opacity",
+      "hover:opacity-70",
+      "focus-visible:outline-2",
+      "focus-visible:outline-focus",
+      "group-has-[[data-left-scroll=true]]:flex",
+      "group-has-[[data-left-right-scroll=true]]:flex",
+      "group-has-[[data-top-scroll=true]]:flex",
+      "group-has-[[data-top-bottom-scroll=true]]:flex"
+    ],
+    scrollNext: [
+      "absolute",
+      "z-20",
+      "hidden",
+      "size-4",
+      "items-center",
+      "justify-center",
+      "rounded-full",
+      "bg-transparent",
+      "outline-none",
+      "text-foreground",
+      "transition-opacity",
+      "hover:opacity-70",
+      "focus-visible:outline-2",
+      "focus-visible:outline-focus",
+      "group-has-[[data-right-scroll=true]]:flex",
+      "group-has-[[data-left-right-scroll=true]]:flex",
+      "group-has-[[data-bottom-scroll=true]]:flex",
+      "group-has-[[data-top-bottom-scroll=true]]:flex"
     ],
     tab: [
       "z-0",
@@ -404,7 +465,8 @@ var tabs = tv({
       "absolute",
       "z-0",
       "bg-white",
-      "will-change-[transform,width,height]",
+      // WebKit can drop nested tab title content when a composited cursor is inside ScrollShadow.
+      "will-change-auto",
       "invisible",
       "data-[initialized=true]:visible",
       "data-[animated=true]:transition-[left,top,width,height]",
@@ -425,14 +487,14 @@ var tabs = tv({
     variant: {
       solid: {},
       light: {
-        tabList: "bg-transparent dark:bg-transparent"
+        base: "bg-transparent dark:bg-transparent"
       },
       underlined: {
-        tabList: "bg-transparent dark:bg-transparent",
+        base: "bg-transparent dark:bg-transparent",
         cursor: "h-[2px] w-[80%] bottom-0 shadow-[0_1px_0px_0_rgba(0,0,0,0.05)]"
       },
       bordered: {
-        tabList: "bg-transparent dark:bg-transparent border-medium border-default-200 shadow-xs"
+        base: "bg-transparent dark:bg-transparent border-medium border-default-200 shadow-xs"
       }
     },
     color: {
@@ -445,16 +507,19 @@ var tabs = tv({
     },
     size: {
       sm: {
+        base: "rounded-medium",
         tabList: "rounded-medium",
         tab: "h-7 text-tiny rounded-small",
         cursor: "rounded-small"
       },
       md: {
+        base: "rounded-medium",
         tabList: "rounded-medium",
         tab: "h-8 text-small rounded-small",
         cursor: "rounded-small"
       },
       lg: {
+        base: "rounded-large",
         tabList: "rounded-large",
         tab: "h-9 text-medium rounded-medium",
         cursor: "rounded-medium"
@@ -462,26 +527,31 @@ var tabs = tv({
     },
     radius: {
       none: {
+        base: "rounded-none",
         tabList: "rounded-none",
         tab: "rounded-none",
         cursor: "rounded-none"
       },
       sm: {
+        base: "rounded-medium",
         tabList: "rounded-medium",
         tab: "rounded-small",
         cursor: "rounded-small"
       },
       md: {
+        base: "rounded-medium",
         tabList: "rounded-medium",
         tab: "rounded-small",
         cursor: "rounded-small"
       },
       lg: {
+        base: "rounded-large",
         tabList: "rounded-large",
         tab: "rounded-medium",
         cursor: "rounded-medium"
       },
       full: {
+        base: "rounded-full",
         tabList: "rounded-full",
         tab: "rounded-full",
         cursor: "rounded-full"
@@ -490,7 +560,7 @@ var tabs = tv({
     fullWidth: {
       true: {
         base: "w-full",
-        tabList: "w-full"
+        scroller: "w-full"
       }
     },
     isDisabled: {
@@ -505,19 +575,30 @@ var tabs = tv({
       }
     },
     placement: {
-      top: {},
+      top: {
+        scrollPrev: "top-1/2 left-1 -translate-y-1/2",
+        scrollNext: "top-1/2 right-1 -translate-y-1/2"
+      },
       start: {
-        tabList: "flex-col",
+        scroller: "h-full",
+        tabList: "min-w-0 flex-col",
         panel: "py-0 px-3",
-        tabWrapper: "flex"
+        tabWrapper: "flex",
+        scrollPrev: "top-1 left-1/2 -translate-x-1/2",
+        scrollNext: "bottom-1 left-1/2 -translate-x-1/2"
       },
       end: {
-        tabList: "flex-col",
+        scroller: "h-full",
+        tabList: "min-w-0 flex-col",
         panel: "py-0 px-3",
-        tabWrapper: "flex flex-row-reverse"
+        tabWrapper: "flex flex-row-reverse",
+        scrollPrev: "top-1 left-1/2 -translate-x-1/2",
+        scrollNext: "bottom-1 left-1/2 -translate-x-1/2"
       },
       bottom: {
-        tabWrapper: "flex flex-col-reverse"
+        tabWrapper: "flex flex-col-reverse",
+        scrollPrev: "top-1/2 left-1 -translate-y-1/2",
+        scrollNext: "top-1/2 right-1 -translate-y-1/2"
       }
     }
   },

package/dist/components/tabs.mjs

@@ -1,37 +1,37 @@
 import {
   tabs
-} from "../chunk-22RNS2JQ.mjs";
-import "../chunk-CR7SUL27.mjs";
-import "../chunk-LD2JADOO.mjs";
-import "../chunk-27EH4573.mjs";
-import "../chunk-6Q4A5IGD.mjs";
-import "../chunk-7MY46DKJ.mjs";
-import "../chunk-7CAOOET2.mjs";
-import "../chunk-GYRKKQKN.mjs";
-import "../chunk-HRULT2QB.mjs";
-import "../chunk-3PBT3W4C.mjs";
-import "../chunk-TYJNRAT2.mjs";
-import "../chunk-M5F7VFZT.mjs";
-import "../chunk-63TVI5PY.mjs";
-import "../chunk-4XFAHRMJ.mjs";
-import "../chunk-OBSH26UE.mjs";
-import "../chunk-K6X3VPO4.mjs";
-import "../chunk-T754O54S.mjs";
-import "../chunk-GXDNTAQH.mjs";
-import "../chunk-RAC3PSZO.mjs";
+} from "../chunk-T6HDMOJB.mjs";
+import "../chunk-EZ47UJPD.mjs";
+import "../chunk-W37Q6YFS.mjs";
+import "../chunk-47BB6GL3.mjs";
+import "../chunk-WH4ODSEM.mjs";
+import "../chunk-XBJNS5SU.mjs";
+import "../chunk-OSP4OLTO.mjs";
+import "../chunk-4N2PLITL.mjs";
+import "../chunk-AGSAOCCR.mjs";
+import "../chunk-5DJU5KUL.mjs";
+import "../chunk-ZWG2GMCI.mjs";
+import "../chunk-P5HLCB43.mjs";
+import "../chunk-XKMMJKKB.mjs";
+import "../chunk-MTBQ5EO5.mjs";
+import "../chunk-AL5UNXQI.mjs";
+import "../chunk-USGOG5QI.mjs";
 import "../chunk-GQT3YUX3.mjs";
-import "../chunk-P2SWF4YK.mjs";
-import "../chunk-QU72GCNK.mjs";
-import "../chunk-YISEC5JS.mjs";
-import "../chunk-JGY6VQQQ.mjs";
-import "../chunk-UJC5GXOO.mjs";
-import "../chunk-FJOYYPB2.mjs";
-import "../chunk-RUIUXVZ4.mjs";
+import "../chunk-PY74IHS4.mjs";
+import "../chunk-I5YZBAB3.mjs";
+import "../chunk-7ARJ2TQM.mjs";
+import "../chunk-KKEJLP4U.mjs";
+import "../chunk-ECD4ABCS.mjs";
+import "../chunk-NJBUOBAS.mjs";
+import "../chunk-7K2CWEHT.mjs";
+import "../chunk-D2XMP2NC.mjs";
+import "../chunk-ROFEKAS6.mjs";
 import "../chunk-GSRZWDGA.mjs";
 import "../chunk-AWXUGVFR.mjs";
 import "../chunk-MPVWW3DX.mjs";
-import "../chunk-WH6SPIFG.mjs";
-import "../chunk-D2XMP2NC.mjs";
+import "../chunk-7FAFG773.mjs";
+import "../chunk-FJOYYPB2.mjs";
+import "../chunk-RUIUXVZ4.mjs";
 import "../chunk-WQEDQHKX.mjs";
 import "../chunk-CPSLANMP.mjs";
 import "../chunk-FFKHVGFX.mjs";

package/dist/components/toast.js

@@ -115,6 +115,19 @@ var custom_default = {
 
 // src/utilities/scrollbar-hide.ts
 var scrollbar_hide_default = {
+  /**
+   * Theme-aware scrollbar
+   */
+  ".scrollbar": {
+    "scrollbar-width": "var(--scrollbar-width)",
+    "scrollbar-color": "var(--scrollbar-color)",
+    "scrollbar-gutter": "var(--scrollbar-gutter)"
+  },
+  ".scrollbar-thin": {
+    "scrollbar-width": "thin",
+    "scrollbar-color": "var(--scrollbar-thumb) var(--scrollbar-track)",
+    "scrollbar-gutter": "auto"
+  },
   /**
    * Scroll Hide
    */
@@ -133,10 +146,18 @@ var scrollbar_hide_default = {
     "-ms-overflow-style": "auto",
     /* Firefox */
     "scrollbar-width": "auto",
+    "scrollbar-color": "auto",
+    "scrollbar-gutter": "auto",
     /* Safari and Chrome */
     "&::-webkit-scrollbar": {
       display: "block"
     }
+  },
+  ".scrollbar-none": {
+    "-ms-overflow-style": "none",
+    "scrollbar-width": "none",
+    "scrollbar-color": "auto",
+    "scrollbar-gutter": "auto"
   }
 };