@tinybigui/react 0.14.0 → 0.15.0

package/README.md

@@ -12,7 +12,7 @@ A modern, accessible React component library implementing Google's Material Desi
 
 ## ✅ Status
 
-> **Latest Release: v0.14.0** (2026-06-10)
+> **Latest Release: v0.15.0** (2026-06-10)
 >
 > **29 MD3 components** published to npm with full TypeScript support and WCAG 2.1 AA accessibility.
 >
@@ -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`    | ✅     | MD3 expressive slot CVA, CSS-var thickness, logical RTL insets (v0.12.0)   |
-| `DatePicker` | ✅     | MD3 expressive two-axis slot architecture, styled slot injection (v0.13.0) |
-| `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`       | ✅     | MD3 expressive variants-vs-states, state layer, focus ring, slot CVAs (v0.15.0) |
+| `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` | ✅     | MD3 expressive two-axis slot architecture, styled slot injection (v0.13.0)      |
+| `TimePicker` | ✅     | 12h/24h clock dial, range selection                                             |
 
 ### Planned
 

package/dist/index.cjs

@@ -7988,37 +7988,150 @@ InteractiveListItem.displayName = "InteractiveListItem";
 var listVariants = classVarianceAuthority.cva("w-full bg-surface");
 var listItemVariants = classVarianceAuthority.cva(
   [
-    "group relative flex items-center overflow-hidden px-4 py-2 cursor-pointer",
-    "transition-[background-color] duration-short4 ease-standard"
+    // Layout
+    "relative flex items-center overflow-hidden px-4 py-2 select-none",
+    // Color transition — effects spring (no spatial overshoot on color)
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Cursor: non-interactive base; data-[interactive] overrides
+    "cursor-default",
+    "data-[interactive]:cursor-pointer",
+    // Selected: secondary-container background
+    "group-data-[selected]/list-item:bg-secondary-container",
+    // Disabled: self-targeting selectors (not group, since root is the group)
+    "data-[disabled]:opacity-38 data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed"
   ],
   {
     variants: {
+      /**
+       * Visual density — derived from content, not a user prop.
+       * one-line:   headline only (56dp)
+       * two-line:   headline + supportingText (72dp)
+       * three-line: overline + headline + supportingText (88dp)
+       */
       density: {
         "one-line": "min-h-14",
         "two-line": "min-h-18",
         "three-line": "min-h-22 items-start"
-      },
-      isSelected: {
-        true: "bg-secondary-container text-on-secondary-container",
-        false: ""
-      },
-      isDisabled: {
-        true: "opacity-38 pointer-events-none",
-        false: ""
-      },
-      isInteractive: {
-        true: "",
-        false: "cursor-default"
       }
     },
     defaultVariants: {
-      density: "one-line",
-      isSelected: false,
-      isDisabled: false,
-      isInteractive: true
+      density: "one-line"
+    }
+  }
+);
+var listItemStateLayerVariants = classVarianceAuthority.cva([
+  "absolute inset-0 pointer-events-none opacity-0",
+  "bg-on-surface",
+  // Effects transition for opacity — no spatial overshoot
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Hover: 8%
+  "group-data-[hovered]/list-item:opacity-8",
+  // Focus: 10%
+  "group-data-[focus-visible]/list-item:opacity-10",
+  // Pressed: 10%, doubled selector beats hover
+  "group-data-[pressed]/list-item:group-data-[pressed]/list-item:opacity-10",
+  // No state layer when disabled
+  "group-data-[disabled]/list-item:hidden"
+]);
+var listItemFocusRingVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0",
+  "outline outline-2 -outline-offset-2 outline-secondary",
+  // Effects transition — opacity must NOT overshoot
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/list-item:opacity-100"
+]);
+var listItemLeadingVariants = classVarianceAuthority.cva(
+  [
+    "mr-4 flex shrink-0 items-center",
+    // Effects transition for icon color changes
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
+  ],
+  {
+    variants: {
+      type: {
+        icon: [
+          "size-6",
+          "text-on-surface-variant",
+          // Selected: icon color changes to on-secondary-container
+          "group-data-[selected]/list-item:text-on-secondary-container",
+          // Disabled: 38% (inherited from root opacity-38, but also explicit for color accuracy)
+          "group-data-[disabled]/list-item:text-on-surface/38"
+        ],
+        avatar: [
+          "size-10 overflow-hidden rounded-full"
+          // Avatar color provided by content; no token overrides needed
+        ],
+        checkbox: [],
+        radio: []
+      }
+    },
+    defaultVariants: {
+      type: "icon"
     }
   }
 );
+var listItemTrailingVariants = classVarianceAuthority.cva(
+  [
+    "ml-auto flex shrink-0 items-center",
+    // Effects transition for color changes
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
+  ],
+  {
+    variants: {
+      type: {
+        icon: [
+          "size-6",
+          "text-on-surface-variant",
+          "group-data-[selected]/list-item:text-on-secondary-container",
+          "group-data-[disabled]/list-item:text-on-surface/38"
+        ],
+        text: [
+          "text-label-small",
+          "text-on-surface-variant",
+          "group-data-[selected]/list-item:text-on-secondary-container",
+          "group-data-[disabled]/list-item:text-on-surface/38"
+        ],
+        checkbox: [],
+        radio: []
+      }
+    },
+    defaultVariants: {
+      type: "icon"
+    }
+  }
+);
+var listItemOverlineVariants = classVarianceAuthority.cva([
+  "text-label-small",
+  "text-on-surface-variant",
+  // Effects transition for color
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Selected: on-secondary-container
+  "group-data-[selected]/list-item:text-on-secondary-container",
+  // Disabled: opacity inherited from root; explicit for color
+  "group-data-[disabled]/list-item:text-on-surface/38"
+]);
+var listItemHeadlineVariants = classVarianceAuthority.cva([
+  "text-body-large",
+  "text-on-surface",
+  // Effects transition for color
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Selected: on-secondary-container
+  "group-data-[selected]/list-item:text-on-secondary-container",
+  // Disabled: 38% color via CSS (opacity-38 on root handles all descendants, but
+  // explicit token ensures predictable rendering when color is specified).
+  "group-data-[disabled]/list-item:text-on-surface/38"
+]);
+var listItemSupportingTextVariants = classVarianceAuthority.cva([
+  "text-body-medium",
+  "text-on-surface-variant",
+  // Effects transition for color
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Selected: on-secondary-container
+  "group-data-[selected]/list-item:text-on-secondary-container",
+  // Disabled: 38% color
+  "group-data-[disabled]/list-item:text-on-surface/38"
+]);
 function interleaveWithDividers(children) {
   const items = React.Children.toArray(children);
   return items.reduce((acc, child, index) => {
@@ -8043,51 +8156,25 @@ var List = React.forwardRef(function List2({ className, showDividers = false, ch
   return /* @__PURE__ */ jsxRuntime.jsx(ListHeadless, { ref, className: cn(listVariants(), className), ...props, children: renderedChildren });
 });
 List.displayName = "List";
-var typeClasses = {
-  icon: "size-6 text-on-surface-variant",
-  avatar: "size-10 overflow-hidden rounded-full",
-  checkbox: "",
-  radio: ""
-};
 var ListItemLeading = React.forwardRef(
   function ListItemLeading2({ type, children, className }, ref) {
     const isControl = type === "checkbox" || type === "radio";
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: cn("mr-4 flex shrink-0 items-center", typeClasses[type], className),
-        children: isControl ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", tabIndex: -1, children }) : children
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn(listItemLeadingVariants({ type }), className), children: isControl ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", tabIndex: -1, children }) : children });
   }
 );
 ListItemLeading.displayName = "ListItemLeading";
-var typeClasses2 = {
-  icon: "size-6 text-on-surface-variant",
-  text: "text-on-surface-variant text-label-small",
-  checkbox: "",
-  radio: ""
-};
 var ListItemTrailing = React.forwardRef(
   function ListItemTrailing2({ type, children, className }, ref) {
     const isControl = type === "checkbox" || type === "radio";
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: cn("ml-auto flex shrink-0 items-center", typeClasses2[type], className),
-        children: isControl ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", tabIndex: -1, children }) : children
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn(listItemTrailingVariants({ type }), className), children: isControl ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", tabIndex: -1, children }) : children });
   }
 );
 ListItemTrailing.displayName = "ListItemTrailing";
 var ListItemText = React.forwardRef(function ListItemText2({ headline, supportingText, overline, className }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("min-w-0 flex-1", className), children: [
-    overline && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-on-surface-variant text-label-small", children: overline }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-on-surface text-body-large", children: headline }),
-    supportingText && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-on-surface-variant text-body-medium", children: supportingText })
+    overline && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(listItemOverlineVariants()), children: overline }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(listItemHeadlineVariants()), children: headline }),
+    supportingText && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(listItemSupportingTextVariants()), children: supportingText })
   ] });
 });
 ListItemText.displayName = "ListItemText";
@@ -8131,44 +8218,72 @@ var ListItem = React.forwardRef(function ListItem2({
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "li",
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StaticStyledListItem,
     {
       ref: forwardedRef,
-      role: "listitem",
-      className: cn(
-        listItemVariants({
-          density,
-          isSelected: false,
-          isDisabled,
-          isInteractive: false
-        }),
-        className
-      ),
-      children: [
-        leadingSlot && /* @__PURE__ */ jsxRuntime.jsx(ListItemLeading, { type: leadingType ?? "icon", children: leadingSlot }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ListItemText,
-          {
-            headline,
-            ...supportingText !== void 0 ? { supportingText } : {},
-            ...overline !== void 0 ? { overline } : {}
-          }
-        ),
-        trailingSlot && /* @__PURE__ */ jsxRuntime.jsx(ListItemTrailing, { type: trailingType ?? "icon", children: trailingSlot }),
-        insetDivider && /* @__PURE__ */ jsxRuntime.jsx(
-          Divider,
-          {
-            orientation: "horizontal",
-            inset: "start",
-            className: "absolute right-0 bottom-0 left-0"
-          }
-        )
-      ]
+      value,
+      headline,
+      ...supportingText !== void 0 ? { supportingText } : {},
+      ...overline !== void 0 ? { overline } : {},
+      ...leadingSlot !== void 0 ? { leadingSlot } : {},
+      ...leadingType !== void 0 ? { leadingType } : {},
+      ...trailingSlot !== void 0 ? { trailingSlot } : {},
+      ...trailingType !== void 0 ? { trailingType } : {},
+      density,
+      isDisabled,
+      insetDivider,
+      ...className !== void 0 ? { className } : {}
     }
   );
 });
 ListItem.displayName = "ListItem";
+var StaticStyledListItem = React.forwardRef(
+  function StaticStyledListItem2({
+    headline,
+    supportingText,
+    overline,
+    leadingSlot,
+    leadingType,
+    trailingSlot,
+    trailingType,
+    density,
+    isDisabled,
+    insetDivider,
+    className
+  }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        ref,
+        role: "listitem",
+        className: cn(listItemVariants({ density }), "group/list-item", className),
+        ...getInteractionDataAttributes({ isDisabled }),
+        children: [
+          leadingSlot && /* @__PURE__ */ jsxRuntime.jsx(ListItemLeading, { type: leadingType ?? "icon", children: leadingSlot }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ListItemText,
+            {
+              headline,
+              ...supportingText !== void 0 ? { supportingText } : {},
+              ...overline !== void 0 ? { overline } : {}
+            }
+          ),
+          trailingSlot && /* @__PURE__ */ jsxRuntime.jsx(ListItemTrailing, { type: trailingType ?? "icon", children: trailingSlot }),
+          insetDivider && /* @__PURE__ */ jsxRuntime.jsx(
+            Divider,
+            {
+              orientation: "horizontal",
+              inset: "start",
+              className: "absolute right-0 bottom-0 left-0"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+StaticStyledListItem.displayName = "StaticStyledListItem";
 var InteractiveStyledListItem = React.forwardRef(
   function InteractiveStyledListItem2({
     value,
@@ -8186,36 +8301,36 @@ var InteractiveStyledListItem = React.forwardRef(
   }, forwardedRef) {
     const internalRef = React.useRef(null);
     const ref = forwardedRef ?? internalRef;
-    const { optionProps, isSelected, isDisabled } = reactAria.useOption({ key: value }, state, ref);
-    const { onMouseDown: handleRipple, ripples } = useRipple({
-      disabled: isDisabled
-    });
-    const mergedProps = utils.mergeProps(optionProps, { onMouseDown: handleRipple });
+    const { optionProps, isSelected, isDisabled, isPressed, isFocusVisible } = reactAria.useOption(
+      { key: value },
+      state,
+      ref
+    );
+    const { isHovered, hoverProps } = reactAria.useHover({ isDisabled });
+    const { onMouseDown: handleRipple, ripples } = useRipple({ disabled: isDisabled });
+    const mergedProps = utils.mergeProps(optionProps, hoverProps, { onMouseDown: handleRipple });
+    const hasLeading = !!leadingSlot;
+    const hasTrailing = !!trailingSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "li",
       {
         ...mergedProps,
         ref,
-        className: cn(
-          listItemVariants({
-            density,
-            isSelected,
-            isDisabled,
-            isInteractive: true
-          }),
-          className
-        ),
-        "data-selected": isSelected || void 0,
-        "data-disabled": isDisabled || void 0,
+        className: cn(listItemVariants({ density }), "group/list-item", className),
+        ...getInteractionDataAttributes({
+          isHovered,
+          isFocusVisible,
+          isPressed,
+          isSelected,
+          isDisabled
+        }),
+        "data-interactive": "",
+        "data-with-leading": hasLeading ? "" : void 0,
+        "data-with-trailing": hasTrailing ? "" : void 0,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              "aria-hidden": "true",
-              className: "bg-on-surface duration-short2 ease-standard pointer-events-none absolute inset-0 opacity-0 transition-opacity group-hover:opacity-8 group-active:opacity-12"
-            }
-          ),
           ripples,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: cn(listItemStateLayerVariants()) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: cn(listItemFocusRingVariants()) }),
           leadingSlot && /* @__PURE__ */ jsxRuntime.jsx(ListItemLeading, { type: leadingType ?? "icon", children: leadingSlot }),
           /* @__PURE__ */ jsxRuntime.jsx(
             ListItemText,