@seed-design/lynx-react 0.5.1 → 0.6.0

package/src/components/SelectBox/SelectBox.tsx

@@ -0,0 +1,533 @@
+import * as React from "@lynx-js/react";
+import clsx from "clsx";
+
+import { selectBox, type SelectBoxVariantProps } from "@seed-design/lynx-css/recipes/select-box";
+import {
+  selectBoxCheckmark,
+  type SelectBoxCheckmarkVariantProps,
+} from "@seed-design/lynx-css/recipes/select-box-checkmark";
+import { selectBoxGroup } from "@seed-design/lynx-css/recipes/select-box-group";
+
+import type {
+  LynxAccessibilityProps,
+  LynxStyledElementProps,
+  LynxTextRef,
+  LynxViewProps,
+  LynxViewRef,
+} from "../../types";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+import { CheckboxRoot, type CheckboxRootProps, useCheckboxContext } from "../Checkbox/Checkbox";
+import { IconSlotProvider, InternalIcon, type InternalIconProps } from "../Icon/Icon";
+import {
+  RadioGroupItem,
+  type RadioGroupItemProps,
+  useRadioGroupItemContext,
+} from "../RadioGroup/RadioGroup";
+
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 미지원 기능:
+ * - HiddenInput / name / required / invalid: Lynx에 native form 제출 모델이 없음
+ * - focus / focusVisible: Lynx에 키보드 포커스 개념이 없음
+ * - DOM field wrapper: Lynx Registry는 label/error 연결용 wrapper를 제공하지 않음
+ */
+
+type FooterVisibility = "when-selected" | "when-not-selected" | "always";
+type PublicSelectBoxVariantProps = Omit<
+  SelectBoxVariantProps,
+  "selected" | "pressed" | "disabled" | "footerOpen"
+>;
+
+interface SelectBoxRuntimeContextValue {
+  selected: boolean;
+  pressed: boolean;
+  disabled: boolean;
+  footerVisibility: FooterVisibility;
+  variantProps: PublicSelectBoxVariantProps;
+  accessibilityRole: "checkbox" | "radio";
+}
+
+const SelectBoxRuntimeContext = React.createContext<SelectBoxRuntimeContextValue | null>(null);
+const SelectBoxLayoutContext = React.createContext<PublicSelectBoxVariantProps>({});
+const { ClassNamesProvider, useClassNames } = createSlotRecipeContext(selectBox);
+
+function useSelectBoxRuntimeContext(consumer: string): SelectBoxRuntimeContextValue {
+  const context = React.useContext(SelectBoxRuntimeContext);
+  if (!context) {
+    throw new Error(`<${consumer}/> must be rendered inside a SelectBox root or item.`);
+  }
+  return context;
+}
+
+interface SelectBoxSurfaceProps extends LynxStyledElementProps {
+  accessibilityProps: LynxAccessibilityProps;
+}
+
+function SelectBoxSurface({
+  children,
+  className,
+  style,
+  accessibilityProps,
+}: SelectBoxSurfaceProps) {
+  const context = useSelectBoxRuntimeContext("SelectBoxSurface");
+  const footerOpen =
+    context.footerVisibility === "always" ||
+    (context.footerVisibility === "when-selected" ? context.selected : !context.selected);
+  const classes = selectBox({
+    ...context.variantProps,
+    selected: context.selected,
+    pressed: context.pressed,
+    disabled: context.disabled,
+    footerOpen,
+  });
+
+  return (
+    <ClassNamesProvider value={classes}>
+      <IconSlotProvider
+        value={{
+          classNames: { prefixIcon: classes.prefixIcon },
+          deps: [context.selected, context.pressed, context.disabled],
+        }}
+      >
+        <view
+          className={clsx(classes.root, className)}
+          style={style}
+          accessibility-element={true}
+          accessibility-role-description={context.accessibilityRole}
+          accessibility-value={context.selected ? "selected" : "not selected"}
+          accessibility-traits={context.disabled ? "disabled" : undefined}
+          {...accessibilityProps}
+        >
+          {children}
+          <view className={classes.selectedStroke} accessibility-elements-hidden={true} />
+        </view>
+      </IconSlotProvider>
+    </ClassNamesProvider>
+  );
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SelectBoxGroupProps extends LynxStyledElementProps {
+  /**
+   * 열 개수입니다. 2 이상이면 자식 Select Box의 기본 layout이 vertical이 됩니다.
+   * @default 1
+   */
+  columns?: number;
+}
+
+const SelectBoxGroup = React.forwardRef<unknown, SelectBoxGroupProps>((props, ref) => {
+  const { children, columns = 1, className, style, ...nativeProps } = props;
+  const classes = selectBoxGroup({ multiColumn: columns > 1 });
+  const layout: PublicSelectBoxVariantProps["layout"] = columns > 1 ? "vertical" : "horizontal";
+
+  return (
+    <SelectBoxLayoutContext.Provider value={{ layout }}>
+      <view
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        className={clsx(classes, className)}
+        style={{ ...style, gridTemplateColumns: `repeat(${columns}, 1fr)` }}
+        {...nativeProps}
+      >
+        {children}
+      </view>
+    </SelectBoxLayoutContext.Provider>
+  );
+});
+SelectBoxGroup.displayName = "SelectBoxGroup";
+
+export interface CheckSelectBoxGroupProps extends SelectBoxGroupProps {}
+export const CheckSelectBoxGroup = SelectBoxGroup;
+
+export interface RadioSelectBoxGroupProps extends SelectBoxGroupProps {}
+export const RadioSelectBoxGroup = SelectBoxGroup;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface CheckSelectBoxRootProps
+  extends PublicSelectBoxVariantProps,
+    LynxStyledElementProps,
+    LynxAccessibilityProps,
+    Pick<
+      CheckboxRootProps,
+      "checked" | "defaultChecked" | "indeterminate" | "disabled" | "onCheckedChange"
+    > {
+  /** @default "when-selected" */
+  footerVisibility?: FooterVisibility;
+}
+
+interface CheckSelectBoxSurfaceProps extends SelectBoxSurfaceProps {
+  footerVisibility: FooterVisibility;
+  variantProps: PublicSelectBoxVariantProps;
+}
+
+function CheckSelectBoxSurface(props: CheckSelectBoxSurfaceProps) {
+  const checkbox = useCheckboxContext("CheckSelectBoxRoot");
+  const contextValue = React.useMemo<SelectBoxRuntimeContextValue>(
+    () => ({
+      selected: checkbox.checked,
+      pressed: checkbox.pressed,
+      disabled: checkbox.disabled,
+      footerVisibility: props.footerVisibility,
+      variantProps: props.variantProps,
+      accessibilityRole: "checkbox",
+    }),
+    [
+      checkbox.checked,
+      checkbox.disabled,
+      checkbox.pressed,
+      props.footerVisibility,
+      props.variantProps,
+    ],
+  );
+
+  return (
+    <SelectBoxRuntimeContext.Provider value={contextValue}>
+      <SelectBoxSurface {...props} />
+    </SelectBoxRuntimeContext.Provider>
+  );
+}
+
+export const CheckSelectBoxRoot = React.forwardRef<unknown, CheckSelectBoxRootProps>(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      style,
+      checked,
+      defaultChecked,
+      indeterminate,
+      disabled,
+      onCheckedChange,
+      footerVisibility = "when-selected",
+      ...restProps
+    } = props;
+    const inheritedVariantProps = React.useContext(SelectBoxLayoutContext);
+    const [variantProps, accessibilityProps] = selectBox.splitVariantProps(restProps);
+    const resolvedVariantProps = {
+      ...variantProps,
+      layout: variantProps.layout ?? inheritedVariantProps.layout,
+    };
+    const interactionRootClassName = selectBox(resolvedVariantProps).interactionRoot;
+
+    return (
+      <CheckboxRoot
+        ref={ref}
+        className={interactionRootClassName}
+        checked={checked}
+        defaultChecked={defaultChecked}
+        indeterminate={indeterminate}
+        disabled={disabled}
+        onCheckedChange={onCheckedChange}
+        accessibility-element={false}
+      >
+        <CheckSelectBoxSurface
+          className={className}
+          style={style}
+          footerVisibility={footerVisibility}
+          variantProps={resolvedVariantProps}
+          accessibilityProps={accessibilityProps}
+        >
+          {children}
+        </CheckSelectBoxSurface>
+      </CheckboxRoot>
+    );
+  },
+);
+CheckSelectBoxRoot.displayName = "CheckSelectBoxRoot";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioSelectBoxItemProps
+  extends PublicSelectBoxVariantProps,
+    LynxStyledElementProps,
+    LynxAccessibilityProps,
+    Pick<RadioGroupItemProps, "value" | "disabled"> {
+  /** @default "when-selected" */
+  footerVisibility?: FooterVisibility;
+}
+
+interface RadioSelectBoxSurfaceProps extends SelectBoxSurfaceProps {
+  footerVisibility: FooterVisibility;
+  variantProps: PublicSelectBoxVariantProps;
+}
+
+function RadioSelectBoxSurface(props: RadioSelectBoxSurfaceProps) {
+  const item = useRadioGroupItemContext("RadioSelectBoxItem");
+  const contextValue = React.useMemo<SelectBoxRuntimeContextValue>(
+    () => ({
+      selected: item.checked,
+      pressed: item.pressed,
+      disabled: item.disabled,
+      footerVisibility: props.footerVisibility,
+      variantProps: props.variantProps,
+      accessibilityRole: "radio",
+    }),
+    [item.checked, item.disabled, item.pressed, props.footerVisibility, props.variantProps],
+  );
+
+  return (
+    <SelectBoxRuntimeContext.Provider value={contextValue}>
+      <SelectBoxSurface {...props} />
+    </SelectBoxRuntimeContext.Provider>
+  );
+}
+
+export const RadioSelectBoxItem = React.forwardRef<unknown, RadioSelectBoxItemProps>(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      style,
+      value,
+      disabled,
+      footerVisibility = "when-selected",
+      ...restProps
+    } = props;
+    const inheritedVariantProps = React.useContext(SelectBoxLayoutContext);
+    const [variantProps, accessibilityProps] = selectBox.splitVariantProps(restProps);
+    const resolvedVariantProps = {
+      ...variantProps,
+      layout: variantProps.layout ?? inheritedVariantProps.layout,
+    };
+    const interactionRootClassName = selectBox(resolvedVariantProps).interactionRoot;
+
+    return (
+      <RadioGroupItem
+        ref={ref}
+        className={interactionRootClassName}
+        value={value}
+        disabled={disabled}
+        accessibility-element={false}
+      >
+        <RadioSelectBoxSurface
+          className={className}
+          style={style}
+          footerVisibility={footerVisibility}
+          variantProps={resolvedVariantProps}
+          accessibilityProps={accessibilityProps}
+        >
+          {children}
+        </RadioSelectBoxSurface>
+      </RadioGroupItem>
+    );
+  },
+);
+RadioSelectBoxItem.displayName = "RadioSelectBoxItem";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+function createViewSlot(displayName: string, slot: keyof ReturnType<typeof selectBox>) {
+  const Component = React.forwardRef<unknown, LynxStyledElementProps>((props, ref) => {
+    const { children, className, ...nativeProps } = props;
+    const classes = useClassNames();
+
+    return (
+      <view
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        className={clsx(classes[slot], className)}
+        {...nativeProps}
+      >
+        {children}
+      </view>
+    );
+  });
+  Component.displayName = displayName;
+  return Component;
+}
+
+function createTextSlot(displayName: string, slot: keyof ReturnType<typeof selectBox>) {
+  const Component = React.forwardRef<unknown, LynxStyledElementProps>((props, ref) => {
+    const { children, className, ...nativeProps } = props;
+    const classes = useClassNames();
+
+    return (
+      <text
+        {...(ref ? { ref: ref as LynxTextRef } : {})}
+        className={clsx(classes[slot], className)}
+        {...nativeProps}
+      >
+        {children}
+      </text>
+    );
+  });
+  Component.displayName = displayName;
+  return Component;
+}
+
+function createLabelSlot(displayName: string) {
+  const Component = React.forwardRef<unknown, LynxStyledElementProps>((props, ref) => {
+    const { children, className, ...nativeProps } = props;
+    const classes = useClassNames();
+    const labelChildren =
+      typeof children === "string" || typeof children === "number" ? (
+        <text>{children}</text>
+      ) : (
+        children
+      );
+
+    return (
+      <view
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        className={clsx(classes.label, className)}
+        {...nativeProps}
+      >
+        {labelChildren}
+      </view>
+    );
+  });
+  Component.displayName = displayName;
+  return Component;
+}
+
+export interface CheckSelectBoxTriggerProps extends LynxStyledElementProps {}
+export const CheckSelectBoxTrigger = createViewSlot("CheckSelectBoxTrigger", "trigger");
+export interface CheckSelectBoxContentProps extends LynxStyledElementProps {}
+export const CheckSelectBoxContent = createViewSlot("CheckSelectBoxContent", "content");
+export interface CheckSelectBoxBodyProps extends LynxStyledElementProps {}
+export const CheckSelectBoxBody = createViewSlot("CheckSelectBoxBody", "body");
+export interface CheckSelectBoxLabelProps extends LynxStyledElementProps {}
+export const CheckSelectBoxLabel = createLabelSlot("CheckSelectBoxLabel");
+export interface CheckSelectBoxDescriptionProps extends LynxStyledElementProps {}
+export const CheckSelectBoxDescription = createTextSlot("CheckSelectBoxDescription", "description");
+
+export interface RadioSelectBoxTriggerProps extends LynxStyledElementProps {}
+export const RadioSelectBoxTrigger = createViewSlot("RadioSelectBoxTrigger", "trigger");
+export interface RadioSelectBoxContentProps extends LynxStyledElementProps {}
+export const RadioSelectBoxContent = createViewSlot("RadioSelectBoxContent", "content");
+export interface RadioSelectBoxBodyProps extends LynxStyledElementProps {}
+export const RadioSelectBoxBody = createViewSlot("RadioSelectBoxBody", "body");
+export interface RadioSelectBoxLabelProps extends LynxStyledElementProps {}
+export const RadioSelectBoxLabel = createLabelSlot("RadioSelectBoxLabel");
+export interface RadioSelectBoxDescriptionProps extends LynxStyledElementProps {}
+export const RadioSelectBoxDescription = createTextSlot("RadioSelectBoxDescription", "description");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SelectBoxFooterProps extends LynxStyledElementProps, LynxAccessibilityProps {}
+
+type FooterLayoutChangeHandler = NonNullable<LynxViewProps["bindlayoutchange"]>;
+
+function getFooterLayoutHeight(event: Parameters<FooterLayoutChangeHandler>[0]): number | null {
+  const eventWithHeight = event as Parameters<FooterLayoutChangeHandler>[0] & { height?: number };
+  const height = event.detail?.height ?? event.params?.height ?? eventWithHeight.height;
+  if (typeof height !== "number" || !Number.isFinite(height)) return null;
+  return Math.max(0, height);
+}
+
+const SelectBoxFooter = React.forwardRef<unknown, SelectBoxFooterProps>((props, ref) => {
+  const {
+    children,
+    className,
+    style,
+    "accessibility-elements-hidden": accessibilityElementsHidden = false,
+    ...nativeProps
+  } = props;
+  const context = useSelectBoxRuntimeContext("SelectBoxFooter");
+  const classes = useClassNames();
+  const [contentHeight, setContentHeight] = React.useState(0);
+  const open =
+    context.footerVisibility === "always" ||
+    (context.footerVisibility === "when-selected" ? context.selected : !context.selected);
+  const handleLayoutChange = React.useCallback<FooterLayoutChangeHandler>((event) => {
+    const height = getFooterLayoutHeight(event);
+    if (height !== null) setContentHeight((current) => (current === height ? current : height));
+  }, []);
+
+  return (
+    <view
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      className={clsx(classes.footer, className)}
+      style={{
+        ...style,
+        height:
+          context.footerVisibility === "always" || (open && contentHeight === 0)
+            ? "auto"
+            : open
+              ? `${contentHeight}px`
+              : "0px",
+      }}
+      accessibility-elements-hidden={!open || accessibilityElementsHidden}
+      {...nativeProps}
+    >
+      <view className={classes.footerInner} bindlayoutchange={handleLayoutChange}>
+        {children}
+      </view>
+    </view>
+  );
+});
+SelectBoxFooter.displayName = "SelectBoxFooter";
+
+export interface CheckSelectBoxFooterProps extends SelectBoxFooterProps {}
+export const CheckSelectBoxFooter = SelectBoxFooter;
+export interface RadioSelectBoxFooterProps extends SelectBoxFooterProps {}
+export const RadioSelectBoxFooter = SelectBoxFooter;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+interface SelectBoxCheckmarkContextValue {
+  iconClassName: string;
+  variantProps: SelectBoxCheckmarkVariantProps;
+}
+
+const SelectBoxCheckmarkContext = React.createContext<SelectBoxCheckmarkContextValue | null>(null);
+
+export interface CheckSelectBoxCheckmarkControlProps extends LynxStyledElementProps {}
+
+export const CheckSelectBoxCheckmarkControl = React.forwardRef<
+  unknown,
+  CheckSelectBoxCheckmarkControlProps
+>((props, ref) => {
+  const { children, className, ...nativeProps } = props;
+  const context = useSelectBoxRuntimeContext("CheckSelectBoxCheckmarkControl");
+  const variantProps = {
+    selected: context.selected,
+    pressed: context.pressed,
+    disabled: context.disabled,
+  };
+  const classes = selectBoxCheckmark(variantProps);
+
+  return (
+    <SelectBoxCheckmarkContext.Provider value={{ iconClassName: classes.icon, variantProps }}>
+      <view
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        className={clsx(classes.root, className)}
+        accessibility-elements-hidden={true}
+        {...nativeProps}
+      >
+        {children}
+      </view>
+    </SelectBoxCheckmarkContext.Provider>
+  );
+});
+CheckSelectBoxCheckmarkControl.displayName = "CheckSelectBoxCheckmarkControl";
+
+export interface CheckSelectBoxCheckmarkIconProps extends Omit<InternalIconProps, "deps"> {}
+
+export const CheckSelectBoxCheckmarkIcon = React.forwardRef<
+  unknown,
+  CheckSelectBoxCheckmarkIconProps
+>((props, ref) => {
+  const { className, ...otherProps } = props;
+  const context = React.useContext(SelectBoxCheckmarkContext);
+  if (!context) {
+    throw new Error(
+      "<CheckSelectBoxCheckmarkIcon/> must be rendered inside <CheckSelectBoxCheckmarkControl/>.",
+    );
+  }
+
+  return (
+    <InternalIcon
+      ref={ref}
+      className={clsx(context.iconClassName, className)}
+      deps={[
+        context.variantProps.selected,
+        context.variantProps.pressed,
+        context.variantProps.disabled,
+      ]}
+      {...otherProps}
+    />
+  );
+});
+CheckSelectBoxCheckmarkIcon.displayName = "CheckSelectBoxCheckmarkIcon";

package/src/components/SelectBox/index.ts

@@ -0,0 +1,3 @@
+export * from "./SelectBox";
+export * as CheckSelectBox from "./CheckSelectBox.namespace";
+export * as RadioSelectBox from "./RadioSelectBox.namespace";

package/src/components/Tabs/Tabs.test.tsx

@@ -3,7 +3,12 @@ import { fireEvent, render } from "@lynx-js/react/testing-library";
 import { describe, expect, it, vi } from "vitest";
 
 import * as Tabs from "./Tabs.namespace";
-import { getTabsLayoutWidth, getTabsOrderedItems, getTabsTriggerRects } from "./Tabs.utils";
+import {
+  areTabsTransitionsEnabled,
+  getTabsLayoutWidth,
+  getTabsOrderedItems,
+  getTabsTriggerRects,
+} from "./Tabs.utils";
 
 function BasicTabs(props: {
   value?: string;
@@ -41,6 +46,26 @@ describe("Tabs", () => {
     expect(listContent?.querySelectorAll(".seed-tabs__trigger")).toHaveLength(2);
   });
 
+  it("disables label and indicator transitions during the initial render", () => {
+    const { container } = render(<BasicTabs defaultValue="two" />);
+    const labels = container.querySelectorAll<HTMLElement>(".seed-tabs__triggerLabel");
+    const indicator = container.querySelector<HTMLElement>(".seed-tabs__indicator");
+
+    expect(indicator).toHaveClass("seed-tabs__indicator--transitionEnabled_false");
+    expect(indicator?.style.transitionDuration).toBe("");
+    for (const label of labels) {
+      expect(label).toHaveClass("seed-tabs__triggerLabel--transitionEnabled_false");
+      expect(label.style.transitionDuration).toBe("");
+    }
+  });
+
+  it("disables transitions when a dynamically added trigger is unmeasured", () => {
+    const rects = getTabsTriggerRects(["one", "two"], { one: 80, two: 80 });
+
+    expect(areTabsTransitionsEnabled(["one", "two"], rects)).toBe(true);
+    expect(areTabsTransitionsEnabled(["one", "two", "three"], rects)).toBe(false);
+  });
+
   it("changes an uncontrolled value when a trigger is tapped", () => {
     const onValueChange = vi.fn();
     const { container } = render(<BasicTabs defaultValue="one" onValueChange={onValueChange} />);

package/src/components/Tabs/Tabs.tsx

@@ -20,6 +20,7 @@ import type {
 } from "../../types";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
 import {
+  areTabsTransitionsEnabled,
   getTabsLayoutWidth,
   getTabsOrderedItems,
   getTabsTriggerRects,
@@ -31,7 +32,10 @@ type NativeViewPagerProps = IntrinsicElements["viewpager"];
 type LayoutChangeHandler = NonNullable<NativeViewProps["bindlayoutchange"]>;
 type TriggerRect = TabsLayoutRect;
 type TriggerItem = { value: string; disabled: boolean };
-type TabsPublicVariantProps = Omit<TabsVariantProps, "selected" | "disabled" | "inCarousel">;
+type TabsPublicVariantProps = Omit<
+  TabsVariantProps,
+  "selected" | "disabled" | "inCarousel" | "transitionEnabled"
+>;
 
 const { ClassNamesProvider, useClassNames } = createSlotRecipeContext(tabs);
 
@@ -65,6 +69,7 @@ interface TabsContextValue {
   selectedPagerIndex: number;
   indicatorRef: React.RefObject<MainThread.Element>;
   triggerRects: Record<string, TriggerRect>;
+  transitionsEnabled: boolean;
   registerTrigger: (value: string, disabled: boolean) => () => void;
   registerContent: (value: string) => () => void;
   updateTriggerDisabled: (value: string, disabled: boolean) => void;
@@ -137,7 +142,6 @@ export const TabsRoot = React.forwardRef<unknown, TabsRootProps>((props, ref) =>
     onValueChange,
     ...nativeProps
   } = otherProps;
-  const classNames = tabs(variantProps);
   const [value, setValueInternal] = useControllableState<string | undefined>({
     value: valueProp,
     defaultValue,
@@ -169,6 +173,11 @@ export const TabsRoot = React.forwardRef<unknown, TabsRootProps>((props, ref) =>
       ),
     [items, triggerWidths],
   );
+  const transitionsEnabled = areTabsTransitionsEnabled(
+    items.map((item) => item.value),
+    triggerRects,
+  );
+  const classNames = tabs({ ...variantProps, transitionEnabled: transitionsEnabled });
   const visualValue = indicatorValue ?? value;
   const indicatorIndex = items.findIndex((item) => item.value === visualValue);
   const selectedPagerIndex = value === undefined ? -1 : pagerValues.indexOf(value);
@@ -283,6 +292,7 @@ export const TabsRoot = React.forwardRef<unknown, TabsRootProps>((props, ref) =>
       indicatorIndex,
       selectedPagerIndex,
       indicatorRef,
+      transitionsEnabled,
       triggerRects,
       registerTrigger,
       registerContent,
@@ -305,6 +315,7 @@ export const TabsRoot = React.forwardRef<unknown, TabsRootProps>((props, ref) =>
       selectedPagerIndex,
       indicatorRef,
       triggerRects,
+      transitionsEnabled,
       registerTrigger,
       registerContent,
       updateTriggerDisabled,
@@ -447,6 +458,7 @@ export const TabsTrigger = React.forwardRef<unknown, TabsTriggerProps>((props, r
     ...context.variantProps,
     selected: visuallySelected,
     disabled,
+    transitionEnabled: context.transitionsEnabled,
   });
   const label =
     typeof children === "string" || typeof children === "number" ? String(children) : undefined;

package/src/components/Tabs/Tabs.utils.ts

@@ -54,3 +54,10 @@ export function getTabsTriggerRects(
 
   return rects;
 }
+
+export function areTabsTransitionsEnabled(
+  values: string[],
+  rects: Record<string, TabsLayoutRect>,
+): boolean {
+  return values.length > 0 && values.every((value) => rects[value] !== undefined);
+}