@fibery/ui-kit 1.37.0 → 1.38.0

package/src/{popup → popover}/modifiers.tsx

@@ -26,13 +26,6 @@ export const getMaxSize = (overflowOptions: Partial<PreventOverflowOptions>): Po
   },
 ];
 
-export const disableGpuAcceleration = {
-  name: "computeStyles",
-  options: {
-    gpuAcceleration: false,
-  },
-} as unknown as PopupModifier;
-
 const observeWidthEffect: (arg0: ModifierArguments<Record<string, unknown>>) => void = ({state, instance}) => {
   const {popper, reference} = state.elements;
 

package/src/{popup → popover}/popup-modifiers-context.ts

@@ -2,11 +2,11 @@ import {createContext} from "@fibery/react/src/create-context";
 import {getPopupContainerElement} from "../utils-dom";
 import {$TSFixMe} from "../tsfixme";
 import {Modifier} from "react-popper";
-import {Props} from "./index";
+import {PopoverOldProps} from "./index";
 
 export const [PopupModifiersProvider, usePopupModifiers] = createContext<{
   getPopupContainer: () => HTMLElement;
   additionalModifiers?: Array<Partial<Modifier<$TSFixMe, $TSFixMe>>>;
-  preventOverflowOptions?: Props["preventOverflowOptions"];
-  flipOptions?: Props["flipOptions"];
+  preventOverflowOptions?: PopoverOldProps["preventOverflowOptions"];
+  flipOptions?: PopoverOldProps["flipOptions"];
 }>("PopupModifiersProvider", {getPopupContainer: getPopupContainerElement});

package/src/reactions/reaction-button.tsx

@@ -1,11 +1,13 @@
 import {css, cx} from "@linaria/core";
-import {createPortal} from "react-dom";
-import {useLongPress} from "../use-long-press";
 import {Fragment, ReactNode, useState} from "react";
+import {createPortal} from "react-dom";
+import {border, lineHeight, space, themeVars} from "../design-system";
 import {Emoji} from "../emoji-picker/emoji";
-import {border, lineHeight, space, textStyles, themeVars} from "../design-system";
+import {ToggleButton} from "../toggle-button/toggle-button";
 import {Tooltip} from "../tooltip";
 import {useIsPhone} from "../use-is-phone";
+import {safeAreaInsetBottomVar} from "../mobile-styles";
+import {useLongPress} from "../use-long-press";
 import {getWordDivider} from "./get-word-divider";
 
 export type Reaction = {
@@ -22,6 +24,7 @@ type Props = {
   onSelect: (reactionKey: string) => unknown;
 };
 
+// @deprecated. remove it
 export const reactionButtonCss = css`
   all: unset;
   padding-inline: ${space.s6}px;
@@ -50,27 +53,8 @@ export const reactionButtonCss = css`
   }
 `;
 
-export const selectedReactionButtonCss = css`
-  .${reactionButtonCss}& {
-    &:not([aria-disabled="true"]) {
-      background-color: ${themeVars.colorBgReactionsSelectedDefault};
-      border-color: ${themeVars.colorBorderReactionsSelectedDefault};
-    }
-
-    &:not([aria-disabled="true"]):hover {
-      background-color: ${themeVars.colorBgReactionsSelectedHover};
-      border-color: ${themeVars.colorBorderReactionsSelectedHover};
-    }
-  }
-`;
-
-const countCss = css`
-  ${textStyles.small};
-  line-height: ${lineHeight.nowrap};
-  padding: ${space.s2}px ${space.s2}px ${space.s2}px ${space.s4}px;
-  .${selectedReactionButtonCss}:not(:disabled) & {
-    color: ${themeVars.colorTextReactionsSelected};
-  }
+const reactionButtonCssV2 = css`
+  min-width: ${space.s24 + space.s12}px;
 `;
 
 const overlayClassName = css`
@@ -99,6 +83,7 @@ function MobileOverlay({content, onClose}: {content: ReactNode; onClose: () => v
         className={css`
           flex-shrink: 0;
           background-color: ${themeVars.tooltipBgColor};
+          padding-bottom: var(${safeAreaInsetBottomVar});
         `}
       >
         {content}
@@ -131,30 +116,30 @@ export const ReactionButton = ({reaction, disabled, onSelect}: Props): JSX.Eleme
     isPreventDefault: true,
     delay: 300,
   });
+
   const button = (
-    <button
-      type="button"
-      aria-disabled={disabled}
-      className={cx(reactionButtonCss, reaction.selected && selectedReactionButtonCss)}
-      onClick={() => {
-        if (!disabled) {
-          onSelect(reaction.key);
-        }
-      }}
-      {...longPressEvent}
+    <ToggleButton
+      className={reactionButtonCssV2}
+      disabled={disabled}
+      iconStart={
+        <div
+          className={css`
+            font-size: 16px;
+            height: 16px;
+            width: 16px;
+          `}
+          {...longPressEvent}
+        >
+          <Emoji emoji={reaction.key} />
+        </div>
+      }
+      onPressedChange={() => onSelect(reaction.key)}
+      pressed={reaction.selected}
     >
-      <div
-        className={css`
-          font-size: 18px;
-          height: 18px;
-          width: 18px;
-        `}
-      >
-        <Emoji emoji={reaction.key} />
-      </div>
-      <span className={countCss}>{reaction.count}</span>
-    </button>
+      {reaction.count}
+    </ToggleButton>
   );
+
   if (reaction?.userNames?.length) {
     // noinspection CssInvalidPropertyValue
     const title = (

package/src/reactions/reaction-picker.tsx

@@ -1,16 +1,15 @@
 import {EmojiItem} from "@fibery/emoji-data";
-import {measureScrollbar} from "@fibery/helpers/utils/measure-scrollbar";
 import {useControllableState} from "@fibery/react/src/use-controllable-state";
 import {css} from "@linaria/core";
 import {CSSProperties, type FC, useCallback, useState} from "react";
 import {IconButton} from "../button/icon-button";
 import {layout, space, themeVars} from "../design-system";
 import {type EmojiPickerProps} from "../emoji-picker/emoji-picker";
+import {useResponsiveEmojiSize} from "../emoji-picker/use-responsive-emoji-size";
 import AddReactions from "../icons/react/AddReactions";
-import {Popup} from "../popup";
+import {Popover} from "../popover";
+import {ToggleButton} from "../toggle-button/toggle-button";
 import {Tooltip} from "../tooltip";
-import {useIsPhone} from "../use-is-phone";
-import {reactionButtonCss} from "./reaction-button";
 
 type Props = {
   mode: "default" | "in-row";
@@ -52,7 +51,7 @@ const pickerOffset: [number, number] = [0, space.s4];
 export const ReactionPicker = ({mode, onSelect, open, onOpenChange, EmojiPicker}: Props): JSX.Element => {
   const [isOpen = false, setOpen] = useControllableState({value: open, onChange: onOpenChange});
   const [triggerDomElement, setTriggerDomElement] = useState<HTMLButtonElement | null>(null);
-  const isPhone = useIsPhone();
+  const emojiSize = useResponsiveEmojiSize();
   const onEmojiSelect = useCallback(
     (emojiData: EmojiItem) => {
       onSelect(emojiData.colons);
@@ -65,62 +64,57 @@ export const ReactionPicker = ({mode, onSelect, open, onOpenChange, EmojiPicker}
     <div>
       <Tooltip side="bottom" title="Add reaction">
         {mode === "in-row" ? (
-          <button
+          <ToggleButton
             ref={setTriggerDomElement}
-            type="button"
-            onClick={() => {
-              setOpen(!isOpen);
+            onClick={() => setOpen(!isOpen)}
+            aria-expanded={isOpen}
+            aria-pressed={undefined}
+            style={{
+              // TODO: add IconToggleButton? or a separate prop?
+              width: "24px",
+              justifyContent: "center",
+              paddingInline: 0,
             }}
-            className={reactionButtonCss}
           >
-            <AddReactions viewBox={"0 0 20 20"} containerSize={16} iconSize={20} color={themeVars.iconColor} />
-          </button>
+            <AddReactions />
+          </ToggleButton>
         ) : (
           <IconButton
             ref={setTriggerDomElement}
+            aria-expanded={isOpen}
             onClick={() => {
               setOpen(!isOpen);
             }}
             size="small"
+            supportMobile
           >
             <AddReactions />
           </IconButton>
         )}
       </Tooltip>
-      {triggerDomElement ? (
-        <Popup
-          supportMobile
-          mobilePopupStyle={
-            {
-              "--fibery-emoji-container-width": "100%",
-              "--fibery-emoji-grid-height": "auto",
-              "--fibery-emoji-content-max-height": "auto",
-              zIndex: zIndex,
-            } as CSSProperties
-          }
-          title={"Add reaction"}
-          placement="auto"
-          offset={pickerOffset}
-          popupContainerClassName={popupContainerCss}
-          popupClassName={popupCss}
-          open={isOpen}
-          triggerDomElement={triggerDomElement}
-          trigger={<></>}
-          renderInPortal
-          onOpen={() => setOpen(true)}
-          onClose={() => setOpen(false)}
-        >
-          <EmojiPicker
-            emojiSize={
-              isPhone
-                ? Math.min(Math.floor((document.body.clientWidth - 24 - measureScrollbar() - 9 * 12) / 9), 40)
-                : 20
+      <Popover.Root open={isOpen} onOpen={() => setOpen(true)} onClose={() => setOpen(false)}>
+        <Popover.Trigger reference={triggerDomElement}></Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content
+            supportMobile
+            mobilePopupStyle={
+              {
+                "--fibery-emoji-container-width": "100%",
+                "--fibery-emoji-grid-height": "auto",
+                "--fibery-emoji-content-max-height": "auto",
+                zIndex: zIndex,
+              } as CSSProperties
             }
-            showSkinTones
-            onSelect={onEmojiSelect}
-          />
-        </Popup>
-      ) : null}
+            title={"Add reaction"}
+            placement="auto"
+            offset={pickerOffset}
+            popupContainerClassName={popupContainerCss}
+            popupClassName={popupCss}
+          >
+            <EmojiPicker emojiSize={emojiSize} showSkinTones onSelect={onEmojiSelect} />
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
     </div>
   );
 };

package/src/select/index.tsx

@@ -7,6 +7,7 @@ import BaseSelect, {
   createFilter,
   MenuListProps,
   MenuProps,
+  ControlProps,
   mergeStyles,
   MultiValue,
   MultiValueProps,
@@ -44,6 +45,7 @@ export type {
   GroupBase,
   MenuListProps,
   MenuProps,
+  ControlProps,
   MultiValue,
   MultiValueProps,
   OnChangeValue,
@@ -53,6 +55,8 @@ export type {
   SingleValue,
   SingleValueProps,
   StylesConfig,
+  SelectInstance,
+  BaseSelectProps,
 };
 
 export {reactSelectComponents as components, MenuListVirtualized, createFilter};
@@ -207,8 +211,8 @@ export const Select = forwardRef(function Select<
     [onKeyDown, menuOpenState]
   );
 
-  const contextRef = useRef<SelectInstance<T, U, V> | null>(null);
-  const combined = useComposedRefs(forwardedRef, contextRef);
+  const selectRef = useRef<SelectInstance<T, U, V> | null>(null);
+  const composedRef = useComposedRefs(forwardedRef, selectRef);
 
   const selectComponents = useSelectComponents({
     components,
@@ -221,9 +225,9 @@ export const Select = forwardRef(function Select<
   const combinedStyles = useSelectStyles({virtualized, zIndex, styles});
 
   return (
-    <ReactSelectRefContext.Provider value={contextRef as RefObject<SelectInstance>}>
+    <ReactSelectRefContext.Provider value={selectRef as RefObject<SelectInstance>}>
       <BaseSelect<T, U, V>
-        ref={combined}
+        ref={composedRef}
         // There are places, where it is useful to override menuPortalTarget globally for all selects.
         // When you are already in some popup. e.g. user input in buttons, relation filter popover.
         menuPortalTarget={getPopupContainerElement ? getPopupContainerElement() : menuPortalTarget}

package/src/select/select-in-popover.tsx

@@ -5,6 +5,7 @@ import React, {
   ForwardedRef,
   forwardRef,
   ReactNode,
+  RefObject,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -14,7 +15,7 @@ import React, {
 } from "react";
 import {inputOverrides} from "../antd/styles";
 import {border, space, textStyles} from "../design-system";
-import {Popup} from "../popup";
+import {Popover} from "../popover";
 import {useIsPhone} from "../use-is-phone";
 import {MenuTransparent} from "./components/menu";
 import {
@@ -33,6 +34,7 @@ import {ButtonColor, ButtonVariant} from "../button/base-button";
 import {makeSelectInPopoverStyles} from "./styles";
 import {SelectInstance} from "react-select";
 import {SELECT_IN_POPOVER_VALUE_MAX_HEIGHT} from "./constants";
+import {Wrap} from "@fibery/react/src/wrap";
 
 const offset = [0, space.s4] as [number, number];
 const popupHeightVH = 45;
@@ -63,7 +65,8 @@ const mobileClassName = css`
   padding-right: ${space.s12}px;
 `;
 
-const valueClassName = css`
+const triggerCss = css`
+  min-width: 0;
   border-radius: ${border.radius6}px;
 
   &:focus {
@@ -109,7 +112,7 @@ export type TriggerProps = {
 
 const TriggerDefault = ({innerRef, children, onClick, onKeyDown}: TriggerProps) => {
   return (
-    <div ref={innerRef} onClick={onClick} onKeyDown={onKeyDown} tabIndex={0} className={valueClassName}>
+    <div ref={innerRef} onClick={onClick} onKeyDown={onKeyDown} tabIndex={0} className={triggerCss}>
       {children}
     </div>
   );
@@ -119,9 +122,9 @@ export type SelectComponents<T, U extends boolean, V extends GroupBase<T>> = Sel
   Trigger?: ComponentType<TriggerProps>;
 };
 
-type SelectInPopoverRef<T, U extends boolean, V extends GroupBase<T>> = {
+export type SelectInPopoverRef<T, U extends boolean, V extends GroupBase<T>> = {
   valueRef: HTMLDivElement | null;
-  selectRef: SelectInstance<T, U, V> | null;
+  selectRef: RefObject<SelectInstance<T, U, V>>;
 };
 
 type Props<T, U extends boolean, V extends GroupBase<T>> = {
@@ -198,7 +201,6 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
     forbidValuesClearInCollnMode,
     isOptionDisabled,
   } = props;
-  const [triggerElement, setTriggerElement] = useState<HTMLDivElement | null>(null);
   const [visible, setVisible] = useControllableState({
     value: menuIsOpen,
     defaultValue: false,
@@ -208,20 +210,12 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
   });
   const blurTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
   const selectRef = useRef<SelectInstance<T, U, V>>(null);
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  useImperativeHandle(
-    forwardedRef,
-    () =>
-      ({
-        valueRef: ref.current,
-        selectRef: selectRef.current,
-      } as {valueRef: HTMLDivElement; selectRef: SelectInstance<T, U, V> | null})
-  );
+  const [triggerElement, setTriggerElement] = useState<HTMLDivElement | null>(null);
 
-  useEffect(() => {
-    setTriggerElement(ref.current);
-  }, []);
+  useImperativeHandle(forwardedRef, () => ({
+    valueRef: triggerElement,
+    selectRef,
+  }));
 
   useEffect(() => {
     if (blurTimeoutRef.current) {
@@ -356,9 +350,9 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
   };
 
   return (
-    <>
+    <Popover.Root open={visible} onOpen={() => onShow()} onClose={() => onHide()}>
       <Trigger
-        innerRef={ref}
+        innerRef={setTriggerElement}
         menuOpened={visible}
         disabled={disabled}
         valueSelected={Boolean(value)}
@@ -367,8 +361,9 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
       >
         {renderValue ? renderValue() : null}
       </Trigger>
-      {Boolean(triggerElement) && (
-        <Popup
+      <Popover.Trigger reference={triggerElement} />
+      <Wrap with={Popover.Portal} if={renderInPortal} getPopupContainer={getPopupContainer}>
+        <Popover.Content
           supportMobile
           title={title}
           offset={offset}
@@ -376,13 +371,6 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
           popupClassName={cx(popupClassName, popupStyles)}
           mobilePopupContentClassName={mobileClassName}
           placement="bottom-start"
-          renderInPortal={renderInPortal}
-          open={visible}
-          onOpen={() => onShow()}
-          onClose={() => onHide()}
-          trigger={<></>}
-          triggerDomElement={triggerElement}
-          getPopupContainer={getPopupContainer}
         >
           {title && !isPhone && <div className={titleClassName}>{title}</div>}
           {/*Usually we set popupContainerElement for react-select via context (SelectControlSettingsProvider). But here we render react-select in popover.*/}
@@ -423,9 +411,9 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
               isOptionDisabled={isOptionDisabled}
             />
           </SelectControlSettingsProvider>
-        </Popup>
-      )}
-    </>
+        </Popover.Content>
+      </Wrap>
+    </Popover.Root>
   );
 }
 

package/src/tab-nav/tab-nav.tsx

@@ -14,6 +14,7 @@ import {
 import {forwardRef, ReactNode, RefObject, useLayoutEffect, useRef} from "react";
 import {border, fontWeight, space, textStyles, themeVars} from "../design-system";
 import {ellipsis} from "../styles-utils";
+import {mobileRootSelector} from "../mobile-styles";
 import {TooltipIfOverflown} from "../tooltip-if-overflown";
 import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
 import {useResizeObserver} from "@fibery/react/src/use-resize-observer";
@@ -35,6 +36,10 @@ const tabNavItem = css`
   list-style: none;
 `;
 
+const tabNavItemWide = css`
+  flex: 1 0 0;
+`;
+
 const tabButton = css`
   all: unset;
   display: flex;
@@ -54,23 +59,40 @@ const tabButton = css`
   font-weight: ${fontWeight.medium};
   line-height: 16px;
 
-  &:hover,
-  &:focus-visible {
-    background-color: ${themeVars.colorBgTabHover};
-    color: ${themeVars.textColor};
+  @media (any-hover: hover) {
+    &:hover {
+      background-color: ${themeVars.colorBgTabHover};
+      color: ${themeVars.textColor};
+    }
   }
 
   &:focus-visible {
+    color: ${themeVars.textColor};
+    background-color: ${themeVars.colorBgTabHover};
     outline: 2px solid ${themeVars.colorBorderNeutralFocusRing};
   }
 
   &[data-active] {
     color: ${themeVars.textColor};
   }
+
+  .${tabNavItemWide} & {
+    justify-content: center;
+    text-align: center;
+  }
+
+  ${mobileRootSelector} & {
+    padding: ${space.s4}px ${space.s8}px ${space.s8}px ${space.s4}px;
+    font-size: ${textStyles.regular.fontSize}px;
+  }
 `;
 
 const tabNavButtonText = css`
   padding: 0 ${space.s4}px;
+
+  ${mobileRootSelector} & {
+    padding: 0 ${space.s6}px;
+  }
 `;
 
 const tabNavIndicatorTrack = css`
@@ -145,15 +167,15 @@ const useTabNavIndicator = ({active, itemRef}: {active?: boolean; itemRef: RefOb
   useResizeObserver(itemRef, () => updateIndicator());
 };
 
-export const TabNavItem = forwardRef<HTMLLIElement, NavigationMenuItemProps & {active?: boolean}>(
-  ({className, children, active, ...props}, forwardedRef) => {
+export const TabNavItem = forwardRef<HTMLLIElement, NavigationMenuItemProps & {active?: boolean; wide?: boolean}>(
+  ({className, children, active, wide, ...props}, forwardedRef) => {
     const itemRef = useRef(null);
     const ref = useComposedRefs(itemRef, forwardedRef);
 
     useTabNavIndicator({active, itemRef});
 
     return (
-      <NavigationMenuItem ref={ref} className={cx(tabNavItem, className)} {...props}>
+      <NavigationMenuItem ref={ref} className={cx(tabNavItem, wide && tabNavItemWide, className)} {...props}>
         {children}
       </NavigationMenuItem>
     );
@@ -165,9 +187,13 @@ export const TabNavLink = forwardRef<
   Omit<NavigationMenuLinkProps, "asChild"> & {
     before?: ReactNode;
     after?: ReactNode;
+    wide?: boolean;
     itemClassName?: string;
   }
->(function TabNavLink({children, className, itemClassName, active, before, after, href, ...linkProps}, forwardedRef) {
+>(function TabNavLink(
+  {children, className, itemClassName, active, wide, before, after, href, ...linkProps},
+  forwardedRef
+) {
   const renderAsButton = typeof href === "undefined";
 
   const Component = renderAsButton ? "button" : "a";
@@ -178,7 +204,7 @@ export const TabNavLink = forwardRef<
   return (
     <TooltipIfOverflown title={children}>
       {({setNode}) => (
-        <TabNavItem className={itemClassName} active={active}>
+        <TabNavItem className={itemClassName} active={active} wide={wide}>
           <NavigationMenuLink
             ref={forwardedRef}
             className={cx(tabButton, className)}

package/src/toast/primitives.tsx

@@ -5,6 +5,12 @@ import {ElementRef, forwardRef} from "react";
 import {IconButton} from "../button/icon-button";
 import {border, space, textStyles, themeVars, transition} from "../design-system";
 import CloseIcon from "../icons/react/Close";
+import {
+  safeAreaInsetBottomVar,
+  safeAreaInsetLeftVar,
+  safeAreaInsetRightVar,
+  safeAreaInsetTopVar,
+} from "../mobile-styles";
 
 const viewportCss = css`
   position: fixed;
@@ -17,7 +23,8 @@ const viewportCss = css`
   gap: ${space.s16}px;
   margin: 0;
   z-index: 1010; // inherited from old toast implementation
-  padding: 0;
+  padding: var(${safeAreaInsetTopVar}) var(${safeAreaInsetRightVar}) var(${safeAreaInsetBottomVar})
+    var(${safeAreaInsetLeftVar});
   list-style: none;
 
   transition: bottom ${transition}; // bottom may change dynamically

package/src/toggle-button/round-toggle-button.tsx

@@ -0,0 +1,23 @@
+import {ComponentRef, forwardRef} from "react";
+import {ToggleButton, ToggleButtonProps} from "./toggle-button";
+import {css, cx} from "@linaria/core";
+
+const roundToggleButtonCss = css`
+  &:is(&) {
+    border-radius: 100%;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    justify-content: center;
+  }
+`;
+
+export const RoundToggleButton = forwardRef<ComponentRef<typeof ToggleButton>, Omit<ToggleButtonProps, "iconStart">>(
+  function RoundToggleButton({children, className, ...props}, ref) {
+    return (
+      <ToggleButton ref={ref} className={cx(roundToggleButtonCss, className)} {...props}>
+        {children}
+      </ToggleButton>
+    );
+  }
+);

package/src/toggle-button/toggle-button-group.tsx

@@ -0,0 +1,34 @@
+import {css, cx} from "@linaria/core";
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+  ToggleGroupItemProps,
+  ToggleGroupMultipleProps,
+  ToggleGroupSingleProps,
+} from "@radix-ui/react-toggle-group";
+import {ComponentRef, forwardRef} from "react";
+import {ToggleButton, ToggleButtonProps} from "./toggle-button";
+import {space} from "../design-system";
+
+export const toggleButtonGroupCss = css`
+  display: flex;
+  flex-direction: row;
+`;
+
+export const ToggleButtonGroup = forwardRef<
+  ComponentRef<typeof ToggleGroup>,
+  (ToggleGroupSingleProps | ToggleGroupMultipleProps) & {gap?: number}
+>(function ToggleButtonGroup({className, gap = space.s4, ...props}, ref) {
+  return <ToggleGroup ref={ref} style={{gap}} className={cx(toggleButtonGroupCss, className)} {...props} />;
+});
+
+export const ToggleButtonGroupItem = forwardRef<
+  ComponentRef<typeof ToggleGroupItem>,
+  ToggleGroupItemProps & ToggleButtonProps
+>(function ToggleButtonGroupItem({className, children, asChild, ...props}, ref) {
+  return (
+    <ToggleGroupItem ref={ref} className={className} {...props} asChild>
+      {asChild ? children : <ToggleButton>{children}</ToggleButton>}
+    </ToggleGroupItem>
+  );
+});