@djangocfg/ui-core 2.1.264 → 2.1.267

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.264",
+  "version": "2.1.267",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -86,7 +86,7 @@
     "playground": "playground dev"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.264",
+    "@djangocfg/i18n": "^2.1.267",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -148,9 +148,9 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.264",
+    "@djangocfg/i18n": "^2.1.267",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.264",
+    "@djangocfg/typescript-config": "^2.1.267",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/navigation/tabs/index.tsx

@@ -185,9 +185,23 @@ const Tabs = React.forwardRef<
 })
 Tabs.displayName = "Tabs"
 
+// ─────────────────────────────────────────────────────────────────────────
+// Tabs variant context — lets TabsTrigger inherit variant from TabsList
+// ─────────────────────────────────────────────────────────────────────────
+
+type TabsVariant = 'default' | 'underline'
+const TabsVariantContext = React.createContext<TabsVariant>('default')
+
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+    /**
+     * Visual variant.
+     * - `default` — pill/card style (bg-muted container)
+     * - `underline` — borderless, underline indicator on active tab
+     * @default 'default'
+     */
+    variant?: TabsVariant
     /**
      * Full width mode - tabs will stretch equally to fill the container
      * @default false
@@ -199,36 +213,41 @@ const TabsList = React.forwardRef<
      */
     scrollable?: boolean
   }
->(({ className, fullWidth = false, scrollable = false, ...props }, ref) => {
-  // If scrollable mode is enabled, wrap in ScrollArea
-  if (scrollable) {
-    return (
-      <ScrollArea className="w-full whitespace-nowrap rounded-lg">
-        <TabsPrimitive.List
-          ref={ref}
-          className={cn(
-            "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
-            fullWidth && "w-full flex",
-            className
-          )}
-          {...props}
-        />
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
-    )
-  }
+>(({ className, variant = 'default', fullWidth = false, scrollable = false, ...props }, ref) => {
+  const isUnderline = variant === 'underline'
+
+  const listCls = cn(
+    isUnderline
+      ? "inline-flex items-end gap-0 bg-transparent p-0 h-auto rounded-none"
+      : "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+    fullWidth && "w-full flex",
+    className
+  )
+
+  const list = (
+    <TabsPrimitive.List ref={ref} className={listCls} {...props} />
+  )
+
+  // For underline variant — native overflow-x-auto, full-width border via absolute element
+  const wrapped = isUnderline ? (
+    <div
+      className={cn("relative w-full", scrollable && "overflow-x-auto")}
+      style={scrollable ? { scrollbarWidth: 'none', msOverflowStyle: 'none' } as React.CSSProperties : undefined}
+    >
+      <div className="absolute bottom-0 left-0 right-0 h-px bg-border" />
+      {list}
+    </div>
+  ) : scrollable ? (
+    <ScrollArea className="w-full whitespace-nowrap">
+      {list}
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  ) : list
 
-  // Default mode without scrolling
   return (
-    <TabsPrimitive.List
-      ref={ref}
-      className={cn(
-        "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
-        fullWidth && "w-full flex",
-        className
-      )}
-      {...props}
-    />
+    <TabsVariantContext.Provider value={variant}>
+      {wrapped}
+    </TabsVariantContext.Provider>
   )
 })
 TabsList.displayName = TabsPrimitive.List.displayName
@@ -243,17 +262,41 @@ const TabsTrigger = React.forwardRef<
     flexEqual?: boolean
     key?: React.Key
   }
->(({ className, flexEqual = false, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
-      flexEqual && "flex-1",
-      className
-    )}
-    {...props}
-  />
-))
+>(({ className, flexEqual = false, ...props }, ref) => {
+  const variant = React.useContext(TabsVariantContext)
+  const isUnderline = variant === 'underline'
+
+  return (
+    <TabsPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        isUnderline
+          ? [
+              "relative z-10 rounded-none bg-transparent shadow-none whitespace-nowrap",
+              "px-3 py-2.5 mb-[-1px]",
+              "text-sm font-medium text-muted-foreground/60",
+              "border-b-2 border-transparent",
+              "transition-all duration-150",
+              "hover:text-foreground",
+              "focus-visible:outline-none",
+              "disabled:pointer-events-none disabled:opacity-50",
+              "data-[state=active]:text-foreground data-[state=active]:font-semibold",
+              "data-[state=active]:border-foreground data-[state=active]:shadow-none",
+            ].join(" ")
+          : [
+              "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1",
+              "text-sm font-medium ring-offset-background transition-all",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              "disabled:pointer-events-none disabled:opacity-50",
+              "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+            ].join(" "),
+        flexEqual && "flex-1",
+        className
+      )}
+      {...props}
+    />
+  )
+})
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
 
 const TabsContent = React.forwardRef<