@tinybigui/react 0.11.1 → 0.12.0

package/README.md

@@ -12,7 +12,7 @@ A modern, accessible React component library implementing Google's Material Desi
 
 ## ✅ Status
 
-> **Latest Release: v0.11.1** (2026-06-09)
+> **Latest Release: v0.12.0** (2026-06-09)
 >
 > **29 MD3 components** published to npm with full TypeScript support and WCAG 2.1 AA accessibility.
 >
@@ -149,13 +149,13 @@ See [THEMING.md](./THEMING.md) for the full customization guide.
 
 ### Phase 2: Navigation ✅
 
-| Component          | Status | Description                                                         |
-| ------------------ | ------ | ------------------------------------------------------------------- |
-| `AppBar`           | ✅     | M3 expressive flexible slot architecture, subtitle growth (v0.10.0) |
-| `Tabs`             | ✅     | Primary and secondary tab variants                                  |
-| `NavigationDrawer` | ✅     | Modal and standard navigation drawer                                |
-| `NavigationBar`    | ✅     | Bottom navigation with badges                                       |
-| `Search`           | ✅     | SearchBar and SearchView overlay                                    |
+| Component          | Status | Description                                                          |
+| ------------------ | ------ | -------------------------------------------------------------------- |
+| `AppBar`           | ✅     | M3 expressive flexible slot architecture, subtitle growth (v0.10.0)  |
+| `Tabs`             | ✅     | MD3 expressive variants-vs-states, content-width indicator (v0.11.2) |
+| `NavigationDrawer` | ✅     | Modal and standard navigation drawer                                 |
+| `NavigationBar`    | ✅     | Bottom navigation with badges                                        |
+| `Search`           | ✅     | SearchBar and SearchView overlay                                     |
 
 ### Phase 3: Feedback ✅
 
@@ -170,15 +170,15 @@ See [THEMING.md](./THEMING.md) for the full customization guide.
 
 ### Phase 4: Data Display ✅
 
-| Component    | Status | Description                                                          |
-| ------------ | ------ | -------------------------------------------------------------------- |
-| `Card`       | ✅     | MD3 motion tier, media aspect-ratio fix, CVA export parity (v0.11.1) |
-| `List`       | ✅     | Static and interactive list items                                    |
-| `Chip`       | ✅     | MD3 expressive slot architecture, elevated surface (v0.9.0)          |
-| `Badge`      | ✅     | MD3 expressive dot/count badges, icon-corner anchoring (v0.8.0)      |
-| `Divider`    | ✅     | Horizontal/vertical, inset variants                                  |
-| `DatePicker` | ✅     | Docked, modal, and input variants                                    |
-| `TimePicker` | ✅     | 12h/24h clock dial, range selection                                  |
+| Component    | Status | Description                                                              |
+| ------------ | ------ | ------------------------------------------------------------------------ |
+| `Card`       | ✅     | MD3 motion tier, media aspect-ratio fix, CVA export parity (v0.11.1)     |
+| `List`       | ✅     | Static and interactive list items                                        |
+| `Chip`       | ✅     | MD3 expressive slot architecture, elevated surface (v0.9.0)              |
+| `Badge`      | ✅     | MD3 expressive dot/count badges, icon-corner anchoring (v0.8.0)          |
+| `Divider`    | ✅     | MD3 expressive slot CVA, CSS-var thickness, logical RTL insets (v0.12.0) |
+| `DatePicker` | ✅     | Docked, modal, and input variants                                        |
+| `TimePicker` | ✅     | 12h/24h clock dial, range selection                                      |
 
 ### Planned
 

package/dist/index.cjs

@@ -3672,10 +3672,9 @@ var Tabs = React.forwardRef(
 Tabs.displayName = "Tabs";
 var tabListVariants = classVarianceAuthority.cva(
   [
-    // Base classes
     "relative flex",
     "bg-surface",
-    // Bottom divider line (MD3 spec)
+    // MD3: 1dp bottom divider in outline-variant color
     "border-b border-outline-variant"
   ],
   {
@@ -3692,108 +3691,110 @@ var tabListVariants = classVarianceAuthority.cva(
 );
 var tabVariants = classVarianceAuthority.cva(
   [
-    // Base layout
+    // Layout
     "relative flex flex-col items-center justify-center",
     "min-h-12 px-4",
     "cursor-pointer select-none",
+    // Clip state layer to tab boundary
     "overflow-hidden",
-    // Typography: MD3 Title Small
-    "text-sm font-medium tracking-[0.1px]",
-    // Transition
-    "transition-colors duration-200",
-    // Focus visible
+    // MD3 Title Small typography
+    "text-title-small font-medium tracking-[0.1px]",
+    // Effects transition for color changes (not spatial)
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Remove default button focus outline — handled via group-data-[focus-visible]/tab
     "focus-visible:outline-none",
-    // State layer via before pseudo-element
-    "before:absolute before:inset-0 before:transition-opacity before:duration-200",
-    "before:bg-current before:opacity-0",
-    "hover:before:opacity-8",
-    "active:before:opacity-12",
-    "focus-visible:before:opacity-12"
+    // Disabled — self-targeting data-[x]: selectors (not group)
+    "data-[disabled]:opacity-38 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none",
+    // Icon+label stacked: 64dp height
+    "data-[with-icon]:data-[with-label]:min-h-16"
   ],
   {
     variants: {
       /**
-       * Tab variant (Primary or Secondary)
+       * Design-time variant: affects active label/icon color and state-layer color.
+       * primary: active → text-primary
+       * secondary: active → text-on-surface
        */
       variant: {
-        primary: "",
-        secondary: ""
-      },
-      /**
-       * Selected state
-       */
-      selected: {
-        true: "",
-        false: ""
-      },
-      /**
-       * Disabled state
-       */
-      disabled: {
-        true: "opacity-38 cursor-not-allowed pointer-events-none",
-        false: ""
+        primary: [
+          // Inactive: on-surface-variant (base)
+          "text-on-surface-variant",
+          // Active: text-primary
+          "group-data-[selected]/tab:text-primary"
+          // Disabled active: on-surface/38 inherits from opacity-38 on root
+        ],
+        secondary: [
+          // Inactive: on-surface-variant (base)
+          "text-on-surface-variant",
+          // Active: on-surface
+          "group-data-[selected]/tab:text-on-surface"
+        ]
       },
       /**
-       * Layout determines min-width behavior
+       * Design-time variant: affects flex sizing in the tab row.
        */
       layout: {
         fixed: "flex-1",
         scrollable: "min-w-[90px] shrink-0"
       }
     },
-    compoundVariants: [
-      // Primary + selected
-      {
-        variant: "primary",
-        selected: true,
-        disabled: false,
-        className: "text-primary"
-      },
-      // Primary + unselected
-      {
-        variant: "primary",
-        selected: false,
-        disabled: false,
-        className: "text-on-surface-variant"
-      },
-      // Secondary + selected
-      {
-        variant: "secondary",
-        selected: true,
-        disabled: false,
-        className: "text-on-surface"
-      },
-      // Secondary + unselected
-      {
-        variant: "secondary",
-        selected: false,
-        disabled: false,
-        className: "text-on-surface-variant"
-      }
-    ],
+    // compoundVariants intentionally empty — state combinations are handled
+    // via group-data-[selected]/tab:group-data-[...]/tab: in state slot
+    compoundVariants: [],
     defaultVariants: {
       variant: "primary",
-      selected: false,
-      disabled: false,
       layout: "fixed"
     }
   }
 );
+var tabStateLayerVariants = classVarianceAuthority.cva(
+  [
+    "absolute inset-0 pointer-events-none opacity-0",
+    // Effects transition for opacity — no spatial overshoot
+    "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Hover: 8%
+    "group-data-[hovered]/tab:opacity-8",
+    // Focus: 10%
+    "group-data-[focus-visible]/tab:opacity-10",
+    // Pressed: 10%, doubled selector beats hover at equal cascade position
+    "group-data-[pressed]/tab:group-data-[pressed]/tab:opacity-10",
+    // No state layer when disabled
+    "group-data-[disabled]/tab:hidden"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          // Inactive state-layer color
+          "bg-on-surface",
+          // Active state-layer color (higher cascade position wins over base bg-on-surface)
+          "group-data-[selected]/tab:bg-primary"
+        ],
+        secondary: [
+          // Secondary: always on-surface
+          "bg-on-surface"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "primary"
+    }
+  }
+);
 var tabIndicatorVariants = classVarianceAuthority.cva(
   [
-    // Base: absolutely positioned at bottom
     "absolute bottom-0 left-0",
     "pointer-events-none",
-    // Transition using MD3 motion tokens (medium2 duration, emphasized easing)
+    // Spatial spring — indicator position/width are spatial (not effects)
     "transition-[left,width]",
-    "duration-medium2",
-    "ease-emphasized"
+    "duration-spring-standard-default-spatial",
+    "ease-spring-standard-default-spatial"
   ],
   {
     variants: {
       variant: {
-        primary: ["h-[3px]", "bg-primary", "rounded-t-sm"],
-        secondary: ["h-[2px]", "bg-on-surface-variant"]
+        primary: ["h-[3px]", "bg-primary", "rounded-tl-sm rounded-tr-sm"],
+        secondary: ["h-[2px]", "bg-primary"]
       }
     },
     defaultVariants: {
@@ -3801,20 +3802,28 @@ var tabIndicatorVariants = classVarianceAuthority.cva(
     }
   }
 );
-var tabPanelVariants = classVarianceAuthority.cva(
+var tabIconVariants = classVarianceAuthority.cva(
   [
-    // Base panel styles
-    "outline-none",
-    "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+    "relative inline-flex items-center justify-center",
+    // MD3 tab icon size: 24dp
+    "size-6",
+    // Effects transition for color (inherited from parent, guard here too)
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
   ],
   {
-    variants: {},
-    defaultVariants: {}
+    variants: {
+      hasLabel: {
+        true: "mb-1",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      hasLabel: false
+    }
   }
 );
 var tabBadgeVariants = classVarianceAuthority.cva(
   [
-    // Base badge
     "absolute",
     "inline-flex items-center justify-center",
     "bg-error text-on-error",
@@ -3824,7 +3833,7 @@ var tabBadgeVariants = classVarianceAuthority.cva(
   {
     variants: {
       type: {
-        dot: ["top-1 right-1", "w-1.5 h-1.5", "rounded-full"],
+        dot: ["top-0 right-0", "w-1.5 h-1.5", "rounded-full"],
         count: ["-top-1 -right-1", "min-w-[16px] h-4", "px-1", "rounded-full", "text-[11px]"]
       }
     },
@@ -3833,20 +3842,10 @@ var tabBadgeVariants = classVarianceAuthority.cva(
     }
   }
 );
-var tabIconVariants = classVarianceAuthority.cva(
-  ["relative", "inline-flex items-center justify-center", "w-6 h-6"],
-  {
-    variants: {
-      hasLabel: {
-        true: "mb-1",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      hasLabel: false
-    }
-  }
-);
+var tabPanelVariants = classVarianceAuthority.cva([
+  "outline-none",
+  "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+]);
 var TabList = React.forwardRef(
   ({ children, className }, forwardedRef) => {
     const { state } = useHeadlessTabsContext("TabList");
@@ -3925,18 +3924,41 @@ var TabList = React.forwardRef(
       const selectedTab = container.querySelector('[aria-selected="true"]');
       if (!selectedTab) return;
       const containerRect = container.getBoundingClientRect();
-      const tabRect = selectedTab.getBoundingClientRect();
-      const newLeft = tabRect.left - containerRect.left + container.scrollLeft;
-      const newWidth = tabRect.width;
-      setIndicatorStyle((prev) => {
-        if (prev.left === newLeft && prev.width === newWidth) return prev;
-        return { left: newLeft, width: newWidth };
-      });
+      if (variant === "primary") {
+        const contentEl = selectedTab.querySelector("[data-tab-content]");
+        if (!contentEl) return;
+        const contentRect = contentEl.getBoundingClientRect();
+        const newLeft = contentRect.left - containerRect.left + container.scrollLeft;
+        const newWidth = contentRect.width;
+        setIndicatorStyle((prev) => {
+          if (prev.left === newLeft && prev.width === newWidth) return prev;
+          return { left: newLeft, width: newWidth };
+        });
+      } else {
+        const tabRect = selectedTab.getBoundingClientRect();
+        const newLeft = tabRect.left - containerRect.left + container.scrollLeft;
+        const newWidth = tabRect.width;
+        setIndicatorStyle((prev) => {
+          if (prev.left === newLeft && prev.width === newWidth) return prev;
+          return { left: newLeft, width: newWidth };
+        });
+      }
       setIndicatorReady(true);
-    }, [ref]);
+    }, [ref, variant]);
     React.useLayoutEffect(() => {
       updateIndicator();
     }, [state.selectedKey, updateIndicator]);
+    React.useEffect(() => {
+      const container = ref.current;
+      if (!container || typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver(() => {
+        updateIndicator();
+      });
+      observer.observe(container);
+      return () => {
+        observer.disconnect();
+      };
+    }, [ref, updateIndicator]);
     const mergedTabListProps = { ...tabListProps, onKeyDown: handleKeyDown };
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...mergedTabListProps, ref, className: cn(tabListVariants({ layout }), className), children: [
       children,
@@ -3951,7 +3973,6 @@ var TabList = React.forwardRef(
             !indicatorReady && "opacity-0"
           ),
           style: {
-            // Dynamic left/width values from DOM measurements
             left: `${indicatorStyle.left}px`,
             width: `${indicatorStyle.width}px`
           }
@@ -3979,10 +4000,12 @@ var Tab = React.forwardRef(
     const {
       tabProps,
       isSelected,
-      isDisabled: ariaIsDisabled
+      isDisabled: ariaIsDisabled,
+      isPressed
     } = reactAria.useTab({ key: id, isDisabled }, state, ref);
     const { isFocusVisible, focusProps } = reactAria.useFocusRing();
     const finalIsDisabled = isDisabled || ariaIsDisabled;
+    const { isHovered, hoverProps } = reactAria.useHover({ isDisabled: finalIsDisabled });
     const { onMouseDown: handleRipple, ripples } = useRipple({
       disabled: finalIsDisabled || disableRipple
     });
@@ -3996,7 +4019,7 @@ var Tab = React.forwardRef(
         state.selectionManager.setFocusedKey(id);
       }
     }, [state.selectionManager, id, finalIsDisabled]);
-    const mergedProps = utils.mergeProps(tabProps, focusProps, {
+    const mergedProps = utils.mergeProps(tabProps, focusProps, hoverProps, {
       onMouseDown: disableRipple ? void 0 : handleRipple,
       onClick: handleClick,
       onFocus: handleFocus
@@ -4013,47 +4036,56 @@ var Tab = React.forwardRef(
         type: "button",
         "data-key": String(id),
         tabIndex: finalIsDisabled ? -1 : isSelected ? 0 : -1,
-        className: cn(
-          tabVariants({
-            variant,
-            selected: isSelected,
-            disabled: finalIsDisabled,
-            layout
-          }),
-          isFocusVisible && "outline-primary outline-2 outline-offset-2",
-          hasLabel && hasIcon && "min-h-16",
-          className
-        ),
+        className: cn(tabVariants({ variant, layout }), className),
+        ...getInteractionDataAttributes({
+          isHovered,
+          isFocusVisible,
+          isPressed,
+          isSelected,
+          isDisabled: finalIsDisabled
+        }),
+        "data-with-icon": hasIcon ? "" : void 0,
+        "data-with-label": hasLabel ? "" : void 0,
         ...htmlProps,
         children: [
           !disableRipple && ripples,
-          hasIcon && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(tabIconVariants({ hasLabel })), children: [
-            icon,
-            badgeDisplay && /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                "data-badge-type": isDotBadge ? "dot" : "count",
-                "aria-hidden": "true",
-                className: cn(tabBadgeVariants({ type: isDotBadge ? "dot" : "count" })),
-                children: !isDotBadge && badgeDisplay
-              }
-            )
-          ] }),
-          hasLabel && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative z-10 truncate", children: [
-            label,
-            !hasIcon && badgeDisplay && /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                "data-badge-type": isDotBadge ? "dot" : "count",
-                "aria-hidden": "true",
-                className: cn(
-                  "relative ml-1",
-                  tabBadgeVariants({ type: isDotBadge ? "dot" : "count" })
-                ),
-                children: !isDotBadge && badgeDisplay
-              }
-            )
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(tabStateLayerVariants({ variant })), "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              "data-tab-content": true,
+              className: "relative z-10 inline-flex flex-col items-center justify-center",
+              children: [
+                hasIcon && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(tabIconVariants({ hasLabel })), children: [
+                  icon,
+                  badgeDisplay && /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      "data-badge-type": isDotBadge ? "dot" : "count",
+                      "aria-hidden": "true",
+                      className: cn(tabBadgeVariants({ type: isDotBadge ? "dot" : "count" })),
+                      children: !isDotBadge && badgeDisplay
+                    }
+                  )
+                ] }),
+                hasLabel && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
+                  label,
+                  !hasIcon && badgeDisplay && /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      "data-badge-type": isDotBadge ? "dot" : "count",
+                      "aria-hidden": "true",
+                      className: cn(
+                        "relative ml-1",
+                        tabBadgeVariants({ type: isDotBadge ? "dot" : "count" })
+                      ),
+                      children: !isDotBadge && badgeDisplay
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
         ]
       }
     );
@@ -4686,13 +4718,21 @@ var HeadlessDrawerItem = React.forwardRef(
 );
 HeadlessDrawerItem.displayName = "HeadlessDrawerItem";
 var DividerHeadless = React.forwardRef(
-  ({ orientation = "horizontal", className }, ref) => {
+  ({ orientation = "horizontal", className, style }, ref) => {
     const { separatorProps } = reactAria.useSeparator({
       orientation,
       elementType: orientation === "vertical" ? "div" : "hr"
     });
     if (orientation === "vertical") {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { ...separatorProps, ref, className });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ...separatorProps,
+          ref,
+          className,
+          style
+        }
+      );
     }
     return /* @__PURE__ */ jsxRuntime.jsx(
       "hr",
@@ -4700,32 +4740,46 @@ var DividerHeadless = React.forwardRef(
         ...separatorProps,
         "aria-orientation": "horizontal",
         ref,
-        className
+        className,
+        style
       }
     );
   }
 );
 DividerHeadless.displayName = "DividerHeadless";
 var dividerVariants = classVarianceAuthority.cva(
-  // Base: always apply the MD3 outline-variant color to the border
-  "border-outline-variant",
+  [
+    // Zero border — color comes from background fill (matches md-web strategy)
+    "shrink-0 border-0",
+    // MD3 outline-variant color token
+    "bg-outline-variant",
+    // Default thickness — consumers override via the CSS custom property
+    "[--md-divider-thickness:1px]"
+  ],
   {
     variants: {
       /**
        * Controls the axis of the visual rule.
+       *
+       * horizontal — stretches to full inline width; block size is --md-divider-thickness
+       * vertical   — self-stretches to the block axis of the flex/grid parent;
+       *              inline size is --md-divider-thickness
        */
       orientation: {
-        horizontal: "border-t",
-        vertical: "border-l h-auto self-stretch"
+        horizontal: "w-full h-[var(--md-divider-thickness)]",
+        vertical: "self-stretch h-auto w-[var(--md-divider-thickness)]"
       },
       /**
-       * Inset — which end(s) are offset by 16dp per MD3 spec.
+       * Inset — logical inline offset per MD3 spec (16dp = 1rem = Tailwind spacing-4).
+       *
+       * Uses logical properties (ms-N / me-N) for correct behaviour under RTL
+       * writing modes (Arabic, Hebrew, etc.).
        */
       inset: {
         none: "",
-        start: "ml-4",
-        end: "mr-4",
-        both: "ml-4 mr-4"
+        start: "ms-4",
+        end: "me-4",
+        both: "ms-4 me-4"
       }
     },
     defaultVariants: {
@@ -4735,44 +4789,15 @@ var dividerVariants = classVarianceAuthority.cva(
   }
 );
 var Divider = React.forwardRef(
-  ({ orientation = "horizontal", inset = "none", label, className }, ref) => {
-    if (label) {
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          ref,
-          role: "group",
-          "aria-label": label,
-          className: cn("flex items-center gap-4", className),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              DividerHeadless,
-              {
-                orientation: "horizontal",
-                className: cn(dividerVariants({ orientation: "horizontal", inset: "none" }), "flex-1")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-on-surface-variant text-label-large whitespace-nowrap", children: label }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              DividerHeadless,
-              {
-                orientation: "horizontal",
-                className: cn(dividerVariants({ orientation: "horizontal", inset: "none" }), "flex-1")
-              }
-            )
-          ]
-        }
-      );
+  ({ orientation = "horizontal", inset = "none", className, style }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    DividerHeadless,
+    {
+      ref,
+      orientation,
+      className: cn(dividerVariants({ orientation, inset }), className),
+      ...style !== void 0 && { style }
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      DividerHeadless,
-      {
-        ref,
-        orientation,
-        className: cn(dividerVariants({ orientation, inset }), className)
-      }
-    );
-  }
+  )
 );
 Divider.displayName = "Divider";
 var drawerVariants = classVarianceAuthority.cva(