@columenlabs/lumen-ui 0.1.40 → 0.1.41

package/dist/ui/tabs.d.ts

@@ -2,6 +2,6 @@ import { Tabs as TabsPrimitive } from 'radix-ui';
 import type * as React from 'react';
 declare function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
 declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): React.JSX.Element;
-declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;
+declare function TabsTrigger({ className, onMouseDown, onKeyDown, onBlur, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;
 declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): React.JSX.Element;
 export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/ui/tabs.js

@@ -13,8 +13,22 @@ function Tabs({ className, ...props }) {
 function TabsList({ className, ...props }) {
     return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", className: cn('inline-flex w-full items-center justify-start gap-6 overflow-x-auto overflow-y-hidden text-muted-foreground [scrollbar-width:none]', className), ...props }));
 }
-function TabsTrigger({ className, ...props }) {
-    return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn("relative inline-flex shrink-0 items-center gap-1.5 px-0 pt-0 pb-2 after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:rounded-full after:bg-transparent text-sm leading-4 font-medium whitespace-nowrap text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:rounded-sm focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground data-[state=active]:after:bg-primary data-[state=active]:[&_svg]:text-primary [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+// Radix focuses a trigger from its own mousedown, which browsers count as :focus-visible, so a
+// clicked tab drew the keyboard ring over its underline. A pointer press marks the trigger until
+// the next key or blur; the ring shows only without that mark.
+const pointerOn = (e) => e.currentTarget.setAttribute('data-pointer', '');
+const pointerOff = (e) => e.currentTarget.removeAttribute('data-pointer');
+function TabsTrigger({ className, onMouseDown, onKeyDown, onBlur, ...props }) {
+    return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", onMouseDown: (e) => {
+            pointerOn(e);
+            onMouseDown?.(e);
+        }, onKeyDown: (e) => {
+            pointerOff(e);
+            onKeyDown?.(e);
+        }, onBlur: (e) => {
+            pointerOff(e);
+            onBlur?.(e);
+        }, className: cn("relative inline-flex shrink-0 items-center gap-1.5 px-0 pt-0 pb-2 after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:rounded-full after:bg-transparent text-sm leading-4 font-medium whitespace-nowrap text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:rounded-sm focus-visible:not-data-[pointer]:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground data-[state=active]:after:bg-primary data-[state=active]:[&_svg]:text-primary [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
 }
 function TabsContent({ className, ...props }) {
     return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn('flex-1 outline-none', className), ...props }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.40",
+  "version": "0.1.41",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -41,7 +41,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.40",
+    "@columenlabs/lumen-ui-types": "0.1.41",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",