@tinybigui/react 0.11.1 → 0.11.2

package/dist/index.d.cts

@@ -3085,15 +3085,12 @@ declare const Tabs: React__default.ForwardRefExoticComponent<TabsProps & React__
  * Uses React Aria's useTabList for role="tablist", keyboard navigation,
  * and accessibility attributes.
  *
- * The active indicator slides to the selected tab using CSS transitions
- * with MD3 motion tokens (medium2 duration, emphasized easing).
+ * Active indicator behavior (MD3 spec):
+ * - Primary: indicator width = content (label/icon) width, centered under content.
+ *   Measured via the [data-tab-content] child span of the selected tab.
+ * - Secondary: indicator spans the full tab button width.
  *
- * MD3 Specifications:
- * - Container background: bg-surface
- * - Container height: 48dp
- * - Bottom border: 1dp, outline-variant color
- * - Fixed layout: tabs fill width equally
- * - Scrollable layout: overflow-x, no wrapping
+ * Motion: left and width are spatial properties → spring-standard-default-spatial.
  *
  * @example
  * ```tsx
@@ -3111,25 +3108,26 @@ declare const TabList: React__default.ForwardRefExoticComponent<TabListProps & R
 /**
  * Material Design 3 Tab Component (Layer 3: Styled)
  *
- * Renders a single tab item inside a TabList.
- * Supports three content modes: icon-only, label-only, icon + label (stacked).
+ * Architecture: Variants-vs-States
+ * - Design-time variants (primary/secondary, fixed/scrollable) live in CVA.
+ * - All interaction states are expressed as data-* attributes on the root button
+ *   via getInteractionDataAttributes, consumed by slots using group-data-[x]/tab.
+ * - Content flags (data-with-icon, data-with-label) describe structure, set explicitly.
  *
- * Features:
- * - ✅ Icon-only, label-only, icon + label (stacked) content modes
- * - ✅ Ripple effect (Material Design)
- * - ✅ MD3 state layers (hover 8%, pressed 12%)
- * - ✅ Badge support (numeric, dot, 999+)
- * - ✅ Disabled state (opacity-38, not focusable)
- * - ✅ Full keyboard accessibility (via React Aria)
- * - ✅ Primary/secondary variant colors
+ * Slots:
+ *   root button   — group/tab; typography, label color, disabled, content flags
+ *   state layer   — absolute inset hover/focus/pressed overlay
+ *   content span  — data-tab-content; measured by TabList for primary indicator width
+ *   icon wrapper  — 24dp icon + badge anchor
+ *   label span    — truncated text label
  *
  * MD3 Specifications:
- * - Minimum height: 48dp
- * - Minimum width: 90dp
- * - Typography: Title Small (14px, weight 500, tracking 0.1px)
- * - Icon: 24x24dp
- * - Active indicator: 3dp primary / 2dp secondary
- * - State layers: 8% hover, 12% pressed/focus
+ * - Minimum height: 48dp (label/icon-only), 64dp (icon+label stacked)
+ * - Typography: Title Small (text-title-small, weight 500, tracking 0.1px)
+ * - Icon: 24×24dp
+ * - Active indicator: 3dp primary / 2dp secondary — both bg-primary
+ * - State layers: hover 8%, focus/pressed 10%
+ * - Disabled: 38% opacity (not focusable)
  *
  * @example
  * ```tsx

package/dist/index.d.ts

@@ -3085,15 +3085,12 @@ declare const Tabs: React__default.ForwardRefExoticComponent<TabsProps & React__
  * Uses React Aria's useTabList for role="tablist", keyboard navigation,
  * and accessibility attributes.
  *
- * The active indicator slides to the selected tab using CSS transitions
- * with MD3 motion tokens (medium2 duration, emphasized easing).
+ * Active indicator behavior (MD3 spec):
+ * - Primary: indicator width = content (label/icon) width, centered under content.
+ *   Measured via the [data-tab-content] child span of the selected tab.
+ * - Secondary: indicator spans the full tab button width.
  *
- * MD3 Specifications:
- * - Container background: bg-surface
- * - Container height: 48dp
- * - Bottom border: 1dp, outline-variant color
- * - Fixed layout: tabs fill width equally
- * - Scrollable layout: overflow-x, no wrapping
+ * Motion: left and width are spatial properties → spring-standard-default-spatial.
  *
  * @example
  * ```tsx
@@ -3111,25 +3108,26 @@ declare const TabList: React__default.ForwardRefExoticComponent<TabListProps & R
 /**
  * Material Design 3 Tab Component (Layer 3: Styled)
  *
- * Renders a single tab item inside a TabList.
- * Supports three content modes: icon-only, label-only, icon + label (stacked).
+ * Architecture: Variants-vs-States
+ * - Design-time variants (primary/secondary, fixed/scrollable) live in CVA.
+ * - All interaction states are expressed as data-* attributes on the root button
+ *   via getInteractionDataAttributes, consumed by slots using group-data-[x]/tab.
+ * - Content flags (data-with-icon, data-with-label) describe structure, set explicitly.
  *
- * Features:
- * - ✅ Icon-only, label-only, icon + label (stacked) content modes
- * - ✅ Ripple effect (Material Design)
- * - ✅ MD3 state layers (hover 8%, pressed 12%)
- * - ✅ Badge support (numeric, dot, 999+)
- * - ✅ Disabled state (opacity-38, not focusable)
- * - ✅ Full keyboard accessibility (via React Aria)
- * - ✅ Primary/secondary variant colors
+ * Slots:
+ *   root button   — group/tab; typography, label color, disabled, content flags
+ *   state layer   — absolute inset hover/focus/pressed overlay
+ *   content span  — data-tab-content; measured by TabList for primary indicator width
+ *   icon wrapper  — 24dp icon + badge anchor
+ *   label span    — truncated text label
  *
  * MD3 Specifications:
- * - Minimum height: 48dp
- * - Minimum width: 90dp
- * - Typography: Title Small (14px, weight 500, tracking 0.1px)
- * - Icon: 24x24dp
- * - Active indicator: 3dp primary / 2dp secondary
- * - State layers: 8% hover, 12% pressed/focus
+ * - Minimum height: 48dp (label/icon-only), 64dp (icon+label stacked)
+ * - Typography: Title Small (text-title-small, weight 500, tracking 0.1px)
+ * - Icon: 24×24dp
+ * - Active indicator: 3dp primary / 2dp secondary — both bg-primary
+ * - State layers: hover 8%, focus/pressed 10%
+ * - Disabled: 38% opacity (not focusable)
  *
  * @example
  * ```tsx

package/dist/index.js

@@ -3667,10 +3667,9 @@ var Tabs = forwardRef(
 Tabs.displayName = "Tabs";
 var tabListVariants = 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"
   ],
   {
@@ -3687,108 +3686,110 @@ var tabListVariants = cva(
 );
 var tabVariants = 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 = 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 = 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: {
@@ -3796,20 +3797,28 @@ var tabIndicatorVariants = cva(
     }
   }
 );
-var tabPanelVariants = cva(
+var tabIconVariants = 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 = cva(
   [
-    // Base badge
     "absolute",
     "inline-flex items-center justify-center",
     "bg-error text-on-error",
@@ -3819,7 +3828,7 @@ var tabBadgeVariants = 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]"]
       }
     },
@@ -3828,20 +3837,10 @@ var tabBadgeVariants = cva(
     }
   }
 );
-var tabIconVariants = cva(
-  ["relative", "inline-flex items-center justify-center", "w-6 h-6"],
-  {
-    variants: {
-      hasLabel: {
-        true: "mb-1",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      hasLabel: false
-    }
-  }
-);
+var tabPanelVariants = cva([
+  "outline-none",
+  "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+]);
 var TabList = forwardRef(
   ({ children, className }, forwardedRef) => {
     const { state } = useHeadlessTabsContext("TabList");
@@ -3920,18 +3919,41 @@ var TabList = 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]);
     useLayoutEffect(() => {
       updateIndicator();
     }, [state.selectedKey, updateIndicator]);
+    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__ */ jsxs("div", { ...mergedTabListProps, ref, className: cn(tabListVariants({ layout }), className), children: [
       children,
@@ -3946,7 +3968,6 @@ var TabList = forwardRef(
             !indicatorReady && "opacity-0"
           ),
           style: {
-            // Dynamic left/width values from DOM measurements
             left: `${indicatorStyle.left}px`,
             width: `${indicatorStyle.width}px`
           }
@@ -3974,10 +3995,12 @@ var Tab = forwardRef(
     const {
       tabProps,
       isSelected,
-      isDisabled: ariaIsDisabled
+      isDisabled: ariaIsDisabled,
+      isPressed
     } = useTab({ key: id, isDisabled }, state, ref);
     const { isFocusVisible, focusProps } = useFocusRing();
     const finalIsDisabled = isDisabled || ariaIsDisabled;
+    const { isHovered, hoverProps } = useHover({ isDisabled: finalIsDisabled });
     const { onMouseDown: handleRipple, ripples } = useRipple({
       disabled: finalIsDisabled || disableRipple
     });
@@ -3991,7 +4014,7 @@ var Tab = forwardRef(
         state.selectionManager.setFocusedKey(id);
       }
     }, [state.selectionManager, id, finalIsDisabled]);
-    const mergedProps = mergeProps(tabProps, focusProps, {
+    const mergedProps = mergeProps(tabProps, focusProps, hoverProps, {
       onMouseDown: disableRipple ? void 0 : handleRipple,
       onClick: handleClick,
       onFocus: handleFocus
@@ -4008,47 +4031,56 @@ var Tab = 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__ */ jsxs("span", { className: cn(tabIconVariants({ hasLabel })), children: [
-            icon,
-            badgeDisplay && /* @__PURE__ */ jsx(
-              "span",
-              {
-                "data-badge-type": isDotBadge ? "dot" : "count",
-                "aria-hidden": "true",
-                className: cn(tabBadgeVariants({ type: isDotBadge ? "dot" : "count" })),
-                children: !isDotBadge && badgeDisplay
-              }
-            )
-          ] }),
-          hasLabel && /* @__PURE__ */ jsxs("span", { className: "relative z-10 truncate", children: [
-            label,
-            !hasIcon && badgeDisplay && /* @__PURE__ */ 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__ */ jsx("span", { className: cn(tabStateLayerVariants({ variant })), "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              "data-tab-content": true,
+              className: "relative z-10 inline-flex flex-col items-center justify-center",
+              children: [
+                hasIcon && /* @__PURE__ */ jsxs("span", { className: cn(tabIconVariants({ hasLabel })), children: [
+                  icon,
+                  badgeDisplay && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "data-badge-type": isDotBadge ? "dot" : "count",
+                      "aria-hidden": "true",
+                      className: cn(tabBadgeVariants({ type: isDotBadge ? "dot" : "count" })),
+                      children: !isDotBadge && badgeDisplay
+                    }
+                  )
+                ] }),
+                hasLabel && /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
+                  label,
+                  !hasIcon && badgeDisplay && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "data-badge-type": isDotBadge ? "dot" : "count",
+                      "aria-hidden": "true",
+                      className: cn(
+                        "relative ml-1",
+                        tabBadgeVariants({ type: isDotBadge ? "dot" : "count" })
+                      ),
+                      children: !isDotBadge && badgeDisplay
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
         ]
       }
     );