@versini/ui-tabs 1.1.0 → 1.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Arno Versini
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/index.d.ts

@@ -32,6 +32,7 @@ export declare type Size = "small" | "medium" | "large";
  *     orphan TabsTrigger (no matching panel) renders without `aria-controls`.
  *  9. DOM-order traversal — triggers register in DOM order (compareDocumentPosition)
  *     so keyboard navigation matches visual order.
+ *
  */
 export declare function Tabs<Value extends string = string>({ children, value, defaultValue, onValueChange, orientation, activationMode, size, mode, className, }: TabsProps<Value>): JSX.Element;
 
@@ -120,8 +121,8 @@ export declare type TabsProps<Value extends string = string> = {
     size?: Size;
     /**
      * How tab/panel text adapts to its surface. Use `"light"`/`"dark"` to force
-     * colors for a surface whose lightness differs from the ambient theme (e.g.
-     * a light card inside a dark-mode page); `"system"` follows the ambient theme,
+     * colors for a surface whose lightness differs from the ambient theme (e.g. a
+     * light card inside a dark-mode page); `"system"` follows the ambient theme,
      * `"alt-system"` inverts it.
      * @default "system"
      */

package/dist/components/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-tabs v1.1.0
+  @versini/ui-tabs v1.2.0
   © 2026 gizmette.com
 */
 
@@ -9,6 +9,8 @@ import { useUniqueId } from "@versini/ui-hooks/use-unique-id";
 import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import clsx from "clsx";
 
+
+
 const TABS_CLASSNAME = "av-tabs";
 const TABS_LIST_CLASSNAME = "av-tabs-list";
 const TABS_TRIGGER_CLASSNAME = "av-tabs-trigger";
@@ -19,6 +21,7 @@ const TABS_CONTENT_CLASSNAME = "av-tabs-content";
 
 
 
+
 /* v8 ignore start - default context values are fallbacks, never used directly */ const TabsContext = createContext({
     value: undefined,
     tabbableValue: undefined,
@@ -37,6 +40,7 @@ const TABS_CONTENT_CLASSNAME = "av-tabs-content";
 }); /* v8 ignore stop */ 
 
 
+
 /**
  * `useLayoutEffect` in the browser, `useEffect` on the server — avoids React's
  * "useLayoutEffect does nothing on the server" warning during SSR while keeping
@@ -75,25 +79,27 @@ const getTabsListClasses = ({ orientation })=>{
 const getTabsTriggerSizeClasses = ({ size })=>{
     return clsx({
         "text-xs px-2 py-1": size === "small",
-        "text-sm px-4 py-2": size === "medium",
+        "text-sm px-2 sm:px-4 py-2": size === "medium",
         "text-base px-5 py-2.5": size === "large"
     });
 };
 const getTabsTriggerClasses = ({ size, orientation, active, mode })=>{
     const borderSide = orientation === "vertical" ? "border-l-2" : "border-b-2";
-    return clsx(TABS_TRIGGER_CLASSNAME, "relative cursor-pointer bg-transparent transition-colors outline-none", // High-contrast text that matches the surface (via mode). The active state
-    // is conveyed by the indicator border + bold weight, never by dimming the
-    // resting text. Matches clubroad's full-contrast inactive tabs.
-    getModeTextClasses({
+    return clsx(TABS_TRIGGER_CLASSNAME, "relative cursor-pointer bg-transparent transition-colors outline-none", /**
+		 * High-contrast text that matches the surface (via mode). The active state is
+		 * conveyed by the indicator border + bold weight, never by dimming the
+		 * resting text. Matches clubroad's full-contrast inactive tabs.
+		 */ getModeTextClasses({
         mode
     }), "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-dark", "disabled:cursor-not-allowed disabled:opacity-50", getTabsTriggerSizeClasses({
         size
     }), borderSide, active ? "border-action-light" : "border-transparent");
 };
 const getTabsContentClasses = ({ className, mode })=>{
-    return clsx(TABS_CONTENT_CLASSNAME, // Theme-aware text so panel content stays readable on the actual surface
-    // (consumers can still override via className).
-    getModeTextClasses({
+    return clsx(TABS_CONTENT_CLASSNAME, /**
+		 * Theme-aware text so panel content stays readable on the actual surface
+		 * (consumers can still override via className).
+		 */ getModeTextClasses({
         mode
     }), "outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-dark", className);
 };
@@ -105,7 +111,10 @@ const getTabsContentClasses = ({ className, mode })=>{
 
 
 
-/** Nearest enabled trigger to `fromIndex`: scan forward (next), then backward (previous). */ const findNearestEnabledIndex = (triggers, fromIndex)=>{
+/**
+ * Nearest enabled trigger to `fromIndex`: scan forward (next), then backward
+ * (previous).
+ */ const findNearestEnabledIndex = (triggers, fromIndex)=>{
     const count = triggers.length;
     const start = Math.min(Math.max(fromIndex, 0), count);
     for(let i = start; i < count; i++){
@@ -144,6 +153,7 @@ const getTabsContentClasses = ({ className, mode })=>{
  *     orphan TabsTrigger (no matching panel) renders without `aria-controls`.
  *  9. DOM-order traversal — triggers register in DOM order (compareDocumentPosition)
  *     so keyboard navigation matches visual order.
+ *
  */ function Tabs({ children, value, defaultValue, onValueChange, orientation = "horizontal", activationMode = "automatic", size = "medium", mode = "system", className }) {
     const [activeValue, setActiveValue] = useUncontrolled({
         value,
@@ -154,19 +164,22 @@ const getTabsContentClasses = ({ className, mode })=>{
     const triggersRef = useRef([]);
     const panelsRef = useRef(new Set());
     const focusWithinRef = useRef(false);
-    // Last known index of the active trigger, used to recover to the *nearest*
-    // trigger when the active one is removed (its value is gone from the registry,
-    // but this ref still holds the slot it occupied).
-    const lastActiveIndexRef = useRef(0);
-    // Bumped whenever a trigger/panel registers or unregisters; it is a dependency
-    // of the context memo so consumers re-render and recompute roving tabIndex /
-    // aria-controls from the (mutable) registries.
-    const [registrationVersion, setRegistrationVersion] = useState(0);
+    /**
+	 * Last known index of the active trigger, used to recover to the *nearest*
+	 * trigger when the active one is removed (its value is gone from the registry,
+	 * but this ref still holds the slot it occupied).
+	 */ const lastActiveIndexRef = useRef(0);
+    /**
+	 * Bumped whenever a trigger/panel registers or unregisters; it is a dependency
+	 * of the context memo so consumers re-render and recompute roving tabIndex /
+	 * aria-controls from the (mutable) registries.
+	 */ const [registrationVersion, setRegistrationVersion] = useState(0);
     const bumpVersion = useCallback(()=>setRegistrationVersion((version)=>version + 1), []);
-    // Stable activation setter (useUncontrolled returns a fresh setter each render
-    // in uncontrolled mode; a ref keeps `setValue`'s identity stable so the context
-    // memo is not invalidated on every render).
-    const setActiveRef = useRef(setActiveValue);
+    /**
+	 * Stable activation setter (useUncontrolled returns a fresh setter each render
+	 * in uncontrolled mode; a ref keeps `setValue`'s identity stable so the
+	 * context memo is not invalidated on every render).
+	 */ const setActiveRef = useRef(setActiveValue);
     setActiveRef.current = setActiveValue;
     const setValue = useCallback((next)=>{
         setActiveRef.current(next);
@@ -216,16 +229,18 @@ const getTabsContentClasses = ({ className, mode })=>{
         focusWithinRef.current = true;
     }, []);
     const handleRootBlur = useCallback((event)=>{
-        // Keep the flag when focus is lost to <body> (e.g. the focused trigger
-        // unmounts) so recovery can restore it; only clear when focus genuinely
-        // moves to an element outside this Tabs.
-        if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) {
+        /**
+		 * Keep the flag when focus is lost to <body> (e.g. the focused trigger
+		 * unmounts) so recovery can restore it; only clear when focus genuinely moves
+		 * to an element outside this Tabs.
+		 */ if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) {
             focusWithinRef.current = false;
         }
     }, []);
-    // Default resolution (Invariant 3) + dynamic recovery (Invariant 7), both
-    // uncontrolled-only (controlled mode delegates recovery to the consumer).
-    useIsomorphicLayoutEffect(()=>{
+    /**
+	 * Default resolution (Invariant 3) + dynamic recovery (Invariant 7), both
+	 * uncontrolled-only (controlled mode delegates recovery to the consumer).
+	 */ useIsomorphicLayoutEffect(()=>{
         if (value !== undefined) {
             return;
         }
@@ -238,9 +253,10 @@ const getTabsContentClasses = ({ className, mode })=>{
         if (recoveredIndex !== -1) {
             const recovered = triggers[recoveredIndex];
             setActiveValue(recovered.value);
-            // Restore keyboard position if focus was inside the tablist (e.g. the
-            // focused active trigger was just removed and focus fell to <body>).
-            if (focusWithinRef.current) {
+            /**
+			 * Restore keyboard position if focus was inside the tablist (e.g. the
+			 * focused active trigger was just removed and focus fell to <body>).
+			 */ if (focusWithinRef.current) {
                 recovered.element.focus();
             }
         }
@@ -250,10 +266,11 @@ const getTabsContentClasses = ({ className, mode })=>{
     if (activeIndex !== -1) {
         lastActiveIndexRef.current = activeIndex;
     }
-    // Exactly one trigger carries tabIndex=0 (Invariant 2): the active trigger if
-    // it matches one (even when disabled, Invariant 5), else the first enabled,
-    // else the first.
-    let tabbableValue;
+    /**
+	 * Exactly one trigger carries tabIndex=0 (Invariant 2): the active trigger if
+	 * it matches one (even when disabled, Invariant 5), else the first enabled,
+	 * else the first.
+	 */ let tabbableValue;
     if (activeIndex !== -1) {
         tabbableValue = activeValue;
     } else {
@@ -278,9 +295,10 @@ const getTabsContentClasses = ({ className, mode })=>{
         }), [
         activeValue,
         tabbableValue,
-        // registrationVersion drives recompute of roving tabIndex / aria-controls
-        // from the registries when a trigger/panel (un)registers.
-        registrationVersion,
+        /**
+			 * registrationVersion drives recompute of roving tabIndex / aria-controls
+			 * from the registries when a trigger/panel (un)registers.
+			 */ registrationVersion,
         setValue,
         orientation,
         activationMode,
@@ -314,6 +332,8 @@ Tabs.displayName = "Tabs";
 
 
 
+
+
 function TabsContent({ value, children, className, ...rest }) {
     const { value: activeValue, mode, baseId, registerPanel, unregisterPanel, getTriggers } = useContext(TabsContext);
     useIsomorphicLayoutEffect(()=>{
@@ -326,10 +346,11 @@ function TabsContent({ value, children, className, ...rest }) {
         registerPanel,
         unregisterPanel
     ]);
-    // Only the active panel renders, and only when a matching trigger exists
-    // (an orphan TabsContent never renders). Check active first so inactive
-    // panels skip the trigger-registry scan.
-    if (activeValue !== value) {
+    /**
+	 * Only the active panel renders, and only when a matching trigger exists (an
+	 * orphan TabsContent never renders). Check active first so inactive panels
+	 * skip the trigger-registry scan.
+	 */ if (activeValue !== value) {
         return null;
     }
     const hasMatchingTrigger = getTriggers().some((trigger)=>trigger.value === value);
@@ -354,11 +375,16 @@ function TabsContent({ value, children, className, ...rest }) {
 TabsContent.displayName = "TabsContent";
 
 
+
+
+
+
 const getNextEnabledIndex = (triggers, currentIndex, direction)=>{
     const count = triggers.length;
-    // Seed the sentinel per direction so the first forward step lands on 0 and the
-    // first backward step lands on count-1 (correct wrap when nothing is current).
-    let index = currentIndex < 0 ? direction === 1 ? -1 : count : currentIndex;
+    /**
+	 * Seed the sentinel per direction so the first forward step lands on 0 and the
+	 * first backward step lands on count-1 (correct wrap when nothing is current).
+	 */ let index = currentIndex < 0 ? direction === 1 ? -1 : count : currentIndex;
     for(let i = 0; i < count; i++){
         index = (index + direction + count) % count;
         if (!triggers[index].disabled) {
@@ -436,10 +462,11 @@ const getLastEnabledIndex = (triggers)=>{
             case "Enter":
             case " ":
                 {
-                    // Prevent the native <button> click (and Space-scroll) so we own
-                    // activation. In manual mode, activate the focused trigger; in
-                    // automatic mode the tab is already active, so this is a no-op.
-                    event.preventDefault();
+                    /**
+					 * Prevent the native <button> click (and Space-scroll) so we own
+					 * activation. In manual mode, activate the focused trigger; in automatic
+					 * mode the tab is already active, so this is a no-op.
+					 */ event.preventDefault();
                     if (activationMode === "manual" && currentIndex >= 0 && !triggers[currentIndex].disabled) {
                         setValue(triggers[currentIndex].value);
                     }
@@ -507,12 +534,16 @@ TabsList.displayName = "TabsList";
 
 
 
+
+
+
 function TabsTrigger({ value, children, disabled = false, className, onClick, ...rest }) {
     const { value: activeValue, tabbableValue, setValue, orientation, size, mode, baseId, registerTrigger, unregisterTrigger, hasPanel } = useContext(TabsContext);
     const buttonRef = useRef(null);
-    // Register in a layout effect (before paint) so the panel's first render sees
-    // a populated trigger registry — avoids a one-frame empty/flicker state.
-    useIsomorphicLayoutEffect(()=>{
+    /**
+	 * Register in a layout effect (before paint) so the panel's first render sees
+	 * a populated trigger registry — avoids a one-frame empty/flicker state.
+	 */ useIsomorphicLayoutEffect(()=>{
         const element = buttonRef.current;
         /* v8 ignore start - ref is always set after mount */ if (!element) {
             return;
@@ -534,9 +565,10 @@ function TabsTrigger({ value, children, disabled = false, className, onClick, ..
     const active = activeValue === value;
     const tabId = getTabId(baseId, value);
     const panelId = getPanelId(baseId, value);
-    // Emit aria-controls only on the active trigger and only when its panel is
-    // registered (avoids a dangling IDREF; supports trigger-only/navigation use).
-    const controlsPanel = active && hasPanel(value);
+    /**
+	 * Emit aria-controls only on the active trigger and only when its panel is
+	 * registered (avoids a dangling IDREF; supports trigger-only/navigation use).
+	 */ const controlsPanel = active && hasPanel(value);
     return /*#__PURE__*/ jsx("button", {
         ...rest,
         ref: buttonRef,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-tabs",
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -41,11 +41,12 @@
 		"test:visual:ui": "playwright test -c playwright-ct.config.ts --ui"
 	},
 	"dependencies": {
-		"@versini/ui-hooks": "workspace:*",
+		"@versini/ui-hooks": "6.1.1",
 		"clsx": "2.1.1",
 		"tailwindcss": "4.3.0"
 	},
 	"sideEffects": [
 		"**/*.css"
-	]
+	],
+	"gitHead": "7be5c9c2698fa937dde9eb2f99484a37e9743c81"
 }