@moontra/moonui 2.4.7 → 2.4.9

package/dist/index.mjs

@@ -2520,32 +2520,39 @@ var tabsListVariants = cva(
       },
       fullWidth: {
         true: "w-full"
+      },
+      scrollable: {
+        true: "overflow-x-auto overflow-y-hidden flex-nowrap hide-scrollbar snap-x snap-mandatory px-4",
+        false: "flex-wrap"
       }
     },
     defaultVariants: {
       variant: "default",
       orientation: "horizontal",
-      fullWidth: false
+      fullWidth: false,
+      scrollable: false
     }
   }
 );
-var TabsList = t.forwardRef(({ className, variant, orientation, fullWidth, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.List,
-  {
-    ref,
-    className: cn("moonui-theme", tabsListVariants({ variant, orientation, fullWidth, className })),
-    ...props
-  }
-));
+var TabsList = t.forwardRef(({ className, variant, orientation, fullWidth, scrollable, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    {
+      ref,
+      className: cn("moonui-theme", tabsListVariants({ variant, orientation, fullWidth, scrollable, className })),
+      ...props
+    }
+  );
+});
 TabsList.displayName = TabsPrimitive.List.displayName;
 var tabsTriggerVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap flex-shrink-0 font-medium ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
         default: "rounded-md data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm dark:data-[state=active]:bg-gray-900 dark:data-[state=active]:text-gray-100 dark:data-[state=active]:shadow-gray-950/10",
         underline: "rounded-none border-b-2 border-transparent pb-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground dark:data-[state=active]:border-primary/80 dark:data-[state=active]:text-gray-100",
-        pills: "rounded-full bg-muted hover:bg-muted/80 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground dark:bg-gray-800 dark:hover:bg-gray-700 dark:data-[state=active]:bg-primary/90 dark:data-[state=active]:text-white",
+        pills: "rounded-full bg-gray-100 hover:bg-gray-200/80 border border-gray-300 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:border-primary dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 dark:data-[state=active]:bg-primary/90 dark:data-[state=active]:text-white dark:data-[state=active]:border-primary",
         cards: "rounded-md bg-muted/50 hover:bg-muted data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-md dark:bg-gray-800/50 dark:hover:bg-gray-700/50 dark:data-[state=active]:bg-gray-900 dark:data-[state=active]:text-gray-100 dark:data-[state=active]:shadow-gray-950/20",
         minimal: "rounded-sm bg-transparent hover:bg-muted/30 data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:underline data-[state=active]:underline-offset-4 dark:hover:bg-gray-800/30 dark:data-[state=active]:text-gray-200"
       },