@moontra/moonui 2.4.7 → 2.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui",
-  "version": "2.4.7",
+  "version": "2.4.9",
   "description": "Premium React component library with modern design and customization",
   "author": "MoonUI",
   "license": "MIT",

package/src/components/ui/tabs.tsx

@@ -37,7 +37,7 @@ const tabsListVariants = cva(
     variants: {
       variant: {
         default: "bg-muted rounded-md p-1 text-muted-foreground dark:bg-gray-800/80 dark:text-gray-400",
-        pills: "bg-transparent gap-2 p-0 dark:text-gray-400", 
+        pills: "bg-transparent gap-2 p-0 dark:text-gray-400",
         underline: "bg-transparent border-b border-border dark:border-gray-700 gap-4 dark:text-gray-400",
         cards: "bg-transparent gap-2 p-0 dark:text-gray-400",
         minimal: "bg-transparent gap-1 p-0 dark:text-gray-400",
@@ -48,33 +48,43 @@ const 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
     }
   }
 );
 
-interface TabsListProps 
+interface TabsListProps
   extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,
     VariantProps<typeof tabsListVariants> {
   /** Dikey düzende göster */
   orientation?: "horizontal" | "vertical";
+  /** Mobil için yatay scroll */
+  scrollable?: boolean;
 }
 
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
   TabsListProps
->(({ className, variant, orientation, fullWidth, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn("moonui-theme", tabsListVariants({ variant, orientation, fullWidth, className }))}
-    {...props}
-  />
-));
+>(({ className, variant, orientation, fullWidth, scrollable, ...props }, ref) => {
+  // scrollable prop'unu DOM'a geçirmemek için destructure ediyoruz
+  return (
+    <TabsPrimitive.List
+      ref={ref}
+      className={cn("moonui-theme", tabsListVariants({ variant, orientation, fullWidth, scrollable, className }))}
+      {...props}
+    />
+  );
+});
 
 TabsList.displayName = TabsPrimitive.List.displayName;
 
@@ -82,13 +92,13 @@ TabsList.displayName = TabsPrimitive.List.displayName;
  * TabsTrigger
  * -----------------------------------------------------------------------------------------------*/
 const 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",
       },

package/src/styles/tailwind.css

@@ -1,7 +1,26 @@
-/* 
+/*
  * MoonUI Tailwind CSS
  * NOT: Bu dosya artık tailwind direktiflerini içermiyor
  * Ana proje zaten Tailwind kullandığı için çakışmayı önlemek amacıyla kaldırıldı
  */
 
 /* Component-specific utility classes buraya eklenebilir */
+
+/* Hide scrollbar utility - For scrollable tabs */
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.hide-scrollbar {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+/* Snap scroll utilities - For smooth tab scrolling */
+.snap-x {
+  scroll-snap-type: x mandatory;
+}
+
+.snap-mandatory {
+  scroll-snap-align: start;
+}